Dix conseils 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

, l'élément obtiendra automatiquement des valeurs limites gauche et droite égales pour garantir un affichage centré. Cependant, cela pose toujours un problème dans les navigateurs antérieurs à IE6 et ne sera pas centré, il faut donc le modifier comme suit :
body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
Le réglage du corps entraînera le centrage du contenu du corps . Mais même tout le texte est centré, ce qui n'est probablement pas l'effet souhaité. Pour cette raison, le div de #content doit également spécifier une valeur : text-align: left

8. obtenir un centrage verticalLe centrage vertical est un jeu d'enfant pour les tableaux, spécifiez simplement la cellule comme vertical-align: middle, mais cela ne fonctionne pas dans la mise en page CSS. Supposons que vous définissiez la hauteur d'un menu de navigation sur 2em, puis que vous spécifiiez les règles d'alignement vertical en CSS, le texte sera toujours disposé en haut de la boîte, il n'y a aucune différence.
Pour résoudre ce problème, définissez simplement la hauteur de ligne de la boîte pour qu'elle soit la même que la hauteur de la boîte. Dans cet exemple, la hauteur de la boîte est de 2em, puis ajoutez simplement une autre hauteur de ligne : au css : 2em. peut réaliser un centrage vertical !

9. Positionnement CSS dans le conteneur
L'un des plus grands avantages du CSS est qu'il peut positionner des objets n'importe où dans le document, et les objets peuvent également être positionnés dans un conteneur. Ajoutez simplement une règle CSS au conteneur :
#container
{
position: relative;
}
Ensuite, le positionnement de tout élément dans le conteneur sera relatif au conteneur. Supposons que vous utilisiez la structure HTML suivante :

...

Si vous souhaitez positionner la navigation dans le conteneur à 30 pixels de la bordure gauche et à 5 pixels de la en haut, vous pouvez utiliser l'instruction CSS suivante :
#navigation
{
position: absolue;
gauche: 30px;
top: 5px;
}

10. Étendre jusqu'au bas de l'écran L'un des inconvénients de la couleur de fond
css est le manque de contrôle vertical, ce qui entraîne des problèmes qu'une disposition de tableau ne rencontre pas. Supposons que vous configuriez une colonne sur le côté gauche de la page pour placer la navigation de votre site Web. La page a un fond blanc, mais si vous souhaitez que la colonne de navigation ait un fond bleu, utilisez le css suivant :
#navigation
{
background: blue;
width: 150px;
}
Le problème est que l'élément de navigation ne s'étend pas jusqu'en bas de la page, et naturellement sa couleur d'arrière-plan ne s'étend pas non plus jusqu'en bas. Ainsi, le fond bleu de la colonne de gauche est coupé à mi-chemin de la page, ce qui gâche votre conception. Ce qu'il faut faire? Malheureusement, nous ne pouvons utiliser que la tromperie, c'est-à-dire spécifier l'arrière-plan du corps comme une image de la même couleur et largeur que la colonne de gauche. Le CSS est le suivant :
body
{
background : url(blue-image.gif ) 0 0 repeat-y;
}
L'image d'arrière-plan doit être une image bleue de 150 pixels de large. L'inconvénient de cette méthode est que em ne peut pas être utilisé pour spécifier la largeur de la colonne de gauche. Lorsque l'utilisateur modifie la taille du texte et que la largeur du contenu s'agrandit, la largeur de la couleur d'arrière-plan ne changera pas en conséquence.
Au moment d'écrire ces lignes, c'est la seule solution à ce type de problème, vous ne pouvez donc utiliser que les valeurs de pixels pour la colonne de gauche pour obtenir une couleur d'arrière-plan différente qui s'étire automatiquement.