Rujukan Pantas CSS2_CSS/HTML-tutorial css-php.cn

Sejak W3C (The World Wide Web Consortium) merumuskan versi 4.0 kod HTML bernama Cougar, kesan dinamik yang wujud dalam halaman Web telah diiktiraf secara rasmi buat kali pertama W3C telah membahagikan pelaksanaan hiperteks dinamik (Dynamic HTML) kepada tiga bahagian: skrip, penyemak imbas yang menyokong kesan dinamik dan CSS. Anda mungkin sering menggunakan dua yang pertama, tetapi anda mungkin tidak tahu apa itu CSS Jika anda mempunyai pengalaman dalam membuat halaman web, anda mungkin pernah mendengar tentang helaian gaya atau helaian gaya Jika anda tidak pernah mendengarnya, tidak mengapa . Jika anda ingin mencipta halaman Web dengan lebih banyak ciri baharu, artikel ini juga sesuai untuk anda.
1. Apakah itu CSS?
CSS ialah singkatan dari Cascading Style Sheet Sesetengah buku menterjemahkannya sebagai "Cascading Style Sheet" atau "Cascading Style Sheet" (selepas ini dirujuk sebagai "Style Sheet" pada tahun 1997, W3C mengumumkan standard HTML4 pada masa yang sama masa. CSS1, standard pertama untuk helaian gaya. Lembaran gaya adalah inovasi utama dalam sintaks HTML sebelumnya (versi HTML sebelum 3.2 Dalam versi HTML sebelumnya, pelbagai fungsi telah dilaksanakan melalui elemen penanda, yang juga menyebabkan pelbagai pengeluar penyemak imbas menyeragamkan kandungan baharu dengan sengaja hanya disokong oleh syarikat anda sendiri. Pelbagai teg boleh disarangkan antara satu sama lain untuk mencapai kesan yang berbeza Contohnya, jika anda ingin menukar sebahagian daripada teks menjadi merah dalam perenggan, ia sepatutnya seperti ini dalam HTML3.2: <.>

Teks merah dipaparkan di sini

Dalam helaian gaya, beberapa teg (seperti teg "font" dalam contoh di atas) diatributkan menggunakan helaian gaya, contoh di atas boleh diubah Cheng:

Teks merah ditunjukkan di sini

Adakah ini semua fungsi lembaran gaya? Jauh sekali! Seperti yang dinyatakan sebelum ini, helaian gaya adalah sebahagian daripada DHTML Kepentingan sebenar mewujudkan helaian gaya adalah untuk benar-benar memperkenalkan objek ke dalam HTML, supaya program skrip (seperti javascript dan VBScript) boleh digunakan untuk memanggil atribut objek dan menukar atribut objek untuk mencapai. tujuan dinamik. Ini tidak mungkin dalam HTML sebelumnya Jika anda telah menggunakan alat pengaturcaraan berorientasikan objek seperti VB, anda akan dengan cepat mengetahui betapa mudahnya menggunakan helaian gaya untuk membuat DHTML. Satu lagi sumbangan helaian gaya adalah untuk memudahkan pelbagai teg yang menyusahkan dalam HTML, menjadikan atribut setiap teg lebih umum dan serba boleh memanjangkan fungsi teg asal dan boleh mencapai lebih banyak kesan Ia malah melangkaui fungsi paparan Web halaman itu sendiri, dan memanjangkan gaya kepada pelbagai media, menunjukkan daya tarikan yang tidak dapat dinafikan.
Sejak versi CSS1, versi CSS2 telah dikeluarkan pada Mei 1998, dan helaian gaya telah diperkaya. Kedua-dua Internet Explorer 4 dan Netscape Navigator 4 mengiklankan sokongan untuk helaian gaya, tetapi dari semua aspek, IE4 lebih berkesan daripada NE4 Ini disebabkan oleh perbezaan dalam model dokumen JavaScript (DOM) IE4 dan NE4 perbezaan antara kedua-duanya adalah Model tidak begitu berbeza, tetapi pada dasarnya ia agak berbeza Model IE4 boleh dengan lebih mudah memperkenalkan kesan dinamik ke dalam halaman Web Walaupun model IE4 pada masa ini hanya disokong oleh Microsoft sendiri, ia telah ditulis dengan jelas ke dalam DHTML W3C's style sheet NE4 tidak boleh memanggil sifat objek melalui skrip secara terang-terangan, helaian gayanya hanyalah formaliti. (Netscape telah membangunkan helaian gaya yang dipanggil J SSS, yang menggunakan javascript untuk mentakrifkan gaya, tetapi ia tidak dikenali oleh W3C.)
2. Ketahui lebih lanjut tentang helaian gaya
Lata dalam Helaian Gaya Lata ialah "Lata" bermakna terdapat berbilang helaian gaya dalam dokumen Web yang sama ini mempunyai keutamaan yang berbeza berdasarkan lokasinya. Lebih tinggi keutamaan, lebih banyak helaian gaya akan digunakan untuk paparan. Daripada perspektif bentuk sisipan helaian gaya, ia boleh dibahagikan kepada tiga jenis:
Helaian gaya sebaris: Ia memudahkan teg HTML sedia ada dan menambah gaya istimewa pada maklumat yang dikawal oleh teg, seperti contoh sebentar tadi.
Helaian gaya terbenam: Seperti JavaScript, ia boleh dibenamkan dalam pengepala fail HTML (antara teg dan

) dan dimuatkan menggunakan bekas , contohnya: "" , Ini akan digunakan pada semua teg

pada halaman.
Helaian gaya luaran ialah fail helaian gaya yang disimpan secara luaran Fail luaran mempunyai sambungan .CSS, seperti "".
Anda boleh menggunakan tiga kaedah di atas seperti yang diperlukan semasa aplikasi, tetapi dalam amalan, helaian gaya sebaris dan helaian gaya terbenam digunakan lebih kerap.
3. Ciri tatabahasa helaian gaya
Helaian gaya mempunyai kaedah penulisan tersendiri jika anda menguasai ciri tatabahasanya dan memahami pelbagai atributnya, anda akan mendapati bahawa menggunakan helaian gaya dalam halaman Web akan menjadi sangat santai. Sebagai contoh, terdapat dokumen HTML yang paling mudah:

Teks pergi ke sini…

us Gaya boleh ditentukan menggunakan helaian gaya terbenam.

Gunakan
Kelas dan
IDPaparkan kandungan.

Di mana.someclass mewakili kelas dan #someID mewakili ID. Kelas dan ID juga boleh digunakan dengan teg elemen, contohnya:
p.bigFont {...}
bermakna helaian gaya mesti dilaksanakan dalam teg P (
) kelas bigFont. Perkara yang sama berlaku Sesuai untuk ID.
Untuk memudahkan teg yang mengisytiharkan atribut berulang tertentu, anda boleh menggunakan "," untuk memisahkan pemilih yang berbeza, menunjukkan bahawa mereka semua mewakili atribut yang sama, seperti:

H1,H2 {color:red}

Div, p.mytext {……} Kadangkala kami juga ingin dapat menjadikan helaian gaya berkesan dalam julat tertentu: p em {color:red} Teg elemen dipisahkan oleh ruang, menunjukkan dalam dan dan antara ditunjukkan dalam warna merah. Selain itu, anda juga boleh menggunakan "~" untuk menunjukkan bahawa satu pemilih diikuti oleh pemilih lain, dan ia dikelilingi oleh "/" pada kedua-dua belah:
/ Selector1 ~ Selector2/ {...}
menunjukkan bahawa jika Selector2 mengikuti Selector1 maka gunakan helaian gaya ini.
2. Unit nilai atribut
Dalam helaian gaya, unit atribut kebanyakannya adalah unit panjang, termasuk px (piksel), pt (paun), em (satu unit dalam penetapan taip, 1em=12pt) , mm (milimeter), cm (sentimeter), pc (1pc=12pt), dalam (inci), unit ini boleh dinyatakan dengan integer (seperti px) atau nombor nyata (seperti em), dan nilai logaritma dalam elemen Terdapat juga hubungan warisan seperti:
badan {font-size:12pt;
text-indent:3em; -atribut inden H1 dalam paparan bukan 36pt tetapi 45pt.
Unit sesetengah atribut malah boleh menjadi nilai negatif, seperti margin, yang boleh mencapai beberapa kesan khas, seperti pertindihan antara elemen.
Terdapat juga unit lain seperti sudut, yang unitnya ialah deg (darjah), grad (gradien) dan rad (radian); unit frekuensi, Hz dan kHz, semuanya sangat kita kenali.
3. Komen dan ruang
Helaian gaya juga mempunyai pernyataan ulasan: anda boleh menggunakan "/*...*/" sebagai teg ulasan Terdapat penganalisis untuk helaian gaya dalam penyemak imbas, yang bertanggungjawab untuk menganalisis helaian gaya Semak bahawa penganalisis akan mengabaikan kandungan antara tag ulasan. Ruang adalah sah dalam helaian gaya Jika terdapat lebih daripada satu ruang antara aksara, ruang yang selebihnya akan dikekalkan terutamanya apabila mengisytiharkan fon tertentu, ruang tidak boleh ditinggalkan.
 Perkara yang perlu diberi perhatian
Pertama sekali, helaian gaya adalah sensitif huruf besar-besaran, jadi perhatikan ejaan kedua, untuk sifat dan kaedah yang tidak diisytiharkan dalam CSS2, penghurai helaian gaya akan mengabaikan kewujudannya, seperti :
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
Di mana “&” adalah helaian gaya Keseluruhan baris kedua dilangkau oleh penghurai untuk label yang tidak wujud di dalamnya. Varian fon dalam baris ketiga bukan atribut undang-undang dan juga dilangkau ("warna:biru" adalah sah).
Setelah memahami peraturan di atas, anda sudah biasa dengan helaian gaya Di bawah saya akan memperkenalkan pelbagai atribut dan nilai atribut helaian gaya secara terperinci.

Rujukan Pantas CSS2 2
Kata kunci: Lain-lain
4 Sifat CSS:
1 Jenis Media (Media)
Salah satu ciri terpenting helaian gaya ialah ia boleh Berfungsi pada pelbagai media, seperti halaman, skrin, pensintesis elektronik dan banyak lagi. Sifat tertentu hanya boleh berfungsi pada media tertentu Contohnya, sifat "saiz fon" hanya sah pada jenis media boleh tatal (skrin).
Mengisytiharkan atribut media boleh diperkenalkan menggunakan @import atau @media:
@import url(loudvoice.css) ucapan
@cetakan media {
/* helaian gaya untuk cetakan pergi ke sini */
}
Anda juga boleh memperkenalkan media dalam teg dokumen:

Seperti yang anda lihat, perbezaan antara @import dan @media ialah yang pertama memperkenalkan helaian gaya luaran untuk jenis media , dan yang kedua Secara langsung memperkenalkan sifat media. Kaedah menggunakan @import ialah menambah alamat URL fail helaian gaya pada @import dan kemudian menambah jenis media Berbilang media boleh berkongsi helaian gaya dan jenis media dipisahkan oleh pemisah ",". @ penggunaan media adalah untuk mendahulukan jenis media, dan peraturan lain pada dasarnya adalah sama dengan peraturan yang ditetapkan. Pelbagai jenis media disenaraikan di bawah:
SKRIN: merujuk kepada skrin komputer. CETAKAN: Merujuk kepada media legap yang digunakan untuk pencetak.
PROJEKSI: merujuk kepada projek yang digunakan untuk paparan.
BRAILLE: Sistem Braille, merujuk kepada bahan bercetak dengan kesan sentuhan.
AURAL: merujuk kepada pensintesis elektronik pertuturan.
TV: merujuk kepada media jenis televisyen.
PEGANG GANGGANG: Merujuk kepada peranti paparan pegang tangan (skrin kecil, monokrom)
SEMUA: Sesuai untuk semua media.
2. Atribut Model BOX (Model BOX)
Apakah itu BOX? CSS memanggil bahagian yang bermula dengan
...
dalam HTML sebagai BOX (bekas mempunyai tiga jenis atribut: padding, margin dan border.
Atribut margin:
Atribut margin dibahagikan kepada lima atribut: margin-atas, margin-kanan, margin-bawah, margin-kiri dan jidar, yang masing-masing mewakili jarak antara kandungan dalam BOX dan jidar. Nilai atributnya ialah nilai berangka Unit boleh menjadi panjang, peratusan atau auto malah boleh ditetapkan kepada nilai negatif, menyebabkan paparan bertindih antara B OX dan BOX Lihat jadual di bawah untuk butiran tentang atribut margin:
Atribut nama: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Nilai atribut:
Nilai awal: 0
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: tidak
Nota peratusan: relatif kepada lebar KOTAK
Contohnya:
H1 { margin-atas: 2em }
H2 { margin-kanan: 12.3% }
Margin juga mempunyai cara cepat untuk menulisnya, iaitu Gunakan atribut margin secara langsung, contohnya:
BODY { margin: 1em 2em 3em 2em}
bersamaan dengan:
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em; atribut, dipisahkan oleh ruang (ingat bukan koma), susunannya ialah "atas, kanan, bawah "Kiri", sudah tentu boleh terdapat kurang daripada empat nilai selepas jidar, contohnya:
BODY { margin: 2em } /* Semua jidar ditetapkan kepada 2em */
BODY { margin: 1em 2em } /* Jidar atas dan bawah ialah 1em , jidar kanan dan kiri ialah 2em */
BODY { margin: 1em 2em 3em } /* Jidar atas ialah 1em, jidar kanan dan kiri ialah 2em, dan jidar bawah ialah 3em*/
Atribut padding:
Atribut padding digunakan untuk menerangkan Berapa banyak ruang yang disisipkan antara sempadan dan kandungan BOX adalah serupa dengan atribut margin Ia juga dibahagikan kepada atas, kanan, bawah, kiri dan padding pintasan Untuk butiran tentang atribut margin, lihat jadual di bawah:
Nama atribut: 'padding-top. ' , 'padding-right', 'padding-bottom', 'padding-left', 'padding'
Nilai atribut:

Nilai awal: 0 Objek yang sesuai: semua elemen
Sama ada Warisan: tidak
Peratusan Nota: Berbanding dengan lebar KOTAK
Contohnya:
BLOCKQUOTE { padding-top: 0.3em }
Atribut padding adalah serupa dengan margin dan ditinggalkan di sini.
Atribut sempadan:
Biasanya apabila kita melihat dokumen HTML dan melihat sekeping teks, kita tidak menganggapnya sebagai BOX Sebenarnya, BOX mempunyai sempadan, tetapi ia tidak dipaparkan secara normal atribut Ia digunakan untuk menerangkan sempadan BOX. Atribut sempadan dibahagikan kepada lebar sempadan, warna sempadan dan gaya sempadan, dan terdapat cawangan di bawah atribut ini.
atribut lebar sempadan:
atribut lebar sempadan terbahagi kepada: lebar sempadan atas, lebar sempadan kanan, lebar bawah sempadan, lebar kiri sempadan dan atribut lebar sempadan, sempadan- Lebar diwakili oleh panjang sebagai "nipis/sederhana/tebal" atau unit panjang Berikut ialah senarai terperinci bagi atribut lebar tertib b:
Nama atribut: 'lebar-atas sempadan', 'lebar-kanan-sempadan. ', 'border-bottom-width', 'border-left-width', 'border-width'
Nilai atribut:

Nilai awal: sederhana Objek yang sesuai: semua elemen
Sama ada hendak mewarisi : tidak
Peratusan Nota: Dilarang
lebar sempadan ialah pintasan, susunannya adalah atas, kanan, bawah, kiri dan nilai dipisahkan dengan ruang.
atribut warna sempadan:
atribut warna sempadan digunakan untuk memaparkan warna jidar KOTAK, yang dibahagikan kepada warna atas sempadan, warna sempadan kanan, warna sempadan bawah, warna sempadan kanan- atribut warna dan sempadan-warna, nilai atribut ialah warna, yang boleh dinyatakan dalam perenambelasan atau rg b(Atribut ditunjukkan di bawah:
Nama atribut: 'border-top-color', 'border-right-). color', 'border-bottom-color', 'border-left-color',
'border-color'
Nilai atribut:

Nilai awal: Nilai awal warna elemen Objek yang sesuai: Semua elemen
Sama ada untuk mewarisi: tidak
Peratusan Nota: Dilarang
warna sempadan ialah jalan pintas, tertib adalah atas, kanan, bawah, kiri dan nilai dipisahkan dengan ruang .
atribut gaya sempadan:
atribut gaya sempadan digunakan untuk menetapkan gaya sempadan objek BOX Nilai atributnya ialah kata kunci yang ditentukan oleh CSS Biasanya, anda tidak boleh melihat sempadan kerana nilai awalnya tiada.Lihat atribut di bawah:
Nama atribut: 'gaya atas sempadan', 'gaya-kanan-sempadan', 'gaya-bawah-sempadan', 'gaya-kiri-sempadan', 'gaya-sempadan'
Nilai atribut:
Nilai awal: tiada
Objek yang berkenaan: semua elemen
Sama ada untuk mewarisi: tidak
Peratusan catatan: dilarang
warna sempadan ialah pintasan, perintahnya ialah atas kanan Kiri bawah, nilai dipisahkan oleh ruang. Nama dan makna nilai atribut
adalah seperti berikut:
tiada: Tiada sempadan.
bertitik: Jidar ialah garis putus-putus.
berputus-putus: Sempadan ialah garisan panjang dan pendek.
pepejal: Sempadan ialah garisan pepejal.
berganda: Sempadan ialah garisan berkembar.
alur, rabung, sisipan dan permulaan: paparkan sempadan 3D dengan kesan berbeza (mengikut atribut warna).
atribut sempadan:
atribut sempadan ialah pintasan ke Sempadan Nilai atribut dipisahkan oleh ruang.

Anda juga boleh menggunakan sempadan-atas, sempadan-kanan, sempadan-bawah, dan sempadan-kiri masing-masing sebagai pintasan untuk atas, kanan, bawah dan kiri Susunan nilai atribut adalah sama seperti iaitu atribut sempadan. | anda boleh meletakkan elemen dengan lebih tepat. Netscape pernah mencadangkan tag Layer, yang sangat bagus untuk susun atur yang tepat, tetapi ia tidak dikenali oleh W3C W3C mencadangkan fungsi yang serupa dengan tag Layer dalam CSS.
Atribut kedudukan:
Atribut kedudukan digunakan untuk menentukan jenis kedudukan elemen Untuk butiran, lihat atribut:
Nama atribut: 'kedudukan'
Nilai atribut: mutlak | 🎜>Nilai awal: statik
Objek yang sesuai: Semua elemen
Sama ada untuk diwarisi: tidak
Peratusan kenyataan: Dilarang
Nilai atribut masing-masing mewakili:
mutlak: kedudukan mutlak pada skrin .
relatif: kedudukan relatif pada skrin.
statik: kedudukan yang wujud.
Atribut arah:
Atribut arah menentukan arah susunan BOX Untuk butiran, lihat atribut:
Nama atribut: 'arah'
Nilai atribut: ltr|rtl
Nilai awal: ltr
Objek yang Sesuai: Semua elemen
Sama ada untuk mewarisi: ya
Peratusan Nota: Dilarang
atribut terapung dan jelas:
Dalam HTML, anda boleh memilih kedudukan terapung gambar Objek BOX juga boleh memilih untuk terapung melalui lokasi CSS.改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如：




Some sample text that has no other...

相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值: ||auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：

I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.

Atribut z-index:
Membenarkan paparan elemen bertindih dalam CSS, jadi terdapat masalah susunan paparan Atribut z-index menerangkan kedudukan hadapan dan belakang elemen tersebut Jika skrin komputer dianggap sebagai satah X-Y, Kemudian paksi Z adalah berserenjang dengan skrin, dan indeks-z menggunakan integer untuk mewakili kedudukan hadapan dan belakang elemen Semakin besar nilai, ia akan dipaparkan dalam kedudukan yang agak hadapan, dan CSS bersetuju untuk menggunakan nombor negatif dalam indeks-z.
Nama atribut: 'z-index'
Nilai atribut: auto|
Nilai awal: auto
Objek yang sesuai: Elemen menggunakan atribut kedudukan
Sama ada untuk mewarisi: tidak
Catatan peratusan: Dilarang
Atribut lebar:
Menentukan atribut lebar BOX, supaya lebar KOTAK tidak bergantung pada kandungan yang terkandung di dalamnya:
Nama atribut: 'lebar'
Atribut nilai: |. Sifat lebar min dan lebar maks juga disediakan untuk menjadikan lebar KOTAK antara lebar minimum dan lebar maksimum. Nama atribut: 'min-width'
Nilai atribut:
|

Nilai awal: 0
Objek yang sesuai: semua
Sama ada untuk diwarisi: tidak
Peratusan catatan : Bergantung pada lebar elemen induk Nama atribut: 'max-width' Nilai atribut:
|

Nilai awal: 100%
Objek yang sesuai: semua
Sama ada hendak mewarisi: tidak
Peratusan Nota: Bergantung pada lebar elemen induk atribut ketinggian: KOTAK yang sama juga mempunyai atribut ketinggian untuk mengawal ketinggiannya sendiri:
Nama atribut: 'ketinggian'
Nilai atribut:
|.
|. auto
Nilai awal: auto
Objek yang sesuai: elemen blok
Sama ada untuk mewarisi: tidak
Peratusan Nota: Bergantung pada ketinggian elemen induk Sifat ketinggian min dan ketinggian maks juga disediakan dalam CSS untuk menjadikan ketinggian KOTAK antara ketinggian minimum dan ketinggian maksimum. Nama atribut: 'min-height'
Nilai atribut:
|

Nilai awal: 0
Objek yang sesuai: semua
Sama ada untuk diwarisi: tidak
Peratusan catatan : Bergantung pada ketinggian elemen induk Nama atribut: 'max-height' Nilai atribut:
|

Nilai awal: 100%
Objek yang sesuai: semua
Sama ada hendak mewarisi: tidak
Peratusan Nota: Bergantung pada ketinggian elemen induk atribut limpahan: Apabila menentukan lebar dan ketinggian elemen, jika luas elemen tidak cukup untuk memaparkan keseluruhan kandungan, limpahan akan digunakan Atribut:
Nama atribut: 'overflow'
Nilai atribut: boleh dilihat | disembunyikan |. atribut
Sama ada untuk mewarisi: tidak
Nota Peratusan: Dilarang
Maksud nilai atribut adalah seperti berikut:
kelihatan: Kembangkan kawasan untuk memaparkan semua kandungan.
tersembunyi: Sembunyikan kandungan yang berada di luar julat.
skrol: Memaparkan bar skrol di sebelah kanan elemen.
auto: Apabila kandungan melebihi kawasan elemen, bar skrol dipaparkan.
atribut klip:
CSS juga menyediakan atribut klip, yang boleh memotong kawasan elemen kepada pelbagai bentuk, tetapi pada masa ini hanya satu segi empat sama disediakan:
Nama atribut: 'klip'
Nilai atribut:
|. auto
Nilai awal: auto
Elemen yang sesuai: Atribut kedudukan elemen ditetapkan kepada mutlak
Sama ada untuk mewarisi: tidak
Nota Peratusan: Dilarang

nilai adalah tepat (kanan atas kiri bawah).
atribut ketinggian garis dan penjajaran menegak:
Atribut ketinggian garis boleh menentukan jarak baris di dalam elemen, menggunakan unit panjang atau peratusan:
Nama atribut: 'line-height'
Atribut nilai: biasa |. |. | DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
Atribut penjajaran menegak menentukan paparan elemen dalam kedudukan menegak:
Nama atribut: 'vertical-align'
Nilai atribut: subline | teks atas | | 🎜>Nilai awal: garis dasar
Objek yang sesuai: elemen sebaris
Sesuai untuk pewarisan: tidak
Peratusan Nota: Bergantung pada atribut ketinggian garis bagi elemen
Maksud nilai atribut ialah sebagai berikut:
garis dasar: Dijajarkan dengan garis dasar elemen.
tengah: Dijajarkan ke tengah elemen.
sub: Perkataan tenggelam. super: perkataan meningkat. teks-atas: Jajarkan teks di bahagian atas.
teks-bawah: Penjajaran bawah teks.
Atas: Dijajarkan dengan elemen tertinggi dalam baris ini.
Bawah: Dijajarkan dengan elemen terendah dalam baris ini.
Atribut kebolehlihatan:
Atribut ini digunakan untuk mengawal paparan atau penyembunyian elemen:
Nama atribut: 'keterlihatan'
Nilai atribut: mewarisi | boleh dilihat
Nilai awal: mewarisi
Objek yang sesuai: Semua elemen
Sama ada untuk diwarisi: Jika nilai diwarisi, atribut elemen induk diwarisi
Peratusan Nota: Dilarang
4. Warna dan Latar Belakang (Warna dan Latar Belakang) atribut:
Diperkenalkan di sini Mengenai cara menetapkan warna latar depan, warna latar belakang dan gambar dalam CSS.
atribut warna:
atribut warna digunakan untuk menetapkan warna latar depan elemen:
Nama atribut: 'warna'
Nilai atribut:

Nilai awal: berdasarkan pengguna nilai awal Ditakrifkan
Objek yang sesuai: Semua elemen
Sama ada untuk mewarisi: ya
Peratusan Nota: Dilarang
Nilai atribut warna boleh menjadi nilai heksadesimal, fungsi rgb() atau nama warna diiktiraf oleh CSS. Contohnya:
EM { warna: merah }
EM { warna: rgb(255,0,0)}
Atribut latar belakang:
Atribut warna latar belakang digunakan untuk menetapkan warna latar belakang nilai awal ialah Lutsinar: Nama atribut: 'warna latar belakang'
Nilai atribut:
| lutsinar
Nilai awal: lutsinar
Objek yang sesuai: semua elemen
Sama ada untuk diwarisi: tidak
Nota Peratusan: Dilarang
Atribut imej latar belakang digunakan untuk menetapkan imej latar belakang:
Nama atribut: 'imej latar belakang'
Nilai atribut:
| : tiada
Objek yang sesuai: Semua elemen Diwarisi atau tidak: tiada
Peratusan kenyataan: Dilarang
Ul itu boleh menjadi alamat mutlak atau alamat relatif, contohnya:
BODY { latar belakang- imej: url( marble.gif) }
P { background-image: none }
Dua atribut di atas juga boleh dicapai menggunakan atribut HTML biasa Atribut berikut ialah sambungan CSS kepada HTML asal.
Atribut pengulangan latar belakang digunakan untuk menerangkan susunan imej latar belakang yang berulang:
Nama atribut: 'background-repeat' Nilai atribut: repeat-y | 🎜> Nilai awal: ulang
Objek yang sesuai: semua elemen
Sama ada untuk diwarisi: tidak
Peratusan kenyataan: dilarang
Maksud nilai atribut ialah:
ulang: dua di sepanjang paksi X dan paksi Y Arah mengulangi imej.
ulang-x: Ulangi imej sepanjang arah paksi-X.
ulang-y: Ulang imej sepanjang arah paksi-Y.
tiada: Tiada imej pendua.
Contohnya:
BODY {
latar belakang: url merah(pendant.gif);
background-repeat:
}
/* bermaksud mengulang imej sepanjang Y axis" pendant.gif", dan selebihnya menggunakan merah sebagai warna latar belakang*/
Atribut lampiran latar belakang menunjukkan cara imej latar belakang dipaparkan apabila keseluruhan dokumen ditatal. Ia mempunyai dua nilai atribut: tetap dan tatal Tetap adalah bersamaan dengan kesan tera air dalam IE4, yang bermaksud bahawa apabila menyeret dokumen, latar belakangnya agak statik, manakala tatal menatal dengan dokumen. Atribut
background-position digunakan untuk menentukan kedudukan di mana imej latar belakang dipaparkan:
Nama atribut: 'background-position'
Nilai atribut: [ | 2} |. [atas |. bawah] |. [kiri |.] |. : rujuk saiz elemen itu sendiri Maksud nilai atribut ialah:
"kiri atas" dan "kiri atas" bermaksud "0% 0%".
"atas", "atas tengah" dan "tengah atas" bermaksud "50% 0%".
"kanan atas" dan "kanan atas" kedua-duanya bermaksud "100% 0%".
"kiri", "kiri tengah" dan "tengah kiri" bermaksud "0% 50%".
"pusat" dan "pusat pusat" bermaksud "50% 50%".
"kanan", "tengah kanan" dan "kanan tengah" semuanya bermaksud "100% 50%".
"kiri bawah" dan "kiri bawah" bermaksud "0% 100%".
"bawah", "bawah tengah" dan "tengah bawah" semuanya bermaksud "50% 100%"
"bawah kanan" dan "kanan bawah" bermaksud "100% 100%".
Contohnya:
BODY { latar belakang: url(banner.jpeg) kanan atas } /* 100% 0% */
BODY { latar belakang: url(banner.jpeg) atas tengah } /* 50% 0 % */
BADAN { latar belakang: url(banner.jpeg) tengah } /* 50% 50% */
BODY { latar belakang: url(banner.jpeg) bawah } /* 50% 100% */
Atribut latar belakang ialah pintasan ke atribut latar belakang di atas Atribut dan susunan adalah seperti berikut:
Nama atribut: 'latar belakang'
Nilai atribut: | > |. |. |. Objek yang sesuai: semua elemen Diwarisi atau tidak: tidak
Peratusan Nota: Hanya dibenarkan dalam kedudukan latar belakang
No. Rujukan Pantas CSS2
Kata kunci: Lain-lain
5 Atribut Fon (Fon):
Pelbagai atribut tentang fon ditakrifkan di sini.
Atribut fon-family mentakrifkan nama fon, yang boleh menjadi nama fon atau nama jenis fon Nama fon mestilah betul-betul sama seperti dalam sistem komputer:
Nama atribut: 'font- family'
Nilai atribut: [[
|
],]* [ | ] Nilai awal: Bergantung pada definisi pengguna Objek yang sesuai: semua elemen Sama ada untuk mewarisi: ya
Nota Peratusan: Dilarang
Jika tiada fon diperlukan oleh helaian gaya dalam sesetengah sistem komputer, anda boleh menetapkan fon kedua untuk berjaga-jaga. Contohnya:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name merujuk kepada fon tertentu, seperti Heisi Mincho W3, generic-family merujuk kepada jenis tertentu fon, Seperti serif.
Atribut gaya fon menerangkan tahap kecondongan fon:
Nama atribut: 'gaya fon'
Nilai atribut: biasa | condong
Nilai awal: biasa
Sesuai objek: semua elemen
Sama ada untuk mewarisi: ya
Peratusan catatan: dilarang
atribut varian fon:
Nama atribut: 'varian fon'
Nilai atribut: biasa | 🎜>Nilai awal : normal
Sesuai untuk: Semua elemen
Sama ada untuk mewarisi: ya
Nota Peratusan: Dilarang
Huruf kecil dalam elemen menggunakan atribut huruf kecil akan kelihatan lebih kecil daripada huruf besar biasa Beberapa.
Atribut berat fon digunakan untuk menerangkan berat fon.
Nama atribut: 'font-berat'
Nilai atribut: lebih ringan |. 200 | 🎜>Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: ya
Peratusan ucapan: dilarang
100 hingga 900 mewakili 9 berat fon berbeza, 400 mewakili normal, 700 mewakili tebal dan 900 adalah huruf paling berat atau lebih ringan menunjukkan bahawa berat fon adalah satu tahap lebih tinggi atau lebih rendah daripada elemen induk Contohnya, jika elemen induk mempunyai berat fon 400, maka lebih tebal mewakili berat fon 500. Jika elemen induk itu sendiri mempunyai berat fon. daripada 9 00, kemudian selepas lebih tebal, berat fon akan tetap 900, sama untuk yang lebih ringan. Sesetengah fon tidak mempunyai julat penuh berat dari 100 hingga 900, mungkin dari 300 hingga 700, jadi berat minimum dan maksimum juga 300 hingga 700. Contohnya:
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Atribut saiz fon menerangkan saiz fon:
Nama atribut: 'saiz fon'
Nilai atribut:
|
|. atau saiz relatif boleh digunakan, seperti yang ditunjukkan oleh kata kunci berikut:
x-kecil |
Saiz relatif boleh diterangkan menggunakan: lebih besar atau lebih kecil.
Contohnya:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: greater }
EM { font-size: 150% }
EM { font-size: 1.5 em }
Atribut fon ialah pintasan kepada atribut di atas:
Nama atribut: 'font'
Nilai atribut: [ [ | ]? [/ fon: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "buku sekolah abad baru", serif } P { fon: huruf tebal italik besar Palatino, serif } P { fon: huruf kecil biasa 120%/120% fantasi }
6 Atribut Teks (Teks):
Atribut di sini akan menjejaskan paparan teks dalam dokumen WEB.
Atribut text-indent menerangkan tahap lekukan teks:
Nama atribut: 'text-indent'
Nilai atribut:
|

Nilai awal: 0
Sesuai untuk objek : Unsur bekas
Sama ada untuk mewarisi: ya
Peratusan Nota: Bergantung pada lebar elemen induk
Contoh berikut menunjukkan bahawa nilai inden perenggan ialah 3em:
P { teks -inden: 3em } Atribut penjajaran menunjukkan penjajaran teks: Nama atribut: 'penjajaran'
Nilai atribut: kiri | kanan | justify
Nilai awal: seperti yang ditakrifkan oleh pengguna
Objek yang sesuai: elemen peringkat blok
Sama ada hendak mewarisi: ya
Peratusan Nota: Dilarang
atribut hiasan teks menerangkan kaedah pengubahsuaian teks:
Nama atribut: 'hiasan teks'
Nilai atribut: tiada |. garis bawah |. Peratusan kenyataan: dilarang
Maksud nilai atribut ialah:
gariskan: garis bawah.
atas: garis bawah.
baris melalui: padamkan baris.
kelip: Kelip (seperti fungsi teg kelip dalam Navigator)
Atribut bayang teks boleh menambah kesan bayang pada teks:
Nama atribut: 'text-shadow'
Nilai atribut : tiada |.
[,
]*
Nilai awal: tiada
Objek yang sesuai: semua
Sama ada untuk diwarisi: Tidak
Nota Peratusan: Hanya sah apabila menerangkan ketelusan
Untuk contoh:
P { text-shadow: black }
Contoh di atas akan memaparkan bayang-bayang hitam di sebelah kanan bawah teks dan bayang-bayang akan menambah luas KOTAK.
Atribut jarak huruf menunjukkan jarak perkataan teks: Nama atribut: 'jarak huruf'
Nilai atribut: normal | semua elemen
Sama ada untuk mewarisi: ya
Peratusan Nota: Dilarang 'jarak perkataan'
Nilai atribut: normal |

Nilai awal: normal
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: ya
Peratusan catatan: dilarang
Contohnya : H1 { jarak perkataan: 1em }
atribut transformasi teks boleh memaparkan teks dalam KOTAK dalam huruf besar atau huruf kecil yang ditentukan bentuk:
Nama atribut: 'teks-transform'
Nilai atribut : huruf besar | huruf kecil | tiada
Nilai awal: tiada
Objek yang sesuai: semua elemen
Sama ada untuk diwarisi: ya <.>Nota peratusan: dilarang
Maksud nilai atribut ialah:
huruf besar : Huruf pertama setiap ayat dalam KOTAK.
huruf besar: Tukar semua huruf dalam BOX kepada huruf besar.
huruf kecil: Tukar semua huruf dalam BOX kepada huruf kecil.
Atribut White-space menerangkan cara memaparkan ruang dalam teks Dalam HTML, ruang ditinggalkan, yang bermaksud bahawa tidak kira berapa banyak ruang yang anda masukkan pada permulaan tanda perenggan, ia akan menjadi tidak sah untuk memasukkan ruang. Terdapat dua kaedah, satu ialah memasukkan terus kod ruang " ", atau menggunakan tag

Terdapat juga atribut yang serupa dengan pra dalam CSS:
Nama atribut: 'white-. space'
Nilai atribut: normal |. pra | nowrap
Nilai awal: normal
Objek yang sesuai: elemen bekas
Sama ada untuk mewarisi: ya
Nota peratusan: dilarang
Contohnya:
PRE { white-space: pra }
P { white-space: normal }

CSS2 Quick Rujukan 5
Kata kunci: Lain-lain
7. Senaraikan atribut:
Atribut di sini digunakan untuk menerangkan senarai (senarai ) siri atribut.
Atribut jenis gaya senarai menerangkan simbol yang digunakan sebelum setiap item dalam senarai:
Nama atribut: 'jenis-gaya senarai'
Nilai atribut: bulatan bulatan bawah | |. upper-roman |. lower-alpha |. upper-alpha |. >cakera: bentuk kek bulat.
bulatan: bulatan berongga.
segi empat: segi empat sama.
perpuluhan: nilai perpuluhan.
roman bawah: angka Roman huruf kecil.
roman besar: Angka Roman huruf besar.
alfa rendah: huruf kecil Yunani.
alfa atas: huruf besar Yunani.
Contohnya:

Ini adalah item pertama

Ini adalah item kedua

Ini adalah item ketiga

Anda juga boleh. gunakan list -style-image menggantikan simbol di hadapan senarai dengan grafik: Nama atribut: 'list-style-image'
Nilai atribut:
| tiada
Nilai awal: tiada
Objek yang sesuai: Elemen senarai
Sama ada untuk mewarisi: ya

Nota Peratusan: Dilarang

boleh menjadi alamat mutlak atau alamat relatif.
Atribut senarai-style-position digunakan untuk menerangkan paparan kedudukan senarai:
Nama atribut: 'list-style-position'
Nilai atribut: dalam | di luar
Nilai awal: luar
Objek yang Sesuai: Elemen senarai
Sama ada untuk mewarisi: ya
Nota Peratusan: Dilarang
Nilai atribut di luar dan dalam mewakili paparan di luar atau di dalam KOTAK masing-masing, contohnya:
UL { list-style: outside }
UL.compact { list-style: inside }

Item senarai pertama datang pertama

item senarai kedua datang kedua

item senarai pertama didahulukan

item senarai kedua datang kedua

senarai- Atribut gaya ialah pintasan untuk atribut di atas:
Nama atribut: 'gaya senarai' Nilai atribut: | >Nilai awal: tidak Objek yang Sesuai: Elemen senarai
Sama ada untuk mewarisi: ya
Nota Peratusan: Dilarang
Contohnya:
UL { gaya senarai: upper-roman dalam } /* Sah untuk mana-mana UL*/
UL ~ UL { gaya senarai: bulatan di luar } /* Sah untuk mana-mana tanda UL di dalam UL*/
8 Atribut jadual:
Oleh kerana kebanyakan atribut dalam jadual telah dibincangkan dalam pelbagai atribut di atas, jadi hanya terdapat dua atribut yang diperkenalkan di sini:
atribut row-span menerangkan bilangan baris yang dibentangkan oleh jadual:
Nama atribut: 'row-span'
Atribut nilai:

Nilai awal : 1 Objek yang sesuai: elemen jadual
Sama ada untuk mewarisi: tidak
Peratusan catatan: dilarang
atribut rentang-lajur menerangkan bilangan lajur yang dibentangkan oleh jadual:
Nama atribut: 'column-span '
Nilai atribut:

Nilai awal: 1 Objek yang sesuai: elemen jadual
Sama ada untuk diwarisi: tidak
Nota peratusan : dilarang
9. Atribut antara muka pengguna:
atribut kursor, pengguna boleh menentukan bentuk kursor untuk digunakan pada elemen:
Nama atribut: 'kursor'
Nilai atribut: auto | lalai |. ubah saiz |. ubah saiz | Nilai awal: auto
Objek yang sesuai: semua elemen
Sama ada untuk mewarisi: ya Peratusan ucapan: dilarang Kursor animasi.
Pada ketika ini, semua sifat CSS yang sedia ada telah diperkenalkan (terdapat juga beberapa helaian gaya pendengaran, yang tidak akan diperkenalkan lagi Artikel ini akan berakhir, walaupun jenis penyemak imbas yang menyokong gaya pada masa ini). helaian masih terhad, tetapi ia merangkumi kebanyakannya Helaian gaya akan menjadi standard bersatu untuk penyemak imbas lambat laun: 1. Helaian gaya adalah satu-satunya piawaian gaya yang diterima oleh W3C tiada tanda bahawa W3C akan menggunakan helaian gaya JavaScript sebagai piawaian helaian gaya. Kedua, CSS berkesan menyelesaikan masalah memperkenalkan acara ke dalam skrip, ia adalah bahagian penting dalam HTML dinamik halaman, dan anda akan mendapati bahawa ia sangat mudah. Saya harap usaha saya dapat membantu anda menguasai helaian gaya dengan mahir.