Comment définir le style CSS

CSS (Cascading Style Sheets) est l'un des composants de base du développement Web, qui permet aux développeurs de contrôler le style et la mise en page des pages Web. Pour les novices, CSS peut être difficile à apprendre, mais une fois que vous maîtriserez les paramètres CSS de base, il deviendra plus facile de développer de meilleures pages Web. Cet article partagera quelques connaissances de base et des conseils sur la façon de styliser CSS.

1. Choisissez le sélecteur CSS approprié

Le sélecteur CSS est une syntaxe permettant de localiser et de modifier des éléments HTML. Il permet aux développeurs de sélectionner des éléments HTML via des noms de balises, des noms de classe, des identifiants et d'autres attributs. Choisir des sélecteurs appropriés peut simplifier le code CSS et améliorer les performances. Voici quelques-uns des sélecteurs CSS les plus couramment utilisés :

1. Sélecteur de balises

Le sélecteur de balises est le type de sélecteur le plus basique et le plus simple, et il peut être appliqué à tous les éléments d'un document HTML. Par exemple, le code suivant définira la police sur Arial pour tous les éléments de paragraphe d'un document HTML :

p {
  font-family: Arial;
}

2. Sélecteur de classe

Le sélecteur de classe est un sélecteur plus puissant qui permet aux développeurs de sélectionner des éléments en fonction de leur nom de classe. pour sélectionner des éléments. Un nom de classe peut être appliqué à plusieurs éléments afin qu'ils partagent le style de la classe. Le code suivant définira la couleur d'arrière-plan sur gris pour tous les éléments avec un nom de classe "test" :

.test {
  background-color: gray;
}

3. Sélecteur d'ID

Le sélecteur d'ID sélectionne les éléments en fonction de leur attribut d'ID unique. Les noms d'ID ne peuvent être appliqués qu'à un seul élément. Étant donné que chaque identifiant est unique, ils facilitent le ciblage d'éléments HTML spécifiques. Le code suivant définira la couleur de police sur rouge pour l'élément avec l'ID d'élément "header" :

header {
color: red;
}

2. Utilisez le modèle de boîte pour disposer les éléments

Le modèle de boîte fait référence au traitement des éléments HTML comme étant constitués de contenu, de remplissage , bordures et marges. Les développeurs peuvent utiliser le modèle de boîte pour contrôler la taille, l'espacement interne, le style de bordure et la position relative des éléments. Voici quelques attributs de base du modèle de boîte :

1. Largeur (largeur)

L'attribut width définit la largeur de l'élément. Il peut être spécifié en pixels, pourcentages ou autres unités. Le code suivant définira une largeur fixe de 800 pixels pour l'élément avec l'ID "container":

container {
width: 800px;
}

2. Height (height)

L'attribut height définit la hauteur de l'élément. Il peut être spécifié en pixels, pourcentages ou autres unités. Le code suivant définira une hauteur fixe de 30 pixels pour tous les éléments de paragraphe :

p {
 height: 30px;
}

3. Remplissage

Le remplissage fait référence à la distance entre le contenu de l'élément et sa bordure. Il peut être défini à l’aide de valeurs en pixels ou en pourcentage. Le code suivant définira le remplissage gauche à 20 pixels pour l'élément avec l'ID "header" :

header {
padding-left: 20px;
}

4. Border (border)

Les bordures peuvent être utilisées pour définir la taille, la forme et la couleur de l'élément. Les bordures peuvent être divisées en trois parties : la largeur, le style et la couleur. Le code suivant définira la largeur de la bordure sur 1 pixel, le style sur ligne continue et la couleur sur noir pour tous les éléments de paragraphe :

p {
 border: 1px solid black;
}

5. Marge (marge)

La marge fait référence à la distance entre un élément et les éléments adjacents . Il peut être défini à l’aide de valeurs en pixels ou en pourcentage. Le code suivant définira la marge supérieure à 20 pixels pour l'élément avec l'ID "conteneur" :

container {
margin-top: 20px;
}

3. Héritage et remplacement des styles

Les styles CSS peuvent être définis à plusieurs niveaux, notamment élément, classe, ID et global. La définition de styles à ces niveaux peut affecter les éléments à différents niveaux. Voici quelques règles de base pour l'héritage et le remplacement de style :

1. Héritage de style

Certains styles sont transmis des éléments parents aux éléments enfants. Par exemple, si vous appliquez un style de police à un élément parent, ses éléments enfants hériteront également de ce style. Le code suivant utilisera le sélecteur d'ID pour définir la police de l'élément parent et de tous les éléments enfants :

parent, #parent * {
font-size: 14px;
}

2. Remplacements de style

Si plusieurs styles sont appliqués au même élément en même temps, ils seront remplacés dans un priorité spécifique. Voici quelques-unes des règles de remplacement de style les plus courantes :

• Le dernier style défini dans la feuille de style a la priorité la plus élevée
• Les styles marqués !important ont la priorité la plus élevée
• Les sélecteurs d'ID ont une priorité plus élevée que les sélecteurs de classe
• Styles en ligne ont une priorité plus élevée que les feuilles de style externes et les feuilles de style internes

4. Conception réactive Mise en page réactive

De nombreux sites Web modernes adoptent une conception réactive pour optimiser la mise en page des pages Web sur des écrans de différentes tailles. Heureusement, le responsive design est facile à mettre en œuvre avec CSS. Voici quelques techniques CSS que vous pouvez utiliser pour mettre en œuvre une conception réactive :

1. Requêtes multimédias CSS

Les requêtes multimédias CSS sont une méthode de contrôle de la mise en page CSS pour différentes tailles et types d'appareils. Les requêtes multimédias permettent aux développeurs d'afficher les éléments HTML de différentes manières, en s'adaptant efficacement aux différentes tailles d'écran et types d'appareils. Voici un exemple de base :

@media screen and (max-width: 600px) {
 body {
background-color: blue;
}
}

2. Disposition flexible

La disposition flexible permet aux éléments de s'adapter et de se réorganiser automatiquement entre différentes tailles d'écran. Cela peut être réalisé en définissant les propriétés de la flexbox. Voici un exemple simple :

.container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
@media screen and (max-width: 600px) {
 .container {
flex-direction: column;
}
}

Résumé

CSS est une technologie de développement Web importante. En tant que développeur, apprendre à définir les styles CSS rendra nos pages Web plus professionnelles et plus belles. Nous devons choisir les sélecteurs CSS appropriés, utiliser le modèle de boîte pour disposer les éléments, maîtriser l'héritage et les remplacements de style et mettre en œuvre une conception réactive, afin que nos pages Web puissent non seulement fonctionner correctement sur les appareils PC, mais également mieux s'afficher sur les appareils mobiles. . J'espère que cet article vous a aidé à en savoir plus sur la façon de styliser CSS.

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!