que sont les règles CSS

Quelles sont les règles CSS ?

Voici 31 règles de grammaire CSS :

1 . Faites bon usage des règles d'abréviation CSS

/*Faites attention à l'ordre d'écriture en haut, à droite, en bas et à gauche*/

1. À propos des marges (4 côtés) :

.

1px 2px 3px 4px (haut, droite, bas, gauche)

1px 2px 3px (la gauche omise est égale à la droite)

1px 2px (le haut omis est égal au bas )

1px (les quatre côtés sont identiques)

2. Simplifiez tout :

*/ body{margin:0}--------------. --- représente tous les éléments de la page Web La marge est 0

#menu{ margin:0}------------Indique que la marge de tous les éléments sous la zone de menu est 0

3. Style spécifique à l'abréviation (bordure) :

Bordure : 1px solid #ffffff ;

Border-width :0 1px 2px 3px ;

4. Règles d'abréviation pour le texte :

Style de police : italique ; forme italique

Variante de police : petites majuscules/normal ; style de variante : petites majuscules/normal

Poids de la police : gras ;

Taille de la police : 12 px;

Hauteur de la ligne : 1,2 em(120 %)/1,5em(150 %);

Famille de polices : arrial, sans-serif, verdana ;

abrégé en :

Police : italique, petites majuscules, gras 12 px/1,5 em arrial, sans-serif ;

Remarque : la taille de police et la hauteur de ligne sont utilisées. Les barres obliques ne peuvent pas être écrites séparément lorsqu'elles sont combinées.

5. À propos de l'image d'arrière-plan :

Arrière-plan : #FFF url(log.gif) sans répétition fixe en haut à gauche ;

6. >

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

Abrégé en :

List-style:none inside url(filename.gif)

2 Utilisez 4 méthodes pour introduire les styles CSS

1.link

relation relative

type de données, il y en a beaucoup

chemin href

Certains navigateurs prennent en charge des styles alternatifs, des mots-clés : alternate:

2. Bloc de style interne

h1{color:red;}

–>

3.@import

@import url {a .css}

Remarque : Cette directive doit être placée dans le conteneur

dans un commentaire html,

4. Style en ligne

Le sélecteur est un concept de base du CSS. Les règles de base sont les suivantes :

1. Structure des règles :

h1 {color:red;}

selector {Attribut : valeur ;>

Ce type est un sélecteur d'élément, qui peut essentiellement inclure tous les éléments HTML

La valeur de l'attribut peut inclure plusieurs éléments, tels que : border : 1px solid red ;

Syntaxe commune

1) Regroupement :

Les sélecteurs et les déclarations peuvent être regroupés :

h1,h2,h3{color:red;background :#fff ;}, le sélecteur est séparé par ",", et l'attribut est séparé par ";"

2) Sélecteur de classe, c'est-à-dire la déclaration

appliquée via class= Définition de "stylename" :

.stylename{color:red;}

Remarque :

Vous pouvez utiliser plusieurs catégories de sélection en HTML : telles que class=”cn1 cn2 cn3″

3) Sélecteur d'ID, c'est-à-dire le style correspondant à l'attribut id

définition :

#a{color:red;} ->Cette définition est pour les éléments avec id="a"

2. Cette partie est notre syntaxe CSS commune Parlons de notre syntaxe de sélecteur inhabituelle

1) Structure parent-enfant, qui correspond au document. diagramme de structure

tel que p span {border:1px solid red;} correspond à la balise

ci-dessous

, qui est très utile et peut être positionnée avec précision.

Certaines applications spéciales (prise en charge d'IE7) :

(1) p > span{}, correspond à toutes les étendues sous tous les p

(2) p + span{}, correspond à la première balise span qui apparaît immédiatement après l'élément p, 2 ou plus Doit avoir la même balise parent

2) Sélecteur d'attribut : (Remarque : le sélecteur d'attribut n'est pris en charge que par IE7 et n'est pas pris en charge par les versions suivantes. Autre les navigateurs peuvent le faire en gros)

