Maîtriser CSS : des bases au niveau intermédiaire-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-12-13 03:03:16

original

161 Les gens l'ont consulté

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:

Copier après la connexion

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

Copier après la connexion

CSS externe : lié via un fichier .css pour plus de cohérence sur plusieurs pages. Exemple:

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

Copier après la connexion

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>
```
Copier après la connexion
Copier après la connexion
- Sélecteur d'ID (#id) : Cible un identifiant unique. Exemple:
```
   <style>
     #unique { color: green; }
   </style>
   <p>
```
Copier après la connexion

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>
```
Copier après la connexion
Copier après la connexion
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>
```
Copier après la connexion
Copier après la connexion

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>

Copier après la connexion

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>
```
Copier après la connexion

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>

Copier après la connexion

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:

Copier après la connexion

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

Copier après la connexion

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">
```
Copier après la connexion
Copier après la connexion
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>
```
Copier après la connexion
Copier après la connexion

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

Copier après la connexion

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>
```
Copier après la connexion
Copier après la connexion
8. Techniques CSS intermédiaires
- Transitions et Animations
  
  Exemple :
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
  Copier après la connexion
  Copier après la connexion
- Variables CSS
  
  Exemple :
```
 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>
```
  Copier après la connexion
  Copier après la connexion
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.