Qu’est-ce que le CSS ? A quoi ça sert ?

CSS, Cascading Style Sheets, est un langage de style utilisé pour la conception Web. Avec CSS, vous pouvez modifier l'apparence, la mise en page et le comportement d'éléments individuels sur une page HTML.

CSS a été créé à l'origine par des développeurs de Sadie Corporation (Spector Corporation) et est devenu un standard de l'industrie en 1996. Avec le développement d’Internet et l’émergence du langage HTML, CSS est devenu l’un des outils de conception web les plus utilisés.

Jetons un coup d'œil aux utilisations de base du CSS.

1. Changer la police, la couleur et la taille

En utilisant CSS, vous pouvez facilement modifier la taille, la couleur, la police et d'autres attributs du texte sur la page. Par exemple, vous pouvez utiliser le code suivant pour modifier le style de texte d'un paragraphe :

p {
    color: blue;
    font-size: 16px;
    font-family: Arial;
}

Ce bloc de code changera la couleur du texte de tous les paragraphes en bleu, la taille du texte à 16 pixels et la police en Arial.

2. Organiser les éléments de la page

CSS vous permet également de contrôler la position et la disposition des éléments individuels sur la page. En utilisant les propriétés de positionnement et de float en CSS, vous pouvez facilement obtenir des effets de mise en page complexes. Par exemple, vous pouvez implémenter une disposition simple d'en-tête et de pied de page en utilisant le bloc de code suivant :

header {
    background-color: gray;
    height: 100px;
}

footer {
    background-color: gray;
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Ce bloc de code modifie la couleur d'arrière-plan de l'élément d'en-tête (en-tête) de la page en gris et la hauteur en 100 pixels. La couleur d'arrière-plan de l'élément de pied de page (pied de page) de la page est également modifiée en gris, la hauteur est de 50 pixels et il est positionné en bas de la page.

3. Créer des pages Web réactives

Avec la popularité des téléphones mobiles et des tablettes, les gens utilisent de plus en plus d'appareils mobiles pour naviguer sur le Web. Cela conduit également à un nouveau besoin : la conception de sites Web pouvant s’adapter à différentes tailles d’écran.

CSS implémente une conception Web réactive via la fonction de requête multimédia. En utilisant la technologie de mise en page réactive, vous pouvez facilement styliser et disposer différents appareils et largeurs d'écran.

@media screen and (max-width: 600px) {
    /* 小于600像素宽度时的样式 */
    body {
        font-size: 14px;
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    /* 在601像素至900像素宽度范围内的样式 */
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 901px) {
    /* 大于900像素宽度时的样式 */
    body {
        font-size: 18px;
    }
}

Ce bloc de code définira trois plages de largeurs de fenêtre différentes pour la page et définira différentes tailles de police dans différentes plages.

Pour résumer, CSS est un langage de style utilisé pour concevoir des pages Web. Il peut être utilisé pour modifier l'apparence, la mise en page et le comportement de chaque élément d'une page HTML. En maîtrisant CSS, vous pouvez concevoir des pages Web belles, puissantes et faciles à utiliser, rendant vos pages Web et vos sites Web plus attrayants et faciles à utiliser.

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!