Syntaxe : img[alt]{border:1px solid;}

représente la balise img correspondant à l'attribut alt. Bien sûr, il peut prendre en charge plusieurs correspondances d'attributs. , comme img[alt][title]{}; représente ces deux attributs. Toutes les balises img peuvent également correspondre à des valeurs spécifiques : telles que : img[alt="que sont les règles CSS"]{}; dans le sélecteur d'attribut, correspondance spéciale :

( 1)img[class~=”b”], ~= : correspond à une valeur dans l'attribut, c'est-à-dire correspond à

(2)[class^= "a"],

(3)[class$="a"] commençant par a,

(4) [class*="a"] se terminant par a, incluant

(5)[class|=”a”] de a, égal à a ou

commençant par a 3) Pseudo- classe et pseudo-élément

sont principalement utilisés dans un usage quotidien. Il existe plusieurs pseudo-classes de la balise : link:hover:active:visited

et : first-child : first:before:left:right:lang:focus:fist-line, etc.

Remarque : les pseudo-classes dynamiques peuvent être appliquées à n'importe quel élément, tel que input:focus{background:red;} Lorsque le la balise d'entrée obtient le focus, l'arrière-plan devient rouge

En utilisant la syntaxe ci-dessus en combinaison, le positionnement peut être obtenu dans un style précis, simple et indirect.

3. Intégration de la classification du sélecteur

优先级别遵循：行内样式 >ID > Class >标记

基本选择器 标记选择器（eg:

） 

类别选择器(eg:class) 

ID选择器 

复合选择器 “交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合 

“并集”复合选择器(eg:h1,h2,h3{color:red}) 

