Maison >interface Web >Questions et réponses frontales >Comment utiliser les CSS

Comment utiliser les CSS

PHPzoriginal: 2023-04-23 10:09:561012parcourir

CSS est une technologie frontale très importante. Elle nous permet d'afficher visuellement du contenu Web, offrant ainsi à nos utilisateurs une plateforme interactive belle et facile à utiliser. Dans cet article, nous aborderons en détail l’utilisation du CSS afin que vous puissiez facilement apprendre à utiliser CSS pour embellir les pages Web.

Présentation de CSS

Tout d'abord, voyons comment ajouter du CSS à une page Web HTML. Afin d'appliquer du CSS à vos fichiers HTML, vous pouvez utiliser du CSS interne ou du CSS externe.

CSS interne : vous pouvez ajouter du code CSS en insérant la balise Par exemple :

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        body {
            background-color: #f5f5f5;
        }
        p {
            color: #333;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>欢迎来到我的网站！</p>
</body>
</html>

Dans cet exemple, nous définissons la couleur d'arrière-plan de l'élément body ainsi que la couleur et la taille de la police de l'élément p.

CSS externe : vous pouvez également mettre le code CSS dans un fichier externe et le référencer dans la page HTML via la balise de lien. Par exemple :

Dans un fichier appelé styles.css, on peut définir les styles comme suit :

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

Référencer la feuille de style en HTML via la balise link :

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>欢迎来到我的网站！</p>
</body>
</html>

Sélecteur CSS

Les sélecteurs CSS sont une notation pour sélectionner éléments de pages Web. Par exemple, pour sélectionner tous les p éléments et définir leur couleur de police sur rouge, vous écrivez :

p {
    color: red;
}

Dans cet exemple, le sélecteur est p, ce qui signifie sélectionner tous les p éléments. Vous pouvez également sélectionner des éléments en fonction du nom de classe, de l'ID, de la relation, etc. Par exemple :

/* 选择所有具有class为"active"的元素*/
.active {
    color: blue;
}

/* 选择所有ID为"header"的元素*/
#header {
    background-color: pink;
}

/* 选择p元素的子元素中的第一个元素*/
p:first-child {
    font-weight: bold;
}

Propriétés de style

Il existe de nombreuses propriétés en CSS qui peuvent être utilisées pour définir le style d'un élément. Certaines des propriétés les plus couramment utilisées sont répertoriées ci-dessous :

color : couleur du texte
background-color : couleur d'arrière-plan
font-size : taille de la police
font-family : police
text-align : alignement du texte
font-weight : police bold
border : bordure d'élément

Par exemple, pour définir la couleur de fond d'un élément sur bleu, vous pouvez écrire comme ceci :

background-color: blue;

Modèle de boîte CSS

Le modèle de boîte est a Méthode utilisée pour présenter un élément, qui comprend le contenu de l'élément, sa bordure intérieure, sa bordure extérieure et son remplissage. Par défaut, chaque élément est disposé selon le modèle de boîte.

Les composants du modèle de boîte ressemblent à ceci :

Contenu : le contenu réel de l'élément, tel qu'un texte ou une image
Padding : situé entre le contenu et la bordure, qui peut être défini à l'aide de l'attribut padding
Bordure : située à l'intérieur de la bordure. Entre la marge et la marge, vous pouvez utiliser l'attribut border pour la définir.
Marge : elle se situe entre l'élément et les éléments environnants et peut être définie à l'aide de l'attribut margin.

Vous pouvez modifiez la taille des composants du modèle de boîte des manières suivantes :

/* 修改内边距 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;

/* 修改边框 */
border-width: 2px;
border-color: red;

/* 修改外边距 */
margin: 20px;

Responsive Design

Enfin, parlons de responsive design. Le responsive design est une méthode de conception qui permet à un site Web de s'adapter aux tailles d'écran de différents appareils pour offrir aux utilisateurs une meilleure expérience.

En utilisant les requêtes multimédias CSS, nous pouvons définir différents styles pour différentes tailles d'écran. Par exemple :

/* 在窗口宽度小于600px时，p元素字体大小设置为14px */
@media(max-width: 600px) {
    p {
        font-size: 14px;
    }
}

Dans cet exemple, nous définissons une requête multimédia en utilisant la syntaxe de requête @media, qui appliquera des styles lorsque la largeur de la fenêtre est inférieure à 600 px. De cette façon, nous pouvons optimiser notre site Web pour les appareils mobiles.

Conclusion

Comment utiliser correctement CSS est une compétence que tout développeur front-end doit maîtriser. Dans cet article, nous avons expliqué comment introduire CSS, comment utiliser les sélecteurs, les propriétés de style et le modèle de boîte CSS. Nous avons également exploré le design réactif et démontré comment utiliser les requêtes @media pour cibler les styles pour différents appareils. Vous pouvez désormais commencer à utiliser CSS pour embellir votre site Web et améliorer l'expérience utilisateur.

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 选择器样式表外边距内边距 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 annuler le style CSSArticle suivant：Comment annuler le style CSS

Articles Liés

Voir plus