Sepuluh teknik CSS klasik_CSS/HTML

1. Peraturan singkatan atribut fon CSS

Secara amnya, ini adalah cara untuk menetapkan atribut fon dengan CSS:

font-weight:bold;
gaya fon:italic;
varian fon: huruf besar kecil;
saiz fon:1em;
tinggi garis:1.5em;
keluarga fon:verdana,sans-serif ;

Tetapi anda juga boleh menulis kesemuanya pada satu baris:

font: huruf besar kecil italik tebal 1em/1.5em verdana,sans-serif;

Sungguh bagus! Hanya satu kaveat: kaedah trengkas ini hanya berfungsi apabila kedua-dua sifat saiz fon dan keluarga fon ditentukan. Selain itu, jika anda tidak menetapkan berat fon, gaya fon dan varian fon, mereka akan menggunakan nilai lalai, jadi ingat perkara ini.

2 Gunakan dua kelas pada masa yang sama

Secara umumnya, hanya satu kelas (Kelas) boleh ditetapkan untuk elemen, tetapi ini tidak bermakna dua kelas tidak boleh ditetapkan. digunakan. Malah, anda boleh melakukan ini:

...

Berikan dua elemen P di Kelas masa yang sama, dipisahkan oleh ruang, supaya semua atribut teks dan kelas sampingan akan ditambahkan pada elemen P. Jika terdapat percanggahan antara atribut dalam dua kelas, satu set kemudian akan berkuat kuasa, iaitu atribut kelas yang diletakkan kemudian dalam fail CSS akan berkuat kuasa.

Tambahan: Untuk ID, anda tidak boleh menulis

...

anda juga tidak boleh menulis

3. Nilai lalai sempadan CSS

Biasanya anda boleh menetapkan warna, lebar dan gaya sempadan, seperti:

sempadan: 3px pepejal #000

Ini menunjukkan sempadan sebagai garisan pepejal selebar 3 piksel, hitam. Tetapi sebenarnya, anda hanya perlu menentukan gaya di sini.

Jika gaya sahaja ditentukan, atribut lain akan menggunakan nilai lalai. Secara amnya, lebar lalai Sempadan adalah sederhana, yang biasanya bersamaan dengan 3 hingga 4 piksel warna lalai ialah warna teks. Jika nilai ini betul, tidak perlu menetapkan begitu banyak tetapan.

4. CSS untuk pencetakan dokumen

Banyak tapak web mempunyai versi untuk mencetak, tetapi sebenarnya ini tidak diperlukan kerana ia boleh ditetapkan dengan gaya cetakan Set CSS.

Dengan kata lain, anda boleh menentukan dua fail CSS untuk halaman, satu untuk paparan skrin dan satu untuk mencetak:

>

Barisan pertama adalah untuk paparan, dan baris kedua adalah untuk mencetak.

Tetapi apakah yang perlu ditulis dalam CSS percetakan? Anda boleh menyediakannya dengan cara yang sama seperti anda mereka bentuk CSS biasa. Semasa mereka bentuk, anda boleh menetapkan CSS ini untuk memaparkan CSS untuk menyemak kesannya. Mungkin anda akan menggunakan perintah paparan: none untuk mematikan beberapa imej hiasan dan mematikan beberapa butang navigasi. Untuk mengetahui lebih lanjut, lihat artikel "Perbezaan Pencetakan".

5. Kemahiran menggantikan imej

Secara amnya disyorkan untuk menggunakan HTML standard untuk memaparkan teks dan bukannya imej, yang bukan sahaja lebih pantas tetapi juga lebih mudah dibaca. Tetapi jika anda ingin menggunakan beberapa fon khas, anda hanya boleh menggunakan gambar.

Sebagai contoh, jika anda ingin mencipta ikon untuk menjual barangan, anda akan menggunakan imej ini:

Sudah tentu ia boleh dilakukan, tetapi untuk enjin carian, berbanding dengan teks biasa, mereka tidak berminat dengan teks gantian dalam alt . Ini kerana Ramai pereka meletakkan banyak kata kunci di sini untuk menipu enjin carian. Jadi kaedahnya hendaklah seperti ini:

Beli widget

Tetapi dengan cara ini tiada fon khas. Untuk mencapai kesan yang sama, anda boleh mereka bentuk CSS seperti ini:

h1 { background: url(widget-image.gif) no-repeat; height image text-indent: -2000px }

