Quel est le rôle des styles CSS en HTML-Questions et réponses frontales-php.cn

Quel est le rôle des styles CSS en HTML

藏色散人

Libérer： 2023-02-02 10:31:27

original

2490 Les gens l'ont consulté

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.

Quel est le rôle des styles CSS en HTML

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

Format 1 :

<style  type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Référence de la balise :

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>

Copier après la connexion

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..."></结束标签>

Copier après la connexion

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 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

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>

Copier après la connexion

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!