Latihan 2

1. Buka fail templat. html. Simpan di bawah nama baharu segi empat sama. html dalam folder public_html.

2. Tulis antara tag tajuk baharu “Kawasan rumah”.

3. Kepada kandungan salin teks daripada fail Kawasan rumah.txt daripada folder html_ ccs_2 .

4. Kami akan menulis gaya dalam fail yang sama gaya. css, yang kami buat dalam pelajaran sebelumnya. Oleh itu dalam fail segi empat sama. html pautan ke helaian gaya ini dengan memasukkan antara tag Dan(Rajah 12)

Rajah 12

5. Format pengepala dengan tag

dan berikan setiap tajuk kelasnya sendiri (Rajah 13).

Rajah 13

Fail anda segi empat sama. html sepatutnya kelihatan seperti ini (Rajah 14).

Rajah 14

6. Dalam helaian gaya gaya. css buat entri berikut (Rajah 15)

Rajah 15

7. Semak halaman web dalam pelayar anda. Hasilnya adalah dalam Rajah 16.

Rajah 16

8. Anda mungkin perasan bahawa dalam kami entri baru Gaya tajuk mempunyai reka bentuk berulang font-family:Verdana; text-align:left; saiz fon:14pt. Konstruk sedemikian boleh ditulis sekali dengan mengumpulkan pemilih yang digunakan. Untuk melakukan ini, anda perlu menyenaraikan pemilih yang dipisahkan dengan koma, dan kemudian tulis dalam kurungan kerinting sifat umum. Kemudian helaian gaya kami untuk tajuk akan kelihatan seperti ini (Rajah 17):

Rajah 17

Latihan 3

Di bawah setiap tajuk dalam fail segi empat sama. html terdapat teks. Format perenggan menggunakan pelbagai kelas. Gunakan warna, penjajaran dan muka taip fon yang berbeza. Nama kelas mestilah unik. Tidak digalakkan menggunakan nama yang sama untuk pemilih yang berbeza. Satu daripada pilihan yang mungkin dalam Rajah 18:

Rajah 18

5. Gaya ID untuk elemen tertentu

Pelajaran CSS termasuk pembelajaran tentang apa yang dipanggil gaya id.

Mana-mana elemen boleh diberikan pengecam ID, dan kemudian tetapkan beberapa gaya kepada elemen ini menggunakan ID.

Sebagai contoh:

Entri dalam fail helaian gaya adalah seperti berikut

# ujian { warna:#00 ffff}

Kini anda boleh memadankan gaya ini dengan mana-mana elemen dalam dokumen html:

...

...

Dalam contoh ini, ujian perkataan ialah nama gaya. Nama boleh dari apa sahaja huruf latin, tetapi ia mestilah unik, i.e. tiada unsur dalam helaian gaya harus mempunyai nama itu lagi.

Latihan 4

Jom buat template untuk menu masa depan laman web kami.

1. Buka fail templat. html dan simpan di bawah nama baharu menu. html dalam folder public_html.

2. Kepada kandungan halaman fail menu. html masukkan teks daripada fail menu. txt daripada folder html_ css_2 .

3. Menggunakan teg HTML, format fail seperti berikut:

• untuk tajuk "Kategori Projek", "Katalog Projek Seni Bina" dan "Kawasan Rumah" gunakan teg

  ;

