Maison > Article > interface Web > Comment écrire le style CSS dans la balise
Comment écrire le style CSS dans la balise
- 青灯夜游original
- 2020-12-16 17:02:258374parcourir
Méthode : écrivez simplement le style CSS directement dans l'attribut style de la balise. L'attribut style peut spécifier le style en ligne de l'élément. La syntaxe est "
élément> ;".
L'environnement d'exploitation de ce tutoriel : système windows7, version css3+html5, cette méthode convient à toutes les marques d'ordinateurs.
(Tutoriels recommandés : tutoriel html, Tutoriel vidéo CSS)
Le code de style CSS doit être enregistré dans un fichier texte de type .css, ou Placez-le dans la balise
Le style en ligne consiste à mettre le style CSS directement dans la balise dans la ligne de code, généralement dans l'attribut style de la balise. Puisque le style en ligne est directement inséré dans la balise, c'est la manière la plus directe. En même temps, c'est aussi le style le plus difficile à modifier.
[Exemple 1] Appliquez des styles en ligne CSS aux paragraphes, aux balises
, aux balises et aux balises <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>L'effet de démonstration de la page est le suivant :
Dans l'exemple ci-dessus, le style en ligne est déterminé par l'attribut style de l'élément HTML, c'est-à-dire que mettre le code CSS dans le style = "" est suffisant et plusieurs valeurs d'attribut CSS sont séparées par des points-virgules. Par exemple, dans l'exemple d'écriture de l'élément de niveau bloc de balise
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
, nous abandonnons la structure et le style HTML passés dans Écrit ensemble, c'est-à-dire . La balise de paragraphe définit la couleur d'arrière-plan sur marron (background-color: #999900) et la balise de titre
définit la couleur d'arrière-plan sur rouge (background-color: #FF6633). .
Définissez la police de la balise sur 30 pixels (font-size:30px;), définissez la hauteur et la hauteur de ligne de la balise color (background-color :#66CC99; color:#993300; height:30px; line-height:30px;), la balise définit la taille de la police en unités relatives (font-size: 2em;). Deux balises de paragraphes, bien que le contenu soit différent, utilisent le même paramètre de couleur d'arrière-plan, mais ajoutez deux fois l'attribut CSS en ligne pour définir la couleur d'arrière-plan background-color : #999900.
La balise , la balise
, la balise
sont des éléments de niveau bloc, définissent leurs propriétés CSS et le navigateur les prend en charge ; La balise est un élément en ligne, définit ses propriétés CSS et la prise en charge du navigateur. Par conséquent, quels que soient les éléments en ligne ou les éléments au niveau du bloc, les styles en ligne CSS sont valides. En bref, bien que les éléments en ligne soient simples à écrire, les défauts suivants peuvent être trouvés à travers des exemples : Chaque balise doit être stylisée en ajoutant l'attribut style.
- La différence est que dans le passé, les créateurs de pages Web mélangeaient les balises HTML et les styles. Désormais, les styles en ligne sont écrits via CSS. Dans le passé, les attributs des balises HTML étaient utilisés pour obtenir ce résultat. cet effet. Bien que les méthodes soient différentes, l'effet de style est le même : le coût de maintenance ultérieur est élevé, c'est-à-dire que lors de la modification de la page, vous devez ouvrir chaque page du site une par une et la modifier une par une, et vous ne voyez pas du tout le rôle du CSS.
- L'ajout d'autant de styles en ligne agrandira la page. Si le portail est écrit de cette manière, cela gaspillera la bande passante et le trafic du serveur.
Certaines pages Web sur Internet peuvent voir cette façon d'écrire en regardant les fichiers sources. Bien que seule une partie d'une page Web soit réalisée de cette façon, elle doit être différenciée selon. la situation :
- Si l'auteur de la page Web écrit de tels styles en ligne, le style actuel peut être rapidement modifié sans tenir compte du conflit des styles précédemment écrits
; - Si cette situation existe dans la page Web, lors de l'édition en arrière-plan, les styles sont générés via l'éditeur, ou l'arrière-plan n'est pas entièrement développé. Il est nécessaire de développer des options permettant aux éditeurs de sélectionner des styles au lieu de modifier directement les styles. couleur, épaisseur, couleur d'arrière-plan, inclinaison et autres effets via l'éditeur.
Pour plus de connaissances liées à la programmation, veuillez visiter : Apprendre la programmation ! !
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>, nous abandonnons la structure et le style HTML passés dans Écrit ensemble, c'est-à-dire . La balise de paragraphe
définit la couleur d'arrière-plan sur marron (background-color: #999900) et la balise de titre
définit la couleur d'arrière-plan sur rouge (background-color: #FF6633). .
Définissez la police de la balise sur 30 pixels (font-size:30px;), définissez la hauteur et la hauteur de ligne de la balisede paragraphes, bien que le contenu soit différent, utilisent le même paramètre de couleur d'arrière-plan, mais ajoutez deux fois l'attribut CSS en ligne pour définir la couleur d'arrière-plan background-color : #999900.
La balise, la balise
, la balise
- La différence est que dans le passé, les créateurs de pages Web mélangeaient les balises HTML et les styles. Désormais, les styles en ligne sont écrits via CSS. Dans le passé, les attributs des balises HTML étaient utilisés pour obtenir ce résultat. cet effet. Bien que les méthodes soient différentes, l'effet de style est le même : le coût de maintenance ultérieur est élevé, c'est-à-dire que lors de la modification de la page, vous devez ouvrir chaque page du site une par une et la modifier une par une, et vous ne voyez pas du tout le rôle du CSS.
- L'ajout d'autant de styles en ligne agrandira la page. Si le portail est écrit de cette manière, cela gaspillera la bande passante et le trafic du serveur.
- Si l'auteur de la page Web écrit de tels styles en ligne, le style actuel peut être rapidement modifié sans tenir compte du conflit des styles précédemment écrits ;
- Si cette situation existe dans la page Web, lors de l'édition en arrière-plan, les styles sont générés via l'éditeur, ou l'arrière-plan n'est pas entièrement développé. Il est nécessaire de développer des options permettant aux éditeurs de sélectionner des styles au lieu de modifier directement les styles. couleur, épaisseur, couleur d'arrière-plan, inclinaison et autres effets via l'éditeur.
Apprendre la programmation ! !
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!