Sepuluh petua css_CSS/HTML

1.peraturan singkatan fon css
Apabila menggunakan css untuk mentakrifkan fon, anda boleh melakukan ini:
saiz fon: 1em;
tinggi garis: 1.5em;
berat fon: tebal;
gaya fon: italik;
varian fon: huruf kecil;
font-family: verdana,serif;
Malah anda boleh menyingkat sifat ini:
font: 1em/1.5em tebal huruf kecil huruf condong verdana,serif
Ia jauh lebih baik sekarang, tetapi satu perkara yang perlu diambil perhatian: menggunakan kaedah trengkas ini, anda mesti sekurang-kurangnya menentukan saiz fon dan atribut keluarga fon dan atribut lain (seperti berat fon, font -style,font-varient) secara automatik akan menggunakan nilai lalai jika tidak dinyatakan.


2. Gunakan dua kelas pada masa yang sama
Biasanya kami hanya menentukan satu kelas untuk atribut, tetapi ini tidak bermakna anda hanya boleh menentukan satu seperti yang anda mahukan , contohnya:

...

Dengan menggunakan dua kelas pada masa yang sama (dipisahkan dengan ruang dan bukannya koma), perenggan ini akan menggunakan peraturan yang dinyatakan dalam kedua-dua kelas pada masa yang sama. Jika mana-mana peraturan bertindih, yang terakhir akan diutamakan.


Nilai lalai jidar dalam 3.css
Apabila menulis peraturan sempadan, anda biasanya menyatakan warna, lebar dan gaya (sebarang pesanan boleh diterima). Contohnya: sempadan: 3px pepejal #000 (sempadan pepejal hitam lebar 3 piksel Sebenarnya, satu-satunya nilai yang perlu dinyatakan dalam contoh ini ialah gaya). Jika anda menentukan gaya sebagai pepejal, maka nilai yang selebihnya akan menggunakan nilai lalai: lebar lalai adalah sederhana (bersamaan dengan 3 hingga 4 piksel warna lalai ialah warna teks dalam sempadan). Jika ini adalah apa yang anda mahukan, anda tidak perlu menyatakannya dalam css.


4.!penting akan diabaikan oleh IE
Dalam css, biasanya peraturan yang ditentukan terakhir akan mendapat keutamaan. Walau bagaimanapun, untuk penyemak imbas selain daripada IE, sebarang pernyataan yang ditandakan dengan !important akan menerima keutamaan mutlak, contohnya:
margin-top: 3.5em !important; 2em
Kecuali IE Margin atas ialah 3.5 em dalam semua pelayar tetapi 2em dalam IE Kadang-kadang ini berguna, terutamanya apabila menggunakan margin relatif (seperti contoh ini), untuk menunjukkan perbezaan halus antara IE dan pelayar lain.
(Ramai orang mungkin juga perasan bahawa sub-pemilih CSS juga diabaikan oleh IE)


5 Teknik penggantian imej
Gunakan html standard dan bukannya imej untuk memaparkan teks Selalunya lebih bijak untuk mendapatkan kebolehgunaan yang lebih baik di samping muat turun yang lebih pantas. Tetapi jika anda bertekad untuk menggunakan fon yang mungkin tidak tersedia pada mesin pelawat anda, anda hanya boleh memilih imej.
Sebagai contoh, jika anda ingin menggunakan tajuk "Beli widget" di bahagian atas setiap halaman, tetapi anda juga mahu ia ditemui oleh enjin carian, dan anda menggunakan fon yang jarang berlaku demi kecantikan, maka anda perlu menggunakan Gambar menunjukkan:

Sudah tentu ini benar, tetapi terdapat bukti bahawa enjin carian menghargai teks sebenar jauh lebih daripada teks alt (kerana terlalu banyak laman web sudah menggunakan alt text Bertindak sebagai kata kunci), jadi kita perlu menggunakan kaedah lain:

Beli widget

, bagaimana dengan fon cantik anda? Css berikut boleh membantu:
h1
{
latar belakang: url(widget-image.gif) no-repeat;
}

h1 span
{
kedudukan: mutlak;
kiri:-2000px;
}
Kini anda mempunyai imej yang cantik dan menyembunyikan teks sebenar dengan baik - dengan bantuan css, teks diletakkan di sebelah kiri skrin - 2000 piksel.


6. Pilihan lain untuk penggodaman model kotak css
penggodaman model kotak css digunakan untuk menyelesaikan masalah paparan pelayar sebelum IE6.0 akan menukar sempadan elemen tertentu dan nilai padding disertakan dalam lebar (bukannya ditambah pada nilai lebar). Sebagai contoh, anda mungkin menggunakan css berikut untuk menentukan saiz bekas:
#box
{
lebar: 100px;
sempadan: 5px;
padding: 20px;
}
Kemudian gunakan dalam html:

...

