10 kemahiran CSS yang baik yang mungkin anda tidak tahu_Mengalami pertukaran

Terjemahan ini tidak dibenarkan oleh pengarang atau tapak web. Semua hak milik pengarang asal dan laman web asal.
Jika anda diberi kebenaran oleh pengarang asal atau tapak web penerbitan asal, anda boleh menggunakan terjemahan ini dengan bebas.

1. Peraturan singkatan atribut fon CSS

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

berat fon:
gaya fon: italic;
fon-varien: huruf kecil;
saiz-fon:1em;
tinggi baris:1.5em; >Tetapi anda juga boleh menulis kesemuanya pada satu baris:

font: huruf besar condong kecil 1em/1.5em verdana,sans-serif

Hebat! 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 amnya, hanya satu kelas (Kelas) boleh ditetapkan untuk elemen, tetapi ini tidak bermakna dua tidak boleh digunakan. Malah, anda boleh melakukan ini:


...

Berikan elemen P dua kelas pada masa yang sama, dipisahkan oleh ruang, supaya semua teks dan sisi atribut kelas 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 seperti ini
...
, anda juga tidak boleh menulis seperti ini

3 Nilai lalai sempadan CSS

biasanya OK Tetapkan warna, lebar dan gaya jidar, seperti:
sempadan: 3px pepejal #000
Ini akan memaparkan jidar sebagai 3 piksel lebar, hitam dan pepejal. 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 laman web mempunyai versi untuk pencetakan, tetapi sebenarnya ini tidak diperlukan kerana CSS boleh digunakan untuk menetapkan gaya cetakan.

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




No Baris pertama adalah untuk paparan, dan baris kedua adalah untuk mencetak Perhatikan atribut media.
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 Ini 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 menjual keseluruhan ikon, anda boleh menggunakan gambar ini:

Sudah tentu boleh, tetapi untuk enjin carian, Ia adalah perkara biasa Berbanding dengan teks, mereka mempunyai sedikit minat dalam teks gantian dalam alt Ini kerana ramai pereka meletakkan banyak kata kunci di sini untuk menipu enjin carian. Jadi kaedahnya sepatutnya 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: ketinggian imej text-indent: -2000px }

Bayar; perhatian kepada ketinggian imej digantikan dengan ketinggian gambar 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 Kotak ini terutamanya untuk pelayar IE sebelum IE6 Mereka mengira lebar sempadan dan ruang putih sebagai lebar elemen. Contohnya:

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

Panggilnya seperti ini:

...

Lebar penuh kotak kini hendaklah 150 mata, yang betul pada semua pelayar kecuali IE sebelum IE6. 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 div { sempadan: 5px; padding: 20px }

Panggil seperti ini:

...

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

7. Jajarkan elemen blok di tengah

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

untuk mengelilingi semua elemen. 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 memusatkan kandungan halaman web. Jadi
text-align: left telah ditambahkan pada Content.

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 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 meletakkan 30 mata dari kiri dan 5 mata dari atas, anda boleh melakukan ini:

#navigasi { position : mutlak; kiri: 30px; atas: 5px }

Sudah tentu, anda juga boleh melakukan ini:
margin: 5px 0 0 30px
Perhatikan bahawa susunan empat 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

Adalah mustahil untuk mengawalnya dalam arah menegak dengan 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 kes itu, sebaik sahaja pembaca bertukar saiz fon, ini Silap mata akan didedahkan, anda hanya boleh menggunakan px.

Pengarang artikel ini ialah: Trenton Moss.
Tapak web penerbitan ialah: http://www.webcredible.co.uk/.

Terjemahan ini tidak dibenarkan oleh pengarang atau tapak web. Semua hak milik pengarang asal dan laman web asal.
Jika anda diberi kebenaran oleh pengarang asal atau tapak web penerbitan asal, anda boleh menggunakan terjemahan ini dengan bebas. ,