“后代”复合选择器(eg: #menu .menulist{ ... }) 

“子” 复合选择器(eg: #menu .menulist .selectit { ... })

四、 使用子选择器减少id和class的定义

示例结构：

content

Exemple CSS :

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... >

5. Utilisez les sélecteurs de groupe pour appliquer le même style à différents éléments

tels que h1,h2,h3,div{font-size:16px;font-weight : gras🎜>

Ensuite, les styles des éléments h1, h2, h3 et div ont tous une police de 16 pixels, police grasse

6. Utilisation de pseudo-classes et de sélecteurs

will En combinant des pseudo-classes et des classes, vous pouvez créer plusieurs groupes d'effets de liens différents sur la même page. Par exemple, nous définissons un groupe de liens rouge et bleu après accès ; un autre groupe est vert et jaune après accès. ：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: # 00FF00}

a.blue:visited {color: #FF00FF}

s'applique désormais à différents liens :

Ceci est le premier ensemble de liens

Ceci est le deuxième ensemble de liens> ;

7. Principe de priorité le plus récent de CSS

/*Si plusieurs styles sont définis pour un élément, le plus récent aura priorité et le style le plus récent remplacera les autres styles en ligne > ID > Classe >Mark*/

Ce qui suit est le fragment de référence :

CSS :

p{color:red}

.blue {color:bleu}

.jaune{color:jaune}

HTML :

Affiché ici en rouge

Ceci est affiché en bleu

Ceci est affiché en bleu Vert p>

Ceci est affiché en jaune

Remarque :

(1) Faites attention aux plusieurs priorités des styles (les priorités diminuent de haut en bas et les styles ci-dessous remplacent les styles ci-dessus) :

--paramètre de style d'élément

--zone de tête

< ;li>Contenu 2

Titre

Description du contenu 1

Description du contenu 2

l dt Vous pouvez ajouter ol ul li et p

à dd. 27. Effacer le flottant

clearfix:after {content:"."; >

Dans Firefox, lorsque les enfants flottent tous, la hauteur du parent ne peut pas couvrir complètement l'enfant, utilisez donc ce HACK pour effacer les flotteurs. Si le parent est défini une fois, ce problème peut être résolu. .

.clearfix {

display:inline-block;

}

/* Se cache depuis IE-mac */

* html .clearfix {

hauteur:1%

}

.clearfix {

affichage:bloc;

}

/* Terminer le masquage depuis IE-mac */

** Ce type d'utilisation est plus courant lors du mélange d'images et de texte, mais il n'est pas facile à contrôler. Utilisez la marge avec clear{clear : les deux} Prenez le contrôle directement.

28. Traitement du texte

1. Polices générales :

famille de polices : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋体", sans- serif;

Police du titre (h1/h2) : famille de polices : Cambria, Géorgie, "Times New Roman", Times, serif;

2. >P:première lettre{padding:10px,fontsize:32pt;float:left}

3. Caractères chinois Pinyin :

Bruce Wolfbu lu si lang

Vingt-neuf, problème de compatibilité multi-navigateur de hauteur minimale

Div{

hauteur min:450px;

hauteur:auto!important;

hauteur:450px;

débordement:visible;????

>

30. Mantra de mise en page CSS - CSS BUG jingle

· Si la bordure IE apparaît ou disparaît, veuillez noter que le réglage de la hauteur doit avoir été oublié

· Flotteurs ; sont créés pour une raison. Si vous souhaitez que le calque parent les contienne, vous devez les effacer immédiatement après les flotteurs, et le conteneur apparaîtra naturellement

· Ne paniquez pas lorsque le texte à trois pixels se déplace ; lentement, le paramètre de hauteur vous aidera ;

· Pour être compatible avec différents navigateurs, veuillez noter que le paramètre de hauteur de ligne par défaut peut être une tuerie

· Pour effacer les flottants indépendamment, veuillez conserver ; à l'esprit que la hauteur de ligne doit être définie sur aucune et la hauteur doit être définie sur zéro. L'effet de conception est cohérent avec la navigation

· L'apprentissage de la mise en page nécessite des idées, le principe de mise en page est naturel et droit, facile à mettre en œuvre ; contrôlez le HTML, une mise en page simplifiée avec moins de hacks, un code propre, une bonne compatibilité et des moteurs conviviaux.

· Toutes les balises proviennent, mais la durée par défaut est Wuji, Wuji a deux types - le niveau en ligne et le niveau img sont spéciaux, mais ils suivent également les principes juridiques. un * Le numéro est entièrement revenu à l'original, le motif de superposition nécessite plus de pratique, tout est régulier.

· Soyez prudent lors du formatage des liens d'image. Si le lien texte du lien d'image est aligné, padding et vertical-align:middle doivent être définis. Peu importe si la différence est légère.

· Pour les doubles marges flottantes IE, veuillez utiliser display: inline.

· La liste doit être saisie horizontalement, les codes de liste doivent être rapprochés et les espaces doivent être mémorisés.

31. Applications de polices sur le Web

Résumer plusieurs ensembles de familles de polices pratiques et simples

famille de polices : Tahoma, Helvetica, Arial, sans-serif ;

Police neutre de style Tahoma. Il est recommandé d'utiliser un environnement supérieur à 13px.

Famille de polices : Trebuchet MS, Verdana, Helvetica, Arial, sans-serif ;

Police plate large Verdana. Il est recommandé de l'utiliser dans un environnement inférieur à 11px.

Famille de polices : Geogia, Times New Roman, Times, serif ;

Le choix parfait pour les polices serif. Principalement utilisé pour les grandes polices de titre supérieures à 16 px.

Famille de polices : Lucida Console, Monaco, Courier New, mono, monospace ;

Une série de polices à espacement fixe. Écrire du code est très utile. De plus, si vous estimez que la console Lucida est trop large, vous pouvez passer à la machine à écrire Lucida Sans, plus étroite. D'ailleurs, le bloc de code sur le blog de Lao Zhao utilise Lucida Sans Typewriter~

Si la visibilité est définie sur cachée dans le style du div, le div sera masqué, mais il occupera l'espace vide, et s'il est défini pour afficher : none n'occupe pas l'espace vide

et visible="false" signifie que le div n'est pas renvoyé en html

;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!