Jumlah lebar kotak ialah 150 piksel dalam hampir semua pelayar (lebar 100 piksel + dua sempadan 5 piksel + dua padding 20 piksel), hanya dalam pelayar sebelum IE6 ia masih 100 piksel (nilai sempadan dan nilai padding termasuk dalam nilai lebar Hack model kotak direka untuk menyelesaikan masalah ini, tetapi ia juga akan menyebabkan masalah. Kaedah yang lebih mudah adalah seperti berikut:
css:
#box
{
lebar: 150px;
}

#box div {
sempadan: 5px;
padding: 20px;
}
html:

...

Dengan cara ini, jumlah lebar kotak dalam mana-mana penyemak imbas akan menjadi 150 piksel.


7 Pusatkan elemen blok
Dengan mengandaikan bahawa tapak web anda menggunakan reka letak lebar tetap dan semua kandungan diletakkan di tengah skrin, anda boleh menggunakan css berikut:
#content
{
lebar: 700px;
margin: 0 auto;
}
Anda boleh meletakkan sebarang item dalam badan html

, item secara automatik akan memperoleh nilai sempadan kiri dan kanan yang sama untuk memastikan paparan berpusat. Walau bagaimanapun, ini masih menjadi masalah dalam penyemak imbas sebelum IE6 dan tidak akan dipusatkan, jadi ia mesti diubah suai seperti berikut:
body
{
text-align: center;
}

#content
{
text-align: left;
lebar: 700px;
margin: 0 auto;
}
Menetapkan badan akan menyebabkan kandungan badan dipusatkan . Tetapi walaupun semua teks adalah berpusat, yang mungkin bukan kesan yang anda mahukan Atas sebab ini, div #content juga perlu menentukan nilai: text-align: left

8 capai pemusatan menegak
Pemusatan menegak ialah sekeping kek untuk jadual, cuma nyatakan sel sebagai penjajaran menegak: tengah, tetapi ini tidak berfungsi dalam reka letak css. Katakan anda menetapkan ketinggian menu navigasi kepada 2em, dan kemudian menentukan peraturan penjajaran menegak dalam CSS, teks masih akan disusun ke bahagian atas kotak, tiada perbezaan sama sekali.
Untuk menyelesaikan masalah ini, cuma tetapkan ketinggian garisan kotak supaya sama dengan ketinggian kotak Dalam contoh ini, ketinggian kotak ialah 2em, kemudian tambahkan ketinggian garisan lain: pada css: 2em. boleh mencapai pemusatan menegak!

9. Kedudukan CSS dalam bekas
Salah satu kelebihan terbesar CSS ialah ia boleh meletakkan objek di mana-mana dalam dokumen dan objek juga boleh diletakkan dalam bekas. Cuma tambahkan peraturan css pada bekas:
#container
{
position: relative;
}
Kemudian kedudukan mana-mana elemen dalam bekas akan relatif kepada bekas. Andaikan anda menggunakan struktur html berikut:

...

Jika anda ingin meletakkan navigasi dalam bekas 30 piksel dari sempadan kiri dan 5 piksel dari atas, anda boleh menggunakan pernyataan css berikut:
#navigation
{
kedudukan: mutlak;
kiri: 30px;
atas: 5px;
}

10. Lanjutkan ke bahagian bawah skrin Salah satu kelemahan warna latar belakang
css ialah kekurangan kawalan menegak, yang membawa kepada masalah yang tidak dihadapi oleh susun atur jadual. Katakan anda menyediakan lajur di sebelah kiri halaman untuk meletakkan navigasi tapak web anda. Halaman mempunyai latar belakang putih, tetapi jika anda mahu lajur navigasi mempunyai latar belakang biru, gunakan css berikut:
#navigation
{
latar belakang: biru;
lebar: 150px;
}
Masalahnya ialah item navigasi tidak meluas sehingga ke bahagian bawah halaman, dan secara semula jadi warna latar belakangnya juga tidak memanjang ke bahagian bawah. Jadi latar belakang biru lajur kiri dipotong separuh ke halaman, membazirkan reka bentuk anda. Apa yang perlu dilakukan? Malangnya, kami hanya boleh menggunakan penipuan, iaitu, nyatakan latar belakang badan sebagai imej dengan warna dan lebar yang sama dengan lajur kiri CSS adalah seperti berikut:
badan
{
latar belakang: url(blue-image.gif ) 0 0 repeat-y;
}
Imej latar belakang hendaklah imej biru selebar 150 piksel. Kelemahan kaedah ini ialah em tidak boleh digunakan untuk menentukan lebar lajur kiri Apabila pengguna menukar saiz teks dan lebar kandungan mengembang, lebar warna latar belakang tidak akan berubah dengan sewajarnya.
Sehingga artikel ini ditulis, ini adalah satu-satunya penyelesaian untuk jenis masalah ini, jadi anda hanya boleh menggunakan nilai piksel untuk lajur kiri untuk mendapatkan warna latar belakang berbeza yang terbentang secara automatik.