Maison > Article > interface Web > Dix-huit compétences CSS que j'ai accumulées depuis longtemps_Échange d'expériences
Dix-huit compétences CSS que j'ai accumulées depuis longtemps_Échange d'expériences
- WBOYoriginal
- 2016-05-16 12:09:401153parcourir
Récemment, des amis me posent souvent des questions sur certains problèmes CSS que je rencontre au travail. Ils ne peuvent toujours pas bien contrôler le CSS, ce qui affecte l'efficacité du CSS. Laissez-moi analyser et résumer les erreurs pour aider tout le monde à utiliser CSS plus facilement.
Cet article résume toutes les techniques et solutions de compatibilité que j'ai apprises depuis que j'ai commencé à utiliser les méthodes de mise en page CSS. Je suis prêt à les partager avec vous. Je me concentrerai sur l'explication de certaines erreurs que les novices commettent souvent (y compris celles que je fais). j'ai fait moi-même). , si vous êtes déjà un maître CSS, vous connaissez peut-être déjà ces expériences et compétences. Si vous en avez plus, j'espère que vous pourrez m'aider à les ajouter.
1. Utilisez des abréviations CSS
L'utilisation d'abréviations peut aider à réduire la taille de votre fichier CSS et à le rendre plus facile à lire. Pour les principales règles de l'abréviation CSS, veuillez vous référer au "Résumé de la syntaxe commune des abréviations CSS", qui ne sera pas décrit ici.
2. Définissez clairement l'unité, sauf si la valeur est 0.
Oublier de définir l'unité de taille est une erreur courante parmi les débutants en CSS. En HTML vous pouvez simplement écrire width="100", mais en CSS vous devez donner une unité exacte, telle que : width:100px width:100em. Il n'y a que deux exceptions pour ne pas définir d'unités : la hauteur de ligne et la valeur 0. De plus, les autres valeurs doivent être suivies de l'unité. Attention à ne pas ajouter d'espaces entre la valeur et l'unité.
3. Sensible à la casse
Lors de l'utilisation de CSS en XHTML, les noms d'éléments définis en CSS sont sensibles à la casse. Pour éviter cette erreur, je recommande d'utiliser des minuscules pour tous les noms de définition.
Les valeurs de class et id sont également sensibles à la casse en HTML et XHTML. Si vous devez utiliser une casse mixte, veuillez confirmer soigneusement que votre définition en CSS est cohérente avec les balises en XHTML.
4. Annulez la qualification de l'élément avant la classe et l'identifiant
Lorsque vous écrivez pour définir la classe ou l'identifiant d'un élément, vous pouvez omettre la qualification d'élément précédente, car l'ID est dans une page est unique, tandis que les class peuvent être utilisées plusieurs fois sur la page. Cela n’a aucun sens pour vous de qualifier un élément. Par exemple :
div#content { /* déclarations */ }
fieldset.details { /* déclarations */ }
peut être écrit sous la forme
#content { /* déclarations */ }
.details { /* déclarations */ }
Cela peut économiser quelques octets.
5. Valeur par défaut
Habituellement, la valeur par défaut du remplissage est 0 et la valeur par défaut de la couleur d'arrière-plan est transparente. Mais la valeur par défaut peut être différente selon les navigateurs. Si vous avez peur des conflits, vous pouvez définir les valeurs de marge et de remplissage de tous les éléments à 0 au début de la feuille de style, comme ceci :
* {
margin:0
padding : 0;
}
6. Pas besoin de définir à plusieurs reprises des valeurs héritables
En CSS, les éléments enfants héritent automatiquement des valeurs d'attribut de l'élément parent. , tels que la couleur, la police, etc., qui sont déjà dans l'élément parent. Une fois défini, il peut être directement hérité dans les éléments enfants sans définition répétée. Mais sachez que le navigateur peut remplacer votre définition par certaines valeurs par défaut.
7. Premier principe le plus proche
S'il existe plusieurs définitions du même élément, la définition la plus proche (niveau minimum) aura priorité. Par exemple, il y a ce morceau de code.
Mise à jour : Lorem ipsum dolor set
Dans le fichier CSS, vous avez défini l'élément p et une classe "update"
p {
margin:1em 0 ; >font-size:1em;
couleur:#333;
}
.update {
font-weight:bold
couleur:#600
}
Dans ces deux définitions, class="update" sera utilisé car class est plus proche que p. Vous pouvez consulter « Calcul de la spécificité d'un sélecteur » du W3C pour en savoir plus.
8. Définitions de classes multiples
Une balise peut définir plusieurs classes en même temps. Par exemple : nous définissons d'abord deux styles, le premier style a un arrière-plan de #666 ; le deuxième style a une bordure de 10 px.
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
Dans le code de la page, on peut appeler
9. Utilisez des sélecteurs descendants
Les débutants en CSS ne savent pas que l'utilisation de sélecteurs descendants est l'une des raisons qui affectent leur efficacité. Les sous-sélecteurs peuvent vous aider à enregistrer de nombreuses définitions de classe. Jetons un coup d'œil au code suivant :
- >
Article 1
Article 1
Article 1
Takrif CSS kod ini ialah:
div#subnav ul { /* Beberapa penggayaan */ }
div#subnav ul li.subnavitem { /* Beberapa penggayaan */ }
div#subnav ul li.subnavitem a.subnavitem { /* Beberapa penggayaan */ }
div#subnav ul li.subnavitemselected { /* Sesetengah gaya */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Beberapa penggayaan */ }
Anda boleh menggunakan kaedah berikut untuk menggantikan kod di atas
Takrif gaya ialah:
# subnav { /* Beberapa penggayaan */ }
#subnav li { /* Beberapa penggayaan */ }
#subnav a { /* Beberapa penggayaan */ }
#subnav .sel { /* Beberapa penggayaan * / }
#subnav .sel a { /* Beberapa penggayaan */ }
Menggunakan subpemilih boleh menjadikan kod dan CSS anda lebih ringkas dan lebih mudah dibaca.
10. Tidak perlu menambah petikan pada laluan imej latar belakang
Untuk menjimatkan bait, saya mengesyorkan agar tidak menambah petikan pada laluan imej latar belakang, kerana petikan itu bukan perlu. Contohnya:
background:url("images/***.gif") #333;
boleh ditulis sebagai
background:url(images/***.gif) #333;
Jika anda menambah tanda petikan, ia akan menyebabkan Beberapa ralat penyemak imbas menyimpan banyak bait font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
warna:#333; margin:1em 0; yang perlu mentakrifkan gaya bebas apabila menggunakannya, anda boleh menambah takrifan baharu atau menulis ganti takrifan lama, contohnya: h1 { font-size:2em }
h2 { font-size:1.6em; 🎜>
12 ialah: :link :visited :hover :active Huruf pertama yang diekstrak ialah "LVHA". Anda boleh mengingatinya sebagai "LoVe HAte" (suka), anda boleh merujuk kepadanya >
Jika pengguna anda perlu menggunakan kawalan papan kekunci dan perlu mengetahui fokus pautan semasa, anda juga boleh menentukan atribut :focus Kesan atribut :focus juga bergantung pada apa yang anda tulis mahu elemen fokus memaparkan kesan :hover, anda meletakkan :focus sebelum :hover; jika anda mahu kesan fokus menggantikan kesan :hover, anda meletakkan :focus selepas :hover 13. Clear floats
Masalah CSS yang sangat biasa ialah apabila terapung digunakan untuk penentududukan, lapisan bawah dilindungi oleh lapisan terapung, atau sublapisan bersarang dalam lapisan melebihi lapisan luar
Skop penyelesaian biasa ialah menambah elemen tambahan selepas lapisan terapung, seperti div atau br, dan mentakrifkan gayanya sebagai jelas: kedua-duanya Kaedah ini agak tidak masuk akal, tetapi nasib baik ada penyelesaian yang baik dalam artikel ini "Cara Mengosongkan Terapung Tanpa Penanda Struktur" (Nota: Tapak ini akan menterjemah artikel ini secepat mungkin).
Dua kaedah di atas boleh menyelesaikan masalah limpahan terapung dengan baik, tetapi bagaimana jika anda benar-benar perlu mengosongkan lapisan atau objek dalam lapisan? Kaedah mudah ialah menggunakan atribut limpahan Kaedah ini pada asalnya diterbitkan dalam "Pembersihan Mudah Terapung" dan telah dibincangkan secara meluas dalam "Pembersihan" dan "Pembuangan terapung super mudah".
Kaedah jelas yang manakah di atas yang lebih sesuai untuk anda Ia bergantung pada situasi tertentu dan tidak akan dibincangkan di sini. Di samping itu, beberapa artikel yang sangat baik telah menjelaskan tentang aplikasi apungan Anda disyorkan untuk membaca: "Floatutorial", "Mengandungi Terapung" dan "Reka Letak Terapung"
14.
Ini adalah helah yang mudah, tetapi patut dikatakan sekali lagi kerana saya melihat terlalu banyak soalan pemula yang bertanyakan perkara ini: Bagaimana untuk mendatar memusatkan CSS? Anda perlu menentukan lebar elemen dan menentukan jidar mendatar Jika reka letak anda terkandung dalam lapisan (bekas), seperti ini:
Anda boleh menentukannya seperti ini untuk memusatkannya secara mendatar:
#wrap {
width:760px; /* Ubah suai kepada lebar lapisan anda*/ margin:0 auto;
}
Tetapi IE5/Win tidak boleh memaparkan definisi ini dengan betul, kami menggunakan helah yang sangat berguna untuk diselesaikan: gunakan atribut penjajaran teks.Seperti ini:
body {
text-align:center;
}
#wrap {
width:760px; 0 auto;
text-align:left;
}
Peraturan text-align:center; teks), text-align:left kedua ialah untuk memusatkan teks dalam #warp ke kiri.
15 Import dan sembunyikan CSS
Oleh kerana penyemak imbas lama tidak menyokong CSS, pendekatan biasa ialah menggunakan teknik @import untuk menyembunyikan CSS. Contohnya:
@import url("main.css");
Walau bagaimanapun, kaedah ini tidak berfungsi untuk IE4, yang menyebabkan saya sakit kepala seketika. Kemudian, saya menulisnya seperti ini:
@import "main.css";
Dengan cara ini saya boleh menyembunyikan CSS dalam IE4, saya juga menyimpan 5 bait. Jika anda ingin mengetahui penjelasan terperinci sintaks @import, anda boleh lihat di sini "carta penapis css centricle"
16 Pengoptimuman untuk IE
Kadangkala, anda perlu mengoptimumkan. Pepijat pelayar IE mentakrifkan beberapa peraturan khas Terdapat terlalu banyak penggodam CSS di sini Saya hanya menggunakan dua daripadanya Tidak kira sama ada Microsoft menyokong CSS dengan lebih baik dalam versi beta IE7 yang akan datang.
* 1. Kaedah ulasan
o (a) Untuk menyembunyikan definisi CSS dalam IE, anda boleh menggunakan pemilih anak:
html>body p {
/ * Kandungan definisi */
> ( 🎜> pengisytiharan
Gunakan ulasan bersyarat atribut peribadi Microsoft (ulasan bersyarat). Menggunakan kaedah ini anda boleh menentukan beberapa gaya secara berasingan untuk IE tanpa menjejaskan takrifan helaian gaya utama. Seperti ini:
17. Petua Nyahpepijat: Berapa besar lapisan?
Apabila ralat berlaku semasa menyahpepijat CSS, anda perlu menjadi seperti mesin taip dan menganalisis kod CSS baris demi baris. Saya biasanya mentakrifkan warna latar belakang pada lapisan yang dimaksudkan supaya jelas berapa banyak ruang yang digunakan oleh lapisan itu. Sesetengah orang mencadangkan menggunakan sempadan, yang secara amnya mungkin, tetapi masalahnya ialah kadangkala sempadan akan meningkatkan saiz elemen, dan sempadan atas dan boeder-bawah akan memusnahkan nilai jidar menegak, jadi lebih selamat untuk menggunakan latar belakang.
Atribut lain yang sering menyebabkan masalah ialah garis besar. Outline kelihatan seperti boeder, tetapi tidak menjejaskan saiz atau kedudukan elemen. Hanya beberapa penyemak imbas yang menyokong atribut garis besar, satu-satunya yang saya tahu ialah Safari, OmniWeb dan Opera. Apabila menulis kod CSS, setiap orang mempunyai tabiat menulis mereka sendiri untuk lekukan, pemisah baris dan ruang. Selepas latihan berterusan, saya memutuskan untuk menggunakan gaya penulisan berikut:
pemilih1,
pemilih2 { harta:nilai; pada barisnya sendiri supaya lebih mudah untuk mencarinya dalam fail CSS. Tambahkan ruang antara pemilih terakhir dan kurungan kerinting { Juga tulis setiap definisi pada barisnya sendiri.
Saya sudah biasa menambah koma bertitik selepas setiap nilai atribut Walaupun peraturan membenarkan anda meninggalkan koma bertitik selepas nilai atribut terakhir, adalah mudah untuk terlupa untuk menambah koma bertitik apabila anda ingin menambah yang baharu. gaya. Ralat, jadi lebih baik untuk menambah semuanya.
Akhir sekali, pendakap penutup} ditulis pada baris dengan sendirinya.