Maison > Article > interface Web > Quel est le rôle des styles CSS en HTML
Quel est le rôle des styles CSS en HTML
- 藏色散人original
- 2023-02-02 10:31:272437parcourir
La fonction du style CSS en HTML est de gérer le contenu de la page et les effets de modification séparément, et différents effets de modification peuvent être ajoutés via CSS ; pour les balises HTML, l'effet de page résultant est relativement simple, bien qu'il existe des attributs de modification, mais plus la diversification des effets de page nécessite toujours l'aide de feuilles de style CSS.
Quelle est la fonction du style CSS en HTML ?
Le rôle de la feuille de style CSS en HTML
1. Le rôle de la feuille de style CSS :
Pour les balises HTML, l'effet de page résultant est relativement simple Bien qu'il y ait des modifications aux attributs, il y en a. plus La diversification des effets de page nécessite encore l'aide de feuilles de style CSS. L'utilisation de feuilles de style permet de séparer et de gérer le contenu des pages et les effets de modification (le HTML génère les pages et le contenu associé, et le CSS est utilisé pour ajouter différents effets de modification)
2 Application des feuilles de style CSS 1 (feuille de style interne) : Mettre dans 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
Format 1 :
<style type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>font-size : définir la taille de la police
font-family : définir le style de police
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>Format 2 :
Plusieurs fois, certaines balises nécessitent le même effet de style, vous pouvez donc définir le style comme une opération partagée. Tant que la balise en a besoin, vous pouvez y faire référence directement.
<style type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>Référence de la balise :
fe2921cd609aa37d6e2e3d62431c612ef22a6da9db034d9dd80eaf31ebbb9a7a
Question : Lorsqu'une balise a à la fois une utilisation de style de sélecteur et des références de style de classe, en fin de compte, quel a été le résultat ?
Les attributs des différentes parties sont fusionnés ; les attributs d'une même partie sont basés sur le style de classe
| Attribut de texte | Description |
|---|---|
| font-size | Taille de la police |
| font -family | Type de police |
| font-style | Style de police (style) |
| color | Définir ou récupérer la couleur du texte |
| text-align | Text-align |
Feuille de style CSS Paramétrage de l'attribut d'arrière-plan :
Couleur d'arrière-plan : background-color
Image d'arrière-plan : background-image
Définissez la méthode de mosaïque de l'image d'arrière-plan : background-repeat :
repeat-x tuile le long du X axis
répétez les tuiles -y le long de l'axe Y
no-repeat Utilisez l'image réelle pour occuper la position d'arrière-plan
répétez pour couvrir la page entière
Lors du chargement de l'image d'arrière-plan, vous devez utiliser url()-- -> Équivalent à la fonction src
background-image:url (informations sur le chemin de l'image)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>3.Application 2 de la feuille de style CSS (feuille de style en ligne)
3.1 Présentation : La feuille de style n'aura qu'une modification effet sur une certaine ligne de contenu, ou changer le style Le tableau est intégré dans une certaine ligne (à l'intérieur d'une certaine balise)
Format 3.2 : Traiter le style comme un attribut
<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>
Je suis le contenu du premier paragraphe
I suis le contenu du deuxième paragraphe
Je suis gros Contenu des balises
4. Application de la feuille de style CSS trois (feuille de style externe)
4.1 Présentation : La déclaration de la feuille de style n'est plus imbriquée dans le fichier html, mais placé dans un fichier CSS séparé. Dans le vrai sens du terme, le fichier html et le fichier css sont séparés indépendamment. Si le fichier html a besoin de styles, associez-les simplement.
4.2 Format : créez un fichier CSS séparé, copiez le contenu dans la balise c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 et écrivez directement la déclaration de style.
Comment les fichiers 4.3html s'associent-ils aux feuilles de style externes ? Ils sont tous placés dans 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
Méthode 1 :
<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" /> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css</title> <link href="css/外部css.css" rel="stylesheet" type="text/css" /> </head> <body> 我是段落一 <h1 >我是标题标签h1</h1> <h2 class="test5">我是标题标签h2</h2> </body> </html>
Apprentissage recommandé : "Tutoriel vidéo 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!