recherche

Maison >interface Web >Questions et réponses frontales >Définir les propriétés CSS

Définir les propriétés CSS

王林
王林original
2023-05-27 13:33:081205parcourir

CSS (Cascading Style Sheets) est un langage utilisé pour contrôler le style des pages Web. Grâce à lui, vous pouvez définir la police, la couleur, la bordure, la mise en page et d'autres propriétés de la page Web. Lors du développement d'une page Web, la définition des propriétés CSS est une étape cruciale. Cet article présentera en détail comment définir les propriétés CSS, ainsi que les valeurs et méthodes de propriété couramment utilisées.

1. Comment définir les propriétés CSS

  1. Style en ligne : Ajoutez l'attribut style dans la balise HTML pour définir les propriétés CSS. Par exemple : 
<p style="color: red; font-size: 16px;">Hello, world!</p>
  1. Feuille de style interne : ajoutez la balise de style dans l'en-tête HTML et définissez-y les propriétés CSS. Par exemple : 
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
  1. Feuille de style externe : placez le code CSS dans un fichier de feuille de style séparé, puis référencez-le en HTML via la balise de lien. Par exemple : 
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Hello, world!</p>
</body>

2. Attributs CSS couramment utilisés et leurs valeurs d'attribut

  1. Attribut de police (police)
    2. # 🎜🎜#
    font-family : Définissez le nom de la police, qui peut être le nom d'une police spécifique (telle que "Helvetica") ou une police générale (telle que "serif", " sans-serif", "monospace" attendez).
  • font-size : définissez la taille de la police en unités telles que les pixels (px), le pourcentage (%), les em (multiples de la taille de police actuelle).
  • font-style : Définissez le style de police, qui peut être "normal", "italique" ou "oblique".
  • font-weight : Définissez le poids de la police, qui peut être un nombre (comme 400) ou un mot-clé (comme "normal", "gras").
    Color attribut (color)
    color : Définissez la couleur du texte, vous pouvez utiliser le nom de couleur (tel que "rouge", "vert", "bleu", etc.) ou valeurs RVB, valeurs RGBA (telles que "rgb(255, 0, 0)", "rgba(255, 0, 0 , 0,5)"), etc.
    Attribut d'arrière-plan (background)
    background-color : Définissez la couleur d'arrière-plan de l'élément, vous peut utiliser le nom de la couleur ou la valeur RVB, la valeur RVBA, etc.
  • background-image : Définissez l'image d'arrière-plan de l'élément, vous pouvez utiliser une image locale ou une adresse d'image distante.
  • background-repeat : Définissez le mode de répétition de l'image d'arrière-plan, qui peut être "repeat" (répétition), "repeat-x" (répétition horizontale), "repeat-y" (répétition verticale) ou "no -repeat" (ne pas répéter).
  • background-position : Définissez la position de l'image d'arrière-plan, vous pouvez utiliser des mots-clés (tels que "en haut à gauche", "centre", "en bas à droite") ou des valeurs de pixels, des valeurs en pourcentage, etc.
    Border attribut (border)
    border-width : Définissez la largeur de la bordure, vous pouvez utilisez les pixels, les em et d'autres unités.
  • border-style : Définissez le style de bordure, qui peut être "solide" (ligne continue), "pointillé" (ligne pointillée), "tiret" (ligne pointillée), etc.
  • border-color : Définissez la couleur de la bordure, vous pouvez utiliser le nom de la couleur ou la valeur RVB, la valeur RVBA, etc.
    Attribut Size (largeur, hauteur)
    width : Définissez la largeur de l'élément, vous pouvez utilisez des pixels, des pourcentages et d'autres unités.
  • height : Définissez la hauteur de l'élément en pixels, pourcentages et autres unités.
    Text-align : Définissez l'alignement horizontal du texte, qui peut être "gauche" (aligné à gauche), "droit" (aligné à droite), " centre" (aligné au centre), etc.
  1. text-decoration : Définissez l'effet de décoration du texte, qui peut être "aucun" (pas de décoration), "souligné" (souligné), "line-through" (barré), etc.
    text-transform : Définissez la méthode de conversion de casse du texte, qui peut être "majuscule" (majuscule), "minuscule" (minuscule), "capitalize" (première lettre en majuscule), etc.
  • Box attribut (box)
    margin : Définit la marge de l'élément (entre l'élément et distance des autres éléments), qui peut être en unités de pixels, pourcentages, etc.
  1. padding : Définissez la marge intérieure de l'élément (la distance entre le contenu de l'élément et la bordure), qui peut être en pixels, pourcentages et autres unités.
    display : Définissez le mode d'affichage de l'élément, qui peut être "block" (élément de niveau bloc), "inline" (élément en ligne) ou "inline-block" (élément de niveau bloc en ligne ), etc.
  • 3. Résumé
  • Le paramétrage des propriétés CSS est une étape cruciale dans le développement web. Maîtrisant l'utilisation des propriétés CSS, nous pouvons concevoir efficacement des pages web. qui sont beaux, faciles à lire et à utiliser. Cet article présente les propriétés CSS couramment utilisées et leurs valeurs de propriété, et explique en détail trois méthodes de définition des propriétés CSS. J'espère que les lecteurs pourront utiliser CSS de manière flexible dans le développement Web afin de créer des œuvres Web plus remarquables.

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!

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：style css supprimer le styleArticle suivant：style css supprimer le style

Articles Liés

Voir plus