recherche

Maison >interface Web >tutoriel CSS >Maîtriser CSS : des bases au niveau intermédiaire

Maîtriser CSS : des bases au niveau intermédiaire

Linda Hamilton
Linda Hamiltonoriginal
2024-12-13 03:03:16157parcourir

Mastering CSS: From Basics to Intermediate Level

Maîtriser CSS : des bases au niveau intermédiaire

CSS (Cascading Style Sheets) est une technologie fondamentale pour créer des sites Web visuellement attrayants. Il permet aux développeurs de styliser les éléments HTML, de contrôler les mises en page et d'améliorer l'expérience utilisateur. Cet article vous guide à travers les bases CSS et les concepts intermédiaires, vous garantissant ainsi de pouvoir styliser les pages Web en toute confiance.

1. Introduction au CSS

  • Qu'est-ce que CSS ?

    CSS est utilisé pour styliser les éléments HTML, en définissant leur apparence (par exemple, les couleurs, les polices, l'espacement). Il sépare le contenu (HTML) de la présentation (CSS).

    Exemple : styliser un

    élément :

     <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:


   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>
  • CSS externe : lié via un fichier .css pour plus de cohérence sur plusieurs pages. Exemple: 
   <link rel="stylesheet" href="styles.css">

2. Sélecteurs CSS

  • Les sélecteurs sont utilisés pour cibler les éléments HTML à des fins de style.

    • Sélecteur universel (*) : stylise tous les éléments.
    • Sélecteur de type (élément) : cible des balises spécifiques telles que

      .

    • Class Selector (.classname) : Cible les éléments avec une classe spécifique. Exemple: 
       <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
    • Sélecteur d'ID (#id) : Cible un identifiant unique. Exemple: 
       <style>
     #unique { color: green; }
   </style>
   <p>

3. CSS Properties and Values

  • Text and Font Styling

    • color: Sets text color.
    • font-size: Defines text size.
    • font-family: Specifies the font. Example: 
       <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>

  • Style d'arrière-plan

    • background-color : définit la couleur d’arrière-plan.
    • background-image : ajoute une image d’arrière-plan. Exemple: 
       <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>

4. Modèle de boîte CSS

Le modèle de boîte explique comment les éléments sont structurés :

  • Contenu : Le contenu réel à l'intérieur de l'élément.
  • Padding : Espace entre le contenu et la bordure.
  • Bordure : Encadre le remplissage et le contenu.

  • Marge : Espace entre l'élément et les éléments voisins.

    Exemple :

     <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>

5. Positionnement et mises en page CSS

  • Positionnement

    • statique : flux par défaut.
    • relatif : positionné par rapport à sa position normale.
    • absolu : positionné par rapport à l’ancêtre positionné le plus proche.
    • corrigé : reste en place pendant le défilement. Exemple: 
       <style>
     div { position: absolute; top: 50px; left: 100px; }
   </style>

  • Flexbox

    Flexbox simplifie la création de mises en page flexibles et réactives.

    Exemple :

     <style>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
 </style>

  • Grille

    CSS Grid fournit un système de mise en page puissant.

    Exemple :

     <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>

6. Pseudo-classes et pseudo-éléments CSS

  • Pseudo-classes : éléments de style en fonction de leur état.

    Exemple : effet de survol

       <link rel="stylesheet" href="styles.css">

  • Pseudo-éléments : Stylisez des parties spécifiques d'un élément.

    Exemple : Ajouter du contenu avant un élément :

       <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>

7. Conception réactive avec requêtes multimédias

Les requêtes multimédias ajustent les styles en fonction de la taille de l'écran.

Exemple :

   <style>
     #unique { color: green; }
   </style>
   <p>














  
  
  3. CSS Properties and Values

  • Text and Font Styling

    • color: Sets text color.
    • font-size: Defines text size.
    • font-family: Specifies the font. Example: 
       <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>

    8. Techniques CSS intermédiaires

    • Transitions et Animations

      Exemple :

         <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>

    • Variables CSS

      Exemple :

       <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>

    9. Conclusion

    CSS transforme le HTML brut en de belles pages Web fonctionnelles. En comprenant les bases et en progressant vers des concepts intermédiaires, vous acquérez les compétences nécessaires pour créer des conceptions réactives et visuellement attrayantes. Entraînez-vous à styliser des projets simples comme un portfolio personnel pour maîtriser ces techniques.

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!

css html Static for class default this position margin padding border background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je redimensionner automatiquement une zone de texte en fonction de son contenu et masquer les barres de défilement ?Article suivant：Comment puis-je redimensionner automatiquement une zone de texte en fonction de son contenu et masquer les barres de défilement ?

Articles Liés

Voir plus