简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Des didacticiels CSS simples et faciles à comprendre pour vous apprendre à créer un cadre de page Web unique

PHPz
Libérer： 2024-01-16 10:14:06
original
1262 Les gens l'ont consulté

Des didacticiels CSS simples et faciles à comprendre pour vous apprendre à créer un cadre de page Web unique

Tutoriel CSS simple et facile à comprendre pour vous apprendre à créer un cadre de page Web unique

CSS (Cascading Style Sheets) est un langage de balisage utilisé pour définir le style et la mise en page des pages Web. Grâce à CSS, nous pouvons modifier l'apparence des pages Web telles que les polices, les couleurs, les tailles, l'espacement, etc., et contrôler la position et la disposition des éléments de la page Web. Ce didacticiel vous présentera la syntaxe CSS de base et les attributs de style couramment utilisés, et fournira des exemples de code spécifiques pour vous aider à maîtriser rapidement l'utilisation de CSS pour créer un cadre de page Web unique.

  1. Syntaxe de base CSS

CSS utilise des sélecteurs et des déclarations pour définir des styles. Les sélecteurs sont utilisés pour sélectionner des éléments HTML auxquels appliquer des styles, tandis que les déclarations sont constituées d'un ou plusieurs attributs et de leurs valeurs correspondantes. Voici un exemple simple de règle CSS : 

h1 {
    color: red;
    font-size: 24px;
    font-weight: bold;
}
Copier après la connexion

Le sélecteur dans le code ci-dessus est "h1", ce qui signifie que l'élément auquel le style est appliqué est la balise <h1>. La partie déclaration entre accolades contient trois propriétés et leurs valeurs correspondantes, à savoir "color", "font-size" et "font-weight". Ces propriétés définissent la couleur de la police, la taille et l'épaisseur de l'élément.

  1. Propriétés de style CSS

Voici quelques propriétés de style CSS couramment utilisées, ainsi que leurs fonctions et leur utilisation.

2.1 Attributs de police

  • font-family : utilisé pour définir la famille de polices (telle que "Arial", "宋体", etc.).
  • font-size : utilisé pour définir la taille de la police (l'unité peut être px, em, rem, etc.).
  • font-weight : utilisé pour définir l'épaisseur de la police (peut être "normal", "gras", etc.).

2.2 Attribut de couleur

  • color : utilisé pour définir la couleur du texte (vous pouvez utiliser le nom de la couleur, le code HEX, la valeur RVB ou RGBA, etc.).
  • background-color : utilisé pour définir la couleur d'arrière-plan de l'élément.

2.3 Attribut du modèle de boîte

  • width : utilisé pour définir la largeur de l'élément.
  • hauteur : utilisé pour définir la hauteur de l'élément.
  • padding : utilisé pour définir la taille du remplissage interne de l'élément.
  • margin : utilisé pour définir la taille de la marge dans les quatre directions de l'élément.
  • border : utilisé pour définir le style, la largeur et la couleur de la bordure de l'élément.

2.4 Attribut de positionnement

  • position : utilisé pour définir la méthode de positionnement de l'élément. Les valeurs courantes sont "relatif" (positionnement relatif), "absolu" (positionnement absolu) et "fixe" (positionnement fixe). ).
  • haut, bas, gauche, droite : utilisé pour définir la distance haut, bas, gauche et droite entre un élément et son élément parent positionné.
  1. Exemple : Créer un cadre de page Web

Un exemple est donné ci-dessous pour montrer comment utiliser CSS pour créer un cadre de page Web simple.

Code HTML : 

<!DOCTYPE html>
<html>
<head>
    <title>CSS Tutorial</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to CSS Tutorial</h1>
    </header>

    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>

    <section>
        <h2>About Us</h2>
        <p>This is a CSS tutorial to help you learn CSS and create unique web page layouts.</p>
    </section>

    <footer>
        <p>© 2021 CSS Tutorial. All rights reserved.</p>
    </footer>
</body>
</html>
Copier après la connexion

Code CSS (style.css) : 

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 头部样式 */
header {
    background-color: #333;
    padding: 20px;
    color: #fff;
}

header h1 {
    font-size: 30px;
}

/* 导航栏样式 */
nav {
    background-color: #f2f2f2;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
    font-size: 18px;
}

/* 主内容样式 */
section {
    padding: 20px;
    background-color: #fff;
}

section h2 {
    color: #333;
}

section p {
    color: #666;
}

/* 页脚样式 */
footer {
    background-color: #333;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
Copier après la connexion

Dans l'exemple ci-dessus, nous obtenons différents effets d'apparence en ajoutant différents styles CSS à différents éléments HTML. En définissant les styles globaux, les styles d'en-tête, les styles de barre de navigation, les styles de contenu principal et les styles de pied de page, nous créons un cadre de page Web simple.

En utilisation réelle, vous pouvez modifier les attributs de style CSS et ajuster la mise en page et l'apparence de la page Web en fonction de vos propres besoins.

Grâce à ce didacticiel, vous avez compris la syntaxe de base et les attributs de style courants de CSS, et avez appris à utiliser CSS pour créer un cadre de page Web simple. J'espère que ce tutoriel vous a été utile et vous a permis de créer des pages Web uniques à l'aide de CSS. Je vous souhaite plus de succès avec CSS !

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!

Étiquettes associées：
css教程 简单 unique
source：php.cn
Article précédent：Concevoir un cadre complet de mise en page de pages Web à l'aide de CSS Article suivant：Analyser et appliquer des frameworks CSS réactifs
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Expression régulière pour faire correspondre les mots J'ai un script dans lequel j'essaie de faire correspondre les nouveaux noms de travaux ave...
Depuis 2024-04-06 21:24:04
0
1
606
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！