• untuk senarai "Kategori Projek", gunakan senarai bernombor
  ;
  1. untuk senarai "Katalog projek seni bina" dan "Kawasan rumah", gunakan senarai bertitik tumpu mata

     4. Di bahagian atas halaman web, masukkan logo (fail logo_myhouse.gif). Keputusan harus sepadan dengan Rajah 19.

     

     Rajah 19

     5. Untuk menu ini kami akan membuat helaian gaya berasingan di bawah nama gaya_ menu. css. Pautkan fail menu. html dan helaian gaya gaya_ menu. css dengan memasukkan entri antara tag Dan dalam fail menu. html.

     6. Buat dokumen kosong dan simpan di bawah nama gaya_ menu.css dalam folder anda.

     7. Untuk kumpulan "Kategori Projek", yang merangkumi tajuk dan senarai bernombor, dan untuk kumpulan "Katalog Projek Seni Bina", yang merangkumi tajuk itu sendiri dan senarai bertitik tumpu mata, kami akan menggunakan nama gaya id biru. Itu. kod akan kelihatan seperti ini (Rajah 20):

     

     Rajah 20

     8. Dalam fail gaya_ menu. css Gaya untuk elemen ini akan berwarna biru tua, dalam fon Tahoma (Rajah 21):

     Rajah 21

     9. Untuk kumpulan "Kawasan Rumah", yang termasuk pengepala dan senarai bertitik tumpu, kami akan menggunakan nama gaya id coklat. Itu. kod akan kelihatan seperti ini (Rajah 22):

     

     Rajah 22

     10. Dalam fail gaya_ menu. css mari kita gayakan elemen ini coklat, dalam fon Times (Rajah 23):

     Rajah 23

     11. Dan tambah satu lagi warna latar belakang pada fail menu.html (Rajah 24)

     Rajah 24

     12. Hasilnya, kami mendapat halaman web berikut (Rajah 25)

     

     Rajah 25

     Hasil daripada melengkapkan tutorial CSS ini, anda seharusnya mempunyai fail berikut dibuat:

     • gaya. css
       
     • gaya_ menu. css
     • segi empat sama. html
       
     • menu. html
       

     1. Apakah Helaian Gaya Cascading CSS?

     Halo pembaca yang dikasihi. Saya memutuskan untuk membuka bahagian baharu tapak yang didedikasikan untuk bekerja dengan helaian gaya cascading CSS.

     Jadi, apakah css helaian gaya berlatarkan?

     css(Bahasa Inggeris) Cascading Style Sheets — Cascading Style Sheets) ialah bahasa untuk menerangkan rupa dokumen yang ditulis menggunakan bahasa penanda.
     Untuk memudahkan pemula memahami, cascading style sheets css direka untuk mencipta reka bentuk yang cantik dan mudah untuk diedit untuk halaman tapak web html.

     Lembaran gaya berlatarkan pertama kali digunakan pada 90-an abad yang lalu. Tetapi pada mulanya mereka tidak begitu popular seperti sekarang, kerana pelayar yang berbeza Halaman HTML yang menggunakan CSS dilihat dan dipaparkan secara berbeza.

     Selepas beberapa lama, untuk memudahkan kerja pembina tapak, penyemak imbas mula "disesuaikan" dengan piawaian yang sama. Hari ini, hampir semua program yang digunakan untuk melihat halaman Internet sama-sama menghasilkan semula tapak yang menggunakan helaian gaya cascading CSS.

     Pemerhatian saya!!! Menurut pemerhatian peribadi saya, seperti versi terkini pelayar seperti Opera, Mazilla ForeFox, Maxthon, Google Chrome dan internet Explorer Halaman yang menggunakan helaian gaya berlatarkan ditunjukkan hampir sama, tetapi jika penyemak imbas tidak generasi terakhir, maka halaman laman web itu sendiri akan kelihatan berbeza. Dan agar tapak anda kelihatan sama dalam hampir semua pelayar, ada teknologi khas menetapkan helaian gaya melata.

     Jadi mari kita mula mencipta meja baru gaya dan sambungkannya ke dokumen kami.

     2. Bagaimana untuk mencipta helaian gaya css berlatarkan?

     Dalam bahagian artikel ini kami akan mencipta dan menyambung helaian gaya berlatarkan ke halaman html yang paling mudah.

     Jadi, mari kita lakukan ini:

     1. Kami mencipta folder yang akan mengandungi halaman html dan helaian gaya berlatarkan kami.
     Biarkan folder saya dipanggil "css"

     2. Kami cipta html mudah halaman (index.html). Anda boleh membaca bagaimana ini dilakukan.

     3. Sekarang mari kita buat yang mudah Dokumen Teks(sama seperti mencipta html halaman), panggil sahaja style.css.

     Akibatnya, anda harus mendapatkan ini:

     Itu sahaja, fail yang akan mengandungi gaya css sudah sedia.

     Sekarang mari kita sambungkan helaian gaya yang dicipta ke fail index.html.

     3. Bagaimana untuk menyambung css helaian gaya berlatarkan?

     Jadi, untuk menyambung helaian gaya ke halaman html, anda perlu memasukkan fail index.html dalam teg tambah tag:

     Di sini dalam atribut href="style.css" laluan ke fail dengan gaya css ditentukan. Dalam kes ini, fail css dan index.html berada dalam folder yang sama.

     Contohnya, jika fail index.html kami mempunyai kod berikut:

     Penting!!! Dengan cara ini, jangan lupa untuk menetapkan pengekodan kepada 1251 (ANSI-Cyrillic) apabila menyimpan fail index.html dalam Notepad. Kerana jika anda tidak melakukan ini dan menyimpan fail dalam pengekodan yang berbeza, penyemak imbas akan menunjukkan kepada anda "corat-coret" dan bukannya teks.

     Jika semuanya dilakukan dan disimpan dengan betul, maka dalam penyemak imbas anda akan melihat perkara berikut:

     

     Itu sahaja, fail index.html telah dibuat dan helaian gaya css juga telah disambungkan kepadanya.

     Sekarang mari kita semak cara kerja helaian gaya css.

     Jadi, mari kita mulakan dengan perkara yang paling mudah dan tetapkan tag gaya baru, menentukan latar belakang imej html halaman, warna latar belakang halaman (jika imej dilumpuhkan dalam penyemak imbas pelawat halaman), jidar atas dan bawah, fon lalai, saiz dan warnanya.

     Untuk menetapkan imej latar belakang, anda perlu menandakannya dalam folder dengan fail kami.

     Dan jika anda merancang untuk belajar cara membuat kedai dalam talian profesional menggunakan enjin Magento, maka ini adalah yang paling mudah dilakukan dengan bantuan kursus video pengarang saya.

     Untuk apa helaian gaya?

     Anda membuat halaman sebelumnya kerana halaman tersebut dibuat sebelum kemunculan helaian gaya berlatarkan atau CSS (Helaian Gaya Berlatarkan).

     Masalah utama yang dihadapi oleh pembangun laman web sebelum kemunculan CSS:

     Masalah kedudukan (letak halaman). Walaupun jadual mula digunakan untuk ini (ia pada asalnya tidak dimaksudkan untuk ini), mereka tidak menyelesaikan semua masalah. Tidak mustahil untuk melakukan perkara berikut:
     - Tidak boleh ditetapkan saiz tetap beberapa blok. Sebagai contoh, blok teks akan bergerak apabila ia melimpah (walaupun ia berada dalam jadual).
     - Anda tidak boleh menetapkan koordinat tetap untuk kedudukan blok pada halaman.
     - Anda tidak boleh meletakkan satu blok di atas yang lain. Sebagai contoh, cuba letakkan gambar di atas meja atau gambar lain.

     Masalah kedua ialah setiap kali saya perlu menetapkan saiz dan warna fon, sifat sel jadual, dll. pada halaman. Ini sangat meningkatkan saiz halaman, yang bermaksud ia dimuatkan dengan lebih perlahan. Jika anda ingin menukar warna atau saiz fon, anda perlu mengedit semua halaman.

     Masalah ketiga ialah semua penyemak imbas mempunyai tetapan individu. Sebagai contoh, penyemak imbas boleh membesarkan fon, menyebabkan keseluruhan halaman menjadi herot.

     DENGAN menggunakan CSS masalah ini dapat diselesaikan.

     Cara Menggunakan CSS

     Terdapat tiga cara untuk menggunakan helaian gaya:

     Helaian gaya dalaman(Lembaran Gaya Sebaris) - menggunakan atribut khas, ia diletakkan terus ke dalam tag HTML.
     Contoh HTML:

     Contoh CSS:

     Seperti yang anda lihat, kod Helaian Gaya Sebaris ternyata lebih daripada HTML. Oleh itu, ISS hanya boleh digunakan jika anda perlu memberikan elemen tertentu gaya peribadi anda sendiri.
     Menggunakan atribut gaya tambahan, kami boleh menentukan parameter gaya yang kami perlukan dalam mana-mana teg. Ini adalah cara paling mudah, dan ia berfungsi dalam satu teg sahaja. Tetapi bayangkan berapa banyak saiz fail akan berkembang, dan betapa menyusahkan untuk membetulkannya jika kita menentukan gaya untuk setiap teg.

     Helaian gaya global(Helaian Gaya Global) - tentukan gaya elemen di seluruh dokumen.
     Tag digunakan untuk ini. Di dalam teg bekas ini, kami bebas menentukan sebarang bilangan peraturan CSS, yang terdiri daripada pemilih (nama teg HTML yang peraturan itu akan digunakan) dan takrifnya (secara langsung satu set pemformat), disertakan dalam kurungan kerinting . Sintaks untuk contoh di atas ialah:

     ... ...

     Cara memautkan CSS dan HTML ini dipanggil benam. Adalah disyorkan untuk menggunakannya dalam kes di mana anda memutuskan untuk menetapkan set peraturan pemformatan tertentu untuk hanya satu halaman tapak dan mengikut rancangan anda, semua halaman lain sepatutnya kelihatan berbeza.

     Menetapkan gaya kepada beberapa halaman tapak secara serentak

     Selain menyebaris dan membenam, pengimportan dan pemautan helaian gaya digunakan untuk memautkan CSS dan HTML. Ini, sudah tentu, adalah cara terbaik untuk memberikan rupa dan rasa yang konsisten kepada berbilang (atau semua) halaman pada tapak yang sama. Dalam kes ini, keseluruhan helaian gaya disimpan dalam satu fail (sambungan fail mestilah standard - .css).

     Berikut ialah contoh kandungan fail sedemikian (contohnya, my.css):

     Badan ( font-family: "Times New Roman", serif; font-size: 12pt; color: darkgreen; ) h1 (fon-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight : bold; ) h2 ( font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italik; )

     Sila ambil perhatian: tag tiada helaian gaya digunakan di dalam fail - sambungan .css dengan jelas menunjukkan kepada penyemak imbas bahawa fail itu ialah helaian gaya. Satu fail sedemikian boleh dipautkan ke beberapa halaman sekaligus (atau diimport ke beberapa halaman sekaligus). Dalam fail html untuk memaut anda perlu menulis di mana-mana sahaja antara tag Dan baris berikut:

     ... ...

     Baris ini menunjukkan bahawa fail yang dipautkan ialah helaian gaya (rel="stylesheet"), format fail ini ialah .css (type="text/css") dan ia terletak dalam direktori yang sama dengan fail html, atau mempunyai URL yang berbeza (href="my.css"). Jelas sekali, kami boleh menulis baris ini dalam mana-mana (atau semua) fail html kami. Oleh itu, reka bentuk gaya tunggal akan ditetapkan untuk beberapa halaman sekaligus.

     Sila ambil perhatian bahawa gaya sebaris (gaya yang ditentukan untuk elemen halaman individu menggunakan atribut gaya) dan gaya terbenam (gaya yang dinyatakan dalam<голове>halaman dalam teg bekas ...

     Selain alamat helaian gaya yang diimport, anda boleh menulis dalam teg bekas ... ...

     Soal wartawan

     Jawapan orang yang ditemu bual

     ...
     
     

     Dalam contoh di atas, soalan wartawan akan dipaparkan dalam fon Arial kelabu, tebal, condong, 10 mata, inden 15 piksel dari tepi kiri halaman. Jawapan akan dipaparkan dalam fon Times New Roman hitam 12 mata. Adalah penting untuk tidak lupa untuk menetapkan parameter kelas kepada pelbagai kelas perenggan secara langsung dalam kod html. Anda boleh membuat sebarang bilangan kelas untuk sebarang elemen halaman.

     pemilih ID

     Mari kita ambil satu lagi kes. Katakan anda ingin mencipta beberapa elemen unik pada halaman yang anda merancang untuk mengakses pada masa hadapan daripada program JavaScript. Mungkin elemen ini akan diulang pada halaman lain dan anda ingin memberi mereka rupa yang konsisten menggunakan CSS. Untuk kes ini, helaian gaya berlatarkan mempunyai keupayaan untuk menetapkan pengecam (id) kepada elemen unik. Penggunaan pengecam yang paling biasa adalah untuk elemen bentuk, yang dalam spesifikasi HTML 4.0 mempunyai sokongan penuh atau terhad CSS (bergantung pada elemen). Berikut ialah contoh memberikan peraturan ID dan CSS kepada elemen tersebut:

     ... ... ...

     Teks yang dimasukkan ke dalam medan ini akan muncul dalam warna hijau:

     Teks yang dimasukkan ke dalam medan ini akan muncul dalam warna merah:

     ...
     
     

     Begitu juga, pengecam unik boleh diberikan kepada sebarang bilangan elemen halaman. Ini boleh berguna untuk mengakses elemen daripada program JavaScript dan menukar gaya paparannya sebagai tindak balas kepada input pengguna, membolehkan anda mencipta pelbagai kesan dinamik.

     Pemilih konteks

     Katakan kami mencipta helaian gaya mengikut mana semua tajuk peringkat pertama pada halaman dipaparkan dalam warna merah pada latar belakang kelabu, semua perenggan dipaparkan dalam warna hijau pada latar belakang kuning dan semua yang diserlahkan menggunakan teg 1 perkataan dalam perenggan - dalam warna hitam pada latar belakang perak. Kod helaian gaya, seperti yang anda mungkin telah meneka, kelihatan seperti ini:

     H1 ( warna: merah; warna latar belakang: kelabu; ) p ( warna: hijau; warna latar belakang: kuning; ) em ( warna: hitam; warna latar belakang: perak; )

     Katakan kita juga ingin menyerlahkan beberapa perkataan dalam tajuk menggunakan tag yang sama , tetapi kami tidak berpuas hati dengan kemunculan teks hitam pada latar belakang perak dalam pengepala. Kami ingin menyerlahkan perkataan dalam tajuk dalam burgundy pada latar belakang kelabu. Terdapat pemilih konteks untuk ini. Entri peraturan yang akan kami tambahkan pada helaian gaya untuk ini akan kelihatan seperti ini:

     H1 em ( warna: #CC0000; warna latar belakang: kelabu; )

     Dan berikut ialah contoh kod halaman menggunakan pemilih konteks ini:

     ... ... ...

     Ini adalah tajuk tahap pertama dengan ditonjolkan dalam satu perkataan

     Dan ini adalah perenggan biasa dengan dalam perkataan yang diserlahkan

     ...
     
     

     Itu sahaja untuk hari ini. Kali seterusnya kita akan bercakap tentang peraturan untuk memformat elemen halaman blok, kedudukan elemen, dan ciri menarik dan berguna lain yang dilaksanakan menggunakan CSS.

     
     Menggunakan Lembaran Gaya pada Dokumen
     
     Membenamkan Lembaran Gaya dalam Dokumen
     Menetapkan gaya untuk serpihan dokumen yang berasingan
     Mengimport Lembaran Gaya
     
     Menentukan Berbilang Sifat Sekaligus
     Pemilih kumpulan
     Mengulas pada Lembaran Gaya
     Sifat gaya
     sifat latar belakang
     Elemen pembingkaian
     Senaraikan Hartanah
     Sifat teks
     Mengelompokkan sifat untuk menjadikannya lebih mudah untuk menentukan gaya
     Harta pusaka
     Menggunakan pemilih konteks
     Mengapa Helaian Gaya Dipanggil Lata
     
     

     Helaian gaya disediakan oleh pengesyoran W3C dan merupakan alat standard untuk memformat halaman Web, menggunakan pendekatan biasa sistem penerbitan desktop. Microsoft Internet Explorer 3.0 ialah penyemak imbas pertama yang menyokong helaian gaya. Pelayar Netscape Navigator telah menyokong helaian gaya sejak versi 4.0B2 (Beta 2), tersedia pada Februari 1997.

     Maklumat terperinci tentang cadangan W3C boleh didapati di: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . Piawaian W3C menggunakan istilah "helaian gaya berlatarkan tahap 1 (CSSI").

     Pertama, adalah perlu untuk menjelaskan apa yang dimaksudkan dengan nama "helaian gaya". Kebanyakan editor teks moden membenarkan pengguna menentukan gaya yang akan digunakan untuk memformat dokumen. Khususnya, anda boleh memilih gaya perenggan dengan satu jarak baris, dalam fon Courier dan dengan jidar kiri satu inci. Gaya pemformatan ini kemudiannya boleh digunakan pada sebarang bilangan perenggan dalam dokumen ini dan dokumen lain. Helaian gaya NT

     M L bertindak dengan cara yang sama. Di bawah ialah senarai pendek ciri utama:

     Tukar jarak antara baris, perkataan dan aksara individu.

     Menetapkan jidar kiri, kanan, atas dan bawah elemen (sebuah blok teks bekas HTML).

     Menetapkan inden unsur.

     Tukar saiz, gaya dan atribut lain fon elemen.

     Menetapkan sempadan di sekeliling elemen.

     Dayakan imej latar belakang dan warna latar belakang kepada unsur.

     Kelebihan besar helaian gaya HTML ialah keupayaan untuk memisahkan operasi pemformatan daripada kandungan dokumen. Mula-mula, tentukan penampilan teks di satu tempat atau yang lain pada halaman, dan kemudian masukkan teks itu sendiri. Jika anda kemudiannya memutuskan, sebagai contoh, untuk menukar warna fon tajuk kepada biru, anda hanya perlu menukar gaya tajuk tersebut. Tidak perlu membuat perubahan pada teks .

     Terdapat empat kaedah untuk menggunakan helaian gaya pada dokumen:

     Memaut - anda boleh memautkan dokumen HTML dengan helaian gaya yang disimpan dalam fail berasingan.

     Benamkan - anda boleh membenamkan helaian gaya ke dalam dokumen HTML menggunakan bekas
     
     

     Tag

     Seperti yang dinyatakan sebelum ini, helaian gaya disimpan dalam fail teks, mudah untuk diedit. Mereka tidak sukar untuk dibuat secara manual, tetapi ada editor khas helaian gaya, contohnya, program popular Halaman Depan Microsoft.

     Helaian gaya membolehkan anda menentukan gaya untuk satu atau lebih teg. Sebagai contoh, anda boleh membuat helaian gaya yang mentakrifkan gaya untuk teg

     ,

     ,

     DAN . Setiap definisi dipanggil peraturan (rul e). Peraturan itu mengandungi pemilih(tag HTML) diikuti dengan pengisytiharan(definisi gaya). Pemilih ialah pautan antara definisi dan teg. Di bawah ialah contoh peraturan yang menyatakan gaya untuk setiap teg tajuk

     :

     H1 (warna: biru)

     Pengisytiharan itu disertakan dengan pendakap kerinting. Setiap pengisytiharan mempunyai dua bahagian: nama harta dan nilai yang diberikan kepadanya, dipisahkan dengan titik bertindih. HTML termasuk berpuluh-puluh sifat (saiz fon, gaya fon, warna, margin-kanan, dll.), yang akan dibincangkan di bawah. Setiap harta boleh mengambil berbilang nilai, salah satunya diperuntukkan kepadanya secara lalai.

     Dalam contoh sebelumnya, hanya satu sifat warna yang ditentukan. Walau bagaimanapun, tiada apa yang menghalang anda daripada mentakrifkan keseluruhan siri sifat dalam satu teg, memisahkannya antara satu sama lain dengan koma bertitik:

     HI (warna: biru; saiz fon: 12pt; baris teks: tengah)

     Dalam contoh ini, penonton akan memaparkan setiap tajuk peringkat pertama dalam fon biru 12 mata dan menjajarkannya ke tengah tetingkap. Semua sifat lain akan menggunakan nilai lalainya (contohnya, sifat gaya fon akan ditetapkan kepada normal).

     Jika anda perlu menentukan gaya yang sama untuk beberapa teg, anda boleh menyenaraikannya dalam senarai berasingan:

     P (saiz fon: 12pt)
     UL (saiz fon: 12pt)
     LI (saiz fon: 12pt)

     HTML membolehkan anda melakukan perkara yang sama dalam bentuk yang lebih padat - dalam satu baris:

     P, UL, LI (saiz fon: 12pt)

     Koma ialah elemen yang diperlukan di sini. Jika ia ditinggalkan, makna peraturan berubah (lihat bahagian " " kemudian dalam bab ini).

     Apabila lembaran gaya anda menjadi lebih kompleks, anda mungkin perlu memasukkan lebih banyak maklumat tentang tujuan peraturan. Komen muncul di antara aksara /* dan */ dan diabaikan oleh penyemak imbas, contohnya:

     BADAN (margin-kiri: lin) /* Inden 1 inci */
     H1 (margin-kiri: -lin) /* Shift kiri 1 inci */
     H2 (margin-kiri: -lin) /* Shift ke kiri 1 inci */

     HTML membolehkan anda mentakrifkan pelbagai sifat lembaran gaya. Nama harta terdiri daripada satu, atau lebih kerap dua atau tiga perkataan, dipisahkan oleh tanda sempang. Dalam nama kompleks, perkataan pertama biasanya mewakili kategori dan juga merupakan singkatan untuk nama harta (lihat bahagian " ").

     Jadual menyediakan gambaran keseluruhan sifat helaian gaya HTML. Lajur Kategori menunjukkan sama ada harta boleh dikumpulkan dengan sifat lain. Lajur ketiga memberikan maklumat tentang sama ada harta itu diwarisi atau tidak oleh teg bawahan (untuk pewarisan harta, lihat bahagian " ").

     		Warisan
     		Helaian gaya HTML membolehkan anda menghiasi latar belakang elemen halaman dengan warna atau imej. Perlu diingatkan bahawa selepas ini kita akan bercakap tentang menggunakan sifat bukan untuk keseluruhan halaman, tetapi untuk elemen individu. Contohnya, jika anda menentukan latar belakang untuk teg , maka hanya tag yang akan mempunyai latar belakang ini keseluruhan halaman: U L (imej latar belakang: URL(http://www.myserver.com/images/watermark.gif)) Pengesyoran W3C menyediakan keupayaan untuk menentukan sempadan, jidar dan ruang putih untuk elemen halaman. Anda boleh, sebagai contoh, melampirkan tajuk dalam bingkai atau menukar margin dalam teg perenggan<Р>untuk mengatur inden untuk semua perenggan teks. Untuk tujuan ini, anda boleh menggunakan kumpulan sifat berikut: sempadan - digunakan untuk menentukan sempadan yang terletak di sebelah kiri, kanan, atas dan bawah sesuatu elemen. Anda boleh menetapkan lebar, warna dan gaya bingkai. margin - digunakan untuk menentukan margin yang terletak di sebelah kiri, kanan, atas dan bawah sesuatu elemen. Anda juga boleh menetapkan lebar margin. padding - digunakan untuk menunjukkan ruang kosong antara bingkai dan kandungan elemen. Sifat ini digunakan untuk menentukan cara senarai dipaparkan. Dengan bantuan mereka, anda boleh menukar kedudukan penanda (sifat kedudukan gaya senarai), gaya atau imej penanda (jenis gaya senarai dan sifat imej gaya senarai). Sifat senarai diwarisi, iaitu jika harta itu ditakrifkan dalam teg , ia akan sah untuk semua teg bekas UL. Sifat memberi anda kawalan sepenuhnya ke atas cara penonton memaparkan teks. Dengan bantuan mereka, anda boleh mengawal warna, saiz, fon, jarak baris, dll. Semua sifat teks akan diterangkan secara terperinci di bawah. Banyak sifat yang diterangkan di atas boleh dikumpulkan antara satu sama lain. Jadi, bukannya peraturan H1 (berat fon: tebal; gaya fon: biasa; saiz fon: 12pt; keluarga fon: serif) Anda boleh menulis rumusan yang lebih ringkas: H1 (font: bold normal 12pt serif) Helaian gaya HTML membenarkan pengumpulan harta sempadan, latar belakang, fon, senarai, jidar dan padding. Mari kita pertimbangkan setiap kumpulan secara berasingan. kumpulan harta sempadan Anda boleh mengumpulkan sifat sempadan dalam lima cara berbeza. Anda boleh menentukan sifat untuk bahagian bingkai individu menggunakan b susunan-atas, sempadan-kanan, sempadan-bawah DAN sempadan-kiri, atau tentukan keseluruhan bingkai sekali gus menggunakan jidar. Dengan setiap sifat ini anda boleh menentukan lebar, gaya dan warna jidar, sebagai contoh: b susunan atas: hitam bertitik nipis Kumpulan sifat latar belakang Dalam kumpulan sifat latar belakang anda boleh menentukan nilai untuk warna, imej, ulangan, lampiran dan kedudukan, sebagai contoh: latar belakang: URL putih(http://www.myserver.com/image/bg.gif) repeat-x tetap atas kiri kumpulan harta fon Kumpulan fon boleh diberi berat, gaya, saiz dan nilai keluarga, contohnya: fon: tebal biasa 12pt kali, serif senaraikan kumpulan harta Sifat dikumpulkan menggunakan sifat gaya senarai. Adalah mungkin untuk menentukan imej untuk penanda, jenis dan kedudukan penanda, sebagai contoh: gaya senarai: URL segi empat sama(http://www.myserver.com/images/marker.gif) di dalam kumpulan harta margin Kumpulan jidar boleh digunakan untuk menentukan lebar bagi setiap jidar atas, kanan, bawah dan kiri, sebagai contoh: margin: .5in 1in .5in 1in Jika hanya satu nilai ditentukan, penonton akan menjadikan medan lain sama lebarnya. Jika anda tidak menentukan satu atau dua nilai, medan dengan nilai yang tidak ditentukan akan sama lebarnya dengan medan bertentangan. Sebagai contoh, jika anda meninggalkan nilai terakhir(kiri), lebar jidar kiri akan sama dengan lebar jidar kanan, iaitu 1 inci. Kumpulan harta padding Dalam Kumpulan padding anda boleh menentukan nilai untuk atas, kanan, bawah dan kiri, sebagai contoh: padding: .25in .25in .25in .25in Jika hanya satu nilai ditentukan, penonton akan memberikan nilai yang sama kepada nilai yang hilang. Jika anda tidak menentukan satu atau dua nilai, ruang kosong dengan nilai yang tidak ditentukan akan sama lebarnya dengan nilai yang bertentangan. Contohnya, jika anda meninggalkan nilai terakhir (kiri), ruang antara bahagian kiri bingkai dan kandungan elemen akan sama dengan ruang di sebelah kanan. Dalam HTML, teg bawahan mewarisi beberapa sifat teg induknya. Contohnya, semua teg bekas (< P >Dan ) akan mempunyai beberapa sifat teg . Teg yang sama mewarisi sifat teg . Pertimbangkan kod berikut: Hello. Ini adalah perenggan teks. Ini ditekankan Helaian gaya dokumen ini menetapkan warna dalam teg < P > biru, bagaimanapun, adalah warna untuk tag tidak ditakrifkan secara eksplisit (lalai ialah hitam). Tiada apa yang perlu dibimbangkan di sini kerana teg ini berada dalam bekas induk Dan dengan itu mewarisi warna biru. Kadangkala menjadi perlu untuk menentukan dua (atau lebih) gaya untuk satu teg. Sebagai contoh, anda mungkin perlu menentukan dua gaya untuk teg : satu untuk kes apabila ia adalah bawahan kepada tag , dan yang kedua apabila ia berada di bawah teg . Ini boleh dilakukan menggunakan pemilih konteks. Pemilih konteks menentukan jujukan teg yang tepat untuk gaya tertentu akan digunakan. Dalam erti kata lain, anda boleh menentukan bahawa beberapa gaya harus digunakan, sebagai contoh, dalam teg hanya jika tag ini ialah tag bawahan : OL LI (jenis gaya senarai: perpuluhan) Untuk tag yang sama anda boleh menentukan gaya lain, sah hanya jika ia disubordinat kepada teg : UL LI (jenis gaya senarai: segi empat sama) Perlu diingatkan bahawa senarai pemilih tidak dipisahkan dengan koma. Jika tidak, semua teg dalam senarai akan diberikan gaya yang sama. Garis panduan W3C memanggil helaian gaya "helaian gaya berlatarkan" " kerana untuk susun atur halaman Web anda tidak boleh menggunakan satu, tetapi beberapa jadual sekaligus. Dalam kes ini, penonton sendiri menentukan urutan penggunaan jadual dan menyelesaikan konflik antara mereka menggunakan prinsip berlatarkan. Sebagai contoh, helaian gaya untuk halaman boleh ditakrifkan bukan sahaja oleh pengarangnya, tetapi juga oleh pembaca, dan kemudian peraturan melata menentukan helaian gaya yang akan berkuat kuasa. Bagaimanakah ia berfungsi? Penyemak imbas memberikan faktor pemberat kepada setiap peraturan. Apabila mentafsir setiap teg, atur cara meneliti semua peraturan teg ini dan menyusunnya mengikut nilai pekali pemberat. Peraturan yang paling "berat" menang. Garis panduan umum berikut wujud untuk menyelesaikan konflik antara helaian gaya: Keutamaan jenis helaian gaya dalam dokumen (menurun): tetapan gaya semasa (sebaris), benam, memaut. Anda juga boleh menukar berat peraturan menggunakan kata kunci penting. Dalam contoh berikut, nilai sifat merah ialah kol Nilai atau dan sans-serif bagi sifat fon-family ditandakan dengan perkataan fungsi ini, dan oleh itu penonton tidak seharusnya mengatasinya. Walau bagaimanapun, jika dua peraturan sedemikian bercanggah, konflik itu diselesaikan mengikut prinsip yang dinyatakan di atas. H1 (warna: merah! berat fon penting: keluarga font tebal: sans-serif ! penting) Kelas ialah takrifan beberapa gaya satu elemen, setiap satunya boleh digunakan di tempat yang betul pada halaman. Sebagai contoh, anda boleh menentukan tiga variasi gaya tajuk H1. Mentakrifkan variasi adalah serupa dengan menentukan gaya, hanya nama kelas arbitrari ditambahkan pada nama teg, dipisahkan oleh titik: H1 biru (warna: biru) H1 .merah (warna: merah) H1 .hitam (warna: hitam) Sekarang, masukkan teg dalam dokumen , anda boleh menentukan gaya tertentu di dalamnya menggunakan atribut CLASS: Tajuk Merah