Beri perhatian untuk menggantikan ketinggian imej dengan ketinggian imej sebenar. Di sini, imej akan dipaparkan sebagai latar belakang, dan kerana lekukan -2000 piksel ditetapkan untuk teks sebenar, ia akan muncul 2000 mata di sebelah kiri skrin dan tidak akan kelihatan. Tetapi bagi orang yang mematikan gambar, mereka mungkin tidak dapat melihatnya langsung, jadi berhati-hati.

6. Satu lagi teknik pelarasan untuk model kotak CSS

Pelarasan model Box ini terutamanya untuk IE sebelum IE6 Untuk penyemak imbas , mereka mengira lebar sempadan dan ruang putih ke dalam lebar elemen. Contohnya:

#kotak { lebar: 100px; padding: 20px }

Panggilnya seperti ini:

< p id="box">...

Pada masa ini, lebar penuh kotak hendaklah 150 mata, yang berlaku dalam semua penyemak imbas kecuali Pelayar IE sebelum IE6 Semua adalah betul pada peranti. Tetapi pada pelayar seperti IE5, lebar penuhnya masih 100 mata. Perbezaan ini boleh dikendalikan menggunakan kaedah pelarasan Kotak yang dicipta oleh orang terdahulu.

Tetapi tujuan yang sama boleh dicapai dengan CSS untuk menjadikannya dipaparkan secara konsisten.

#kotak { lebar: 150px } #kotak p { jidar: 5px }

Panggil seperti ini:

...

Dengan cara ini, tidak kira apa pelayar, lebarnya ialah 150 mata.

7. Penjajaran tengah elemen blok

Jika anda ingin membuat halaman web dengan lebar tetap dan mahu halaman web dipusatkan secara mendatar, ia biasanya seperti ini:

#content { width: 700px; margin: 0 auto }

Anda akan menggunakan

Ini mudah, tetapi tidak cukup baik, dan versi sebelum IE6 tidak akan memaparkan kesan ini. Tukar CSS seperti berikut:

body { text-align: center } #content { text-align: left width: 700px; 0 auto }

Ini akan Kandungan halaman web dipusatkan, jadi penjajaran teks: kiri ditambahkan pada Kandungan.

8 Gunakan CSS untuk mengendalikan penjajaran menegak

Penjajaran menegak boleh dicapai dengan mudah menggunakan jadual. Hanya tetapkan penjajaran menegak: tengah. Tetapi ini tidak berguna dengan CSS. Jika anda ingin menetapkan bar navigasi menjadi 2em tinggi dan mahu teks navigasi dipusatkan secara menegak, menetapkan atribut ini tidak berguna.

Apakah kaedah CSS? Ngomong-ngomong, tetapkan ketinggian baris perkataan ini kepada 2em: ketinggian baris: 2em dan itu sahaja.

9. Kedudukan CSS dalam bekas

Satu faedah CSS ialah anda boleh meletakkan elemen secara sewenang-wenangnya, walaupun dalam bekas. Contohnya, untuk bekas ini:

#bekas { kedudukan: relatif }

Dengan cara ini, semua elemen dalam bekas akan berada pada kedudukan yang agak anda boleh menggunakannya seperti ini:

...

Jika anda ingin mencari 30 mata ke kiri, 5 mata ke atas, seperti ini:

#navigation { position: absolute left: 30px; >

Sudah tentu, anda boleh Suka ini:

margin: 5px 0 0 30px

Perhatikan bahawa susunan 4 nombor ialah: atas , kanan, bawah, kiri. Sudah tentu, kadangkala meletakkan kedudukan berbanding margin adalah lebih baik.

10. Warna latar belakang yang pergi terus ke bahagian bawah skrin

dikawal dalam arah menegak dan tidak boleh dikawal oleh CSS. Jika anda mahu bar navigasi terus ke bahagian bawah halaman seperti bar kandungan, adalah sangat mudah untuk menggunakan jadual, tetapi jika anda hanya menggunakan CSS seperti ini:

#navigation { latar belakang: biru; lebar: 150px }

Bar navigasi yang lebih pendek tidak akan terus ke bawah, ia akan tamat apabila kandungan tamat separuh jalan. Apa yang perlu dilakukan?

Malangnya, satu-satunya cara untuk menipu ialah menambah imej latar belakang pada lajur yang lebih pendek, dengan lebar yang sama dengan lebar lajur, dan menjadikannya warna yang sama dengan warna latar belakang yang ditetapkan.

body { background: url(blue-image.gif) 0 0 repeat-y }

Anda tidak boleh menggunakan ia sebagai unit pada masa ini, kerana dalam itu kes, sebaik sahaja pembaca Tukar saiz fon dan helah ini akan didedahkan, hanya px boleh digunakan.