Comment concevoir du CSS

CSS est un langage de style utilisé pour la conception Web. Il nous permet de styliser la présentation des pages Web pour créer une meilleure expérience utilisateur. Dans cet article, je décrirai les concepts de base, les principes de conception et les techniques de conception courantes de CSS, dans l'espoir d'aider les débutants à mieux comprendre et utiliser CSS.

1. Concepts de base des CSS

1. Sélecteurs

Les sélecteurs CSS sont utilisés pour spécifier les éléments HTML auxquels les styles doivent être appliqués. Les sélecteurs courants incluent les sélecteurs de balises, les sélecteurs de classe, les sélecteurs d'ID et les pseudo-sélecteurs. sélecteurs de classe, etc. Par exemple, le sélecteur de balise peut styliser la balise en spécifiant le nom de la balise HTML, tel que :

p {
    font-size: 16px;
    color: #333;
}

Cela définira la taille de police de toutes les balises p sur 16px et la couleur sur #333.

2. Attributs

Les attributs CSS sont utilisés pour définir le style des éléments HTML, tels que la couleur de la police, la taille, la couleur d'arrière-plan, etc. Les propriétés CSS courantes incluent la taille de la police, la couleur, la couleur d'arrière-plan, etc.

p {
    font-size: 16px;
    color: #333;
    background-color: #fff;
}

Cela définira la taille de la police de toutes les balises p sur 16px, la couleur sur #333 et la couleur d'arrière-plan sur #fff.

3. Valeur

La valeur CSS représente la valeur spécifique à définir pour l'attribut, qui peut être des pixels, des pourcentages, des chaînes, etc. Par exemple, la valeur de l'attribut font-size peut être sous forme de pixels, de pourcentages, etc.

p {
    font-size: 16px;
    font-size: 1em;
}

Les 16px et 1em ici sont tous deux les valeurs de l'attribut font-size. Le premier indique que la taille de la police est de 16 pixels, et le second indique que la taille de la police est un multiple de la taille de la police du parent. element.Une fois est la taille par défaut.

2. Principes de conception CSS

1. Héritage

L'héritage CSS signifie que les éléments enfants peuvent hériter du style de l'élément parent, évitant ainsi la duplication du code et des paramètres de style. Par exemple, si vous souhaitez que la couleur de police de la balise p et d'une balise soit bleue, vous pouvez définir l'attribut de couleur pour l'élément parent, puis ses éléments enfants hériteront automatiquement de son style.

body {
    color: blue;
}

Cela rendra la couleur de police de toutes les balises a et p de la page bleue.

2. Cascading

La cascade de CSS signifie que différents paramètres de style du même élément produiront différents effets en fonction de différentes priorités. Par exemple, si les attributs color et font-size sont définis en même temps dans une balise, leur priorité aura un impact.

p {
    color: red;
    font-size: 20px;
    color: blue;
}

L'attribut color ici sera écrasé par le bleu suivant, donc la couleur de police finale est bleue et l'attribut font-size prendra effet.

3. Simple

Les paramètres de style CSS doivent être aussi concis et clairs que possible pour éviter les codes répétés et redondants et améliorer la vitesse de chargement et la maintenabilité de la page. Des effets simples peuvent être obtenus en réduisant le niveau des sélecteurs et en abrégeant les attributs.

Par exemple :

/* 不优雅的写法 */
.wrapper .content .list .item .title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* 优雅的写法 */
.title {
    font: 16px/1.5 sans-serif;
    color: #333;
    margin-bottom: 10px;
}

3. Compétences en conception CSS

1. Modèle de boîte

Le modèle de boîte de CSS signifie que tous les éléments HTML peuvent être considérés comme une boîte rectangulaire, y compris le contenu, le remplissage, les bordures et les marges Attendez quatre parties.

div {
    width: 300px;
    height: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 30px;
}

Les attributs width et height définissent ici la largeur et la hauteur de la boîte, l'attribut border définit le style de bordure et la largeur de la boîte, l'attribut padding définit la marge intérieure de la boîte et l'attribut margin définit la marge extérieure. de la boîte.

2. Mise en page flottante

La mise en page flottante CSS fait référence à la réalisation de la mise en page en définissant l'attribut float des éléments. Un élément flottant se détachera du flux de documents et n'occupera plus sa propre position, mais flottera vers la gauche ou la droite et affectera la position des éléments qui l'entourent.

img {
    float: left;
    margin-right: 20px;
}

La balise img ici définit l'attribut float sur gauche, ce qui signifie flotter vers la gauche, et définit l'attribut margin-right sur 20px, ce qui signifie que la marge droite est de 20 pixels.

3. Conception réactive

La conception réactive CSS fait référence à l'utilisation de requêtes multimédias pour définir des styles pour différents appareils et tailles d'écran, obtenant ainsi une présentation de page avec différents effets. Ceci peut être réalisé en configurant différentes feuilles de style CSS ou en définissant différentes requêtes multimédias dans la même feuille de style.

@media (max-width: 768px) {
    /* 在窄屏幕下的样式设置 */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 在宽屏幕下的样式设置 */
}

@media (min-width: 1025px) {
    /* 在超宽屏幕下的样式设置 */
}

Ce qui précède présente les concepts de base, les principes de conception et les techniques de conception courantes de CSS. Dans les applications pratiques, différentes techniques et méthodes doivent être utilisées en fonction des besoins pour obtenir les effets et les fonctions de la page. Dans le même temps, l’apprentissage continu et la maîtrise des connaissances liées aux CSS sont également la clé pour améliorer les capacités de conception Web.

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!