Koleksi lengkap gaya css (versi tersusun)

Bab ini akan berkongsi dengan anda koleksi lengkap gaya CSS (versi tersusun), yang mempunyai nilai rujukan tertentu. Rakan yang memerlukan saya harap ia dapat membantu anda.

Sifat fon: (font)

saiz{saiz fon: x- besar;}(extra large) xx-small;(extremely small) Biasanya tidak digunakan dalam bahasa Cina, hanya gunakan nilai berangka, unit: PX, PD

Gaya {font-style: oblique;}(italic) italic ;(italic) normal;(normal)

line-height {line-height: normal;}(normal) Unit: PX, PD, EM

ketebalan {font-weight: bold; } (bold) lebih ringan; (nipis) normal; (normal)

varian {font-variant: small-caps;} (huruf besar kecil) normal; ubah: huruf besar;}(huruf pertama dengan huruf besar) huruf besar;(huruf besar) huruf kecil;(huruf kecil) tiada;(tiada)

pengubahsuaian {text-decoration: underline;}(underline) overline; melalui; (kelip-kelip); (kelip)

Fon yang biasa digunakan: (font-family) "Courier New", monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

Atribut latar belakang: (latar belakang)Warna{warna-latar: #FFFFFF;}

Imej{background-image: url();}

Ulang{background-repeat: no-repeat ;}

scroll {background-attachment: fixed;}(fixed) scroll;(scroll)

position {background-position: left;}(horizontal) top(vertical);

Kaedah singkatan { latar belakang:#000 url(..) ulangi tetap atas kiri;} /*Singkatan·Ini sering muncul semasa membaca kod, jadi kaji dengan teliti*/

Atribut sekat: (Blok) /*Ini adalah kali pertama saya mengetahui atribut ini, jadi saya perlu mengkaji lebih lanjut*/Jarak-huruf {jarak-huruf: normal;} Nilai/*Atribut ini Nampaknya berguna, dengan lebih banyak latihan */

Jajarkan {text-align: justify;} (sejajarkan kedua-dua hujung) ke kiri; (sejajarkan ke kanan) ke tengah; Indent{text-indent: value px;}

Penjajaran menegak{vertical-align: baseline;}(baseline) sub;(subscript) super;(subscript) text-top; -bawah;

jarak perkataan: normal; nilai

ruang putih: pra;(terpelihara) nowrap;(tiada garis putus)

Paparan {paparan:blok;}(blok) sebaris;(benam) senarai-item;(item senarai) run-in;(tambah bahagian) padat;(padat) penanda;(penanda) jadual; table-raw-group; table-column-group; */

Sifat kotak: (Kotak)

lebar:; ; Susunan: kanan atas, kiri bawah

Atribut sempadan: (Sempadan)

gaya sempadan: bertitik;(garisan bertitik ) putus; (garisan putus-putus) pepejal; dua;(garisan berganda) alur;(garisan alur) rabung;(rabung) sisipan;(lekuk) permulaan;

lebar sempadan:; lebar sempadan

sempadan -warna:#;

Bandar kaedah singkatan: warna gaya lebar;

Jenis senarai-jenis: cakera; (bulatan) segi empat sama; -alpha;kedudukan gaya senarai kedudukan: di luar;(外) di dalam;imej gaya senarai imej: url(..);

Atribut kedudukan: (Kedudukan)

Kedudukan: mutlak;keterlihatan: diwarisi; limpahan: kelihatan; disembunyikan; tatal;klip: rect(12px,auto,12px,auto)(crop)

Senarai lengkap kod atribut css

Satu atribut teks CSS:

warna : #999999; /*Warna teks*/ keluarga fon : 宋体; ,sans-serif; /*Fon teks*/

saiz fon : 9pt; /*saiz teks*/gaya fon:itelic; /*Teks ​​condong */

fon-varian: huruf kecil; /*fon kecil*/

jarak huruf : 1pt; /*ruang antara aksara*/

tinggi baris : 200%; *Tetapkan ketinggian baris*/

berat fon:bold; /*Teks ​​tebal*/

vertical-align:sub; /*Subscript*/

vertical-align :super; /*superscript*/

text-decoration:line-through; /*strikethrough*/

text-decoration: overline; /*Tambah baris atas*/

text-decoration:underline; /*Tambah garis bawah*/

text-decoration:none; Garis bawah*/

teks-transform : huruf besar; /*huruf besar perkataan pertama*/

teks-transform : /*huruf besar bahasa Inggeris*/

teks-transformasi : huruf kecil; /*huruf kecil bahasa Inggeris*/

text-align:right; /*Teks-aligned right*/

text-align:left; 🎜>

text-align:center; /*Teks-aligned in the center*/

text-align:justify; /*Text-aligned*/

menegak -align atribut

vertical-align:top; /*Align vertically upwards*/

vertical-align:bottom; /*Align vertically downwards*/

vertical-align:middle ; /*Vertical center alignment*/

vertical-align:text-top; *Teks ​​secara menegak ke bawah Penjajaran*/

2. sempadan CSS kosong

padding-top:10px; padding-right: 10px; /*Biarkan sempadan kanan kosong*/

padding-bottom:10px; Biarkan sempadan kiri kosong

3 atribut simbol CSS:

list-style-type:none; -jenis-gaya:perpuluhan; /*nombor Arab*/

jenis-gaya-senarai:roman-rendah; roman; /*Nombor Roman huruf besar */

jenis-gaya-senarai:alfa-rendah/*/

jenis-gaya-senarai:alfa-atas; Huruf Inggeris besar*/

jenis-gaya-senarai:cakera; /*Simbol bulatan padat*/

jenis-gaya-senarai:bulatan; /*Simbol bulatan berongga*/

list- style-type:square; /*Solid square symbol*/

list-style-image:url(/dot.gif); /*Picture-style symbol*/

kedudukan gaya senarai: di luar; /*baris cembung*/

kedudukan gaya senarai: dalam;

4. Gaya latar belakang CSS:

warna latar belakang: #F5E2EC;

imej latar belakang : url(/image/bg.gif); /*Imej latar belakang*/

lampiran latar belakang : tetap; /*Latar belakang tetap tanda air*/

background-repeat : repeat; /*Repeat arrangement - web page default*/

background-repeat : /*No repeat arrangement*/

background-repeat : repeat- x; /*Ulang susunan pada paksi-x*/

background-repeat : ulang-y; /*Ulang susunan pada paksi-y*/

Nyatakan kedudukan latar belakang

kedudukan latar belakang : 90% 90% /*Kedudukan paksi x dan y imej latar belakang*/

kedudukan latar belakang : atas; *Jajar ke atas*/

kedudukan latar belakang : buttom; /*Jajar ke bawah*/

kedudukan latar belakang : kiri; /*Jajar ke kiri*/

kedudukan latar belakang : kanan; /*Jalur ke kanan* /

kedudukan latar belakang : tengah; /*penjajaran tengah*/

5 >a /*semua hiperpautan* /

a:pautan /*Format teks hiperpautan*/

a:dilawati /*Format teks pautan dilihat*/

a:aktif /*Tekan Format Pautan*/

a:tuding /*Tetikus untuk dipaut*/

Gaya kursor tetikus:

Paut jari KURSOR: tangan

Kursor silang badan:bulu silang

Anak panah menghala ke bawah kursor:s-ubah saiz

Kursor anak panah silang:bergerak

Anak panah menghala kursor ke kanan:bergerak

Tambah kursor tanda soal:help

Anak panah menunjuk ke kursor kiri:w-resize

Anak panah menghala ke atas kursor:n-resize

Anak panah menunjuk ke atas dan ke kursor kanan:ne- ubah saiz

anak panah menghadap ke atas dan ke kursor kiri:nw-resize

Teks Saya taip kursor:teks

anak panah menunjuk ke bawah dan ke kanan kursor:se-ubah saiz

Anak panah menyerong ke bawah kursor kiri:sw-resize

Kursor corong:tunggu

Corak kursor (IE6) p {cursor:url("cursor file name.cur"),text; }

6. Senarai sempadan CSS:

sempadan-atas : 1px pepejal #6699cc; /*sempadan atas*/

bawah sempadan : 1px pepejal #6699cc; /*Sempadan bawah*/

sempadan-kiri : 1px pepejal #6699cc; Garis sempadan kanan*/

Di atas ialah kaedah penulisan yang disyorkan, tetapi anda juga boleh menggunakan kaedah konvensional seperti berikut:

warna atas sempadan: #369 /*Tetapkan warna atas daripada garis sempadan atas */

lebar atas sempadan: 1px /*Tetapkan lebar atas sempadan atas*/

gaya atas sempadan: pepejal/*Tetapkan bahagian atas gaya sempadan atas*/

Gaya bingkai lain

pepejal /*bingkai pepejal*/

bertitik /*bingkai bertitik*/

berganda /* Bingkai wayar berganda*/

alur /*bingkai cembung inset tiga dimensi*/

rabung /*rangka pelega tiga dimensi*/

inset /*bingkai cekung*/

permulaan /*bingkai cembung*/

7. Permohonan borang CSS:

Kotak teks

Butang

Kotak Pemilihan Kompleks

Butang pilih

Kotak teks berbilang baris

Pilihan menu lungsur 1 pilihan 2

8. Gaya sempadan CSS:

margin-atas:10px; /

margin-bawah:10px; /*Nilai jidar bawah*/

margin-kiri:10px; /*nilai jidar kiri*/

Atribut CSS: Gaya Fon (Gaya Fon)

Sintaks tanda penerangan Cina nombor siri

1 Gaya fon {font:font-gaya fon -variant font-weight font-size font-family}

2 Jenis fon {font-family:"Font 1","Font 2","Font 3",...}

3 Saiz fon {font-size:numeric|inherit|medium| besar|. lebih besar|. xx-besar|. lebih kecil |. warna: nilai;}

7 warna bayang {teks- bayang: nilai warna 16 bit}

8 ketinggian baris fon {tinggi garis: nilai berangka|warisi|biasa;}

jarak 9 aksara {jarak huruf: nilai berangka|warisan|normal}

jarak 10 perkataan {jarak perkataan: angka|warisi|biasa}

ubah bentuk fon 11 {font -variant:inherit|normal|small-cps}

12 penukaran Bahasa Inggeris {text-transform:inherit|none|capitalize|huruf besar|huruf kecil}

13 transformasi fon {font-size-adjust :inherit|tiada

14 font {font-stretch:condensed|extra-condensed|extra-expanded|inherit|sempit|normal|semi-condensed|ultra-condensed|ultra-. dikembangkan|lebih luas}

Gaya teks (Gaya Teks)

Nombor siri sintaks tanda penerangan Cinajarak 1 baris {line-height: value|inherit|normal;}

2 Text decoration {text-decoration:inherit|none|underline|overline|line-through|blink}3 Ruang pada permulaan perenggan {text-indent:value|inherit}

4 Penjajaran mendatar {text-align:left|kanan|center|justify}

5 Penjajaran menegak {menegak -align:inherit|atas|bawah|text-top|text-bottom|baseline|tengah|sub|super }

6 Mod penulisan {writing-mode:lr-tb|tb-rl}

Gaya latar belakang

Sintaks tanda penerangan Cina nombor siri1 Warna latar belakang {warna latar: nilai }

2 Imej latar belakang {background-image: url(URL)|none} 3 Background repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat- y}

4 Latar belakang tetap {background-attachment:fixed|scroll}

5 Background positioning {background-position: value|atas|bawah|kiri|kanan|tengah}

6 Gaya belakang {latar belakang: warna latar belakang|imej latar belakang|ulang latar belakang|lampiran latar belakang|kedudukan latar belakang}

Gaya Kotak

Sintaks tanda perihalan Cina nombor siri

1 jidar {margin:margin-top margin-right margin-bottom margin-left}

2 padding {padding : padding-top padding-right padding-bottom padding-left}

3 border width{border-width:border-top-width border-right-width border-bottom-width border-left-lebar}　

Nilai lebar: nipis|sederhana|tebal|nilai

4 Warna sempadan {warna sempadan: nilai nilai nilai nilai} Nilai nilai: mewakili nilai warna atas, kanan, bawah, kiri masing-masing

Sempadan atas {sempadan-atas:border-atas-lebar-gaya-warna gaya sempadan}

Sempadan kanan {sempadan-kanan:warna-gaya-sempadan-kanan-lebar

Sempadan bawah{sempadan-bawah:warna gaya sempadan-lebar-bawah-border}

Sempadan kiri{sempadan-kiri:warna gaya sempadan-lebar-kiri-sempadan}

7 lebar {width:length|peratus|auto}

8 tinggi {height: value|auto}

9 float {float:kiri|kanan|tiada}

10 jelas{ clear:none|kiri|kanan|kedua-duanya}

Senarai kategori

Nombor siri sintaks tanda penerangan Cina

1 Paparan kawalan {display:none|block|inline|list-item}2 Control blank {white-space:normal|pre|nowarp}

3 Simbol senarai {list -style-type:cake|bulatan|persegi|perpuluhan|rendah-roman|atas-alfa-bawah|atas-alfa|tiada}

4 Senarai grafik {list-style-image: URL}

5 Senarai kedudukan {list-style-position:inside|outside}

6 Directory list {list-style: Directory style type|Directory style position|url}

7 bentuk tetikus {kursor:tangan|bulu silang|teks|tunggu|gerak|bantuan|e-saiz|nw-resize|w-resize|s-resize|se-resize|sw-resize}