Comment écrire le style CSS dans la balise
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 id="行内元素-h-nbsp-标题元素">行内元素，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>Copier après la connexionL'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="max-width:90%">行内元素，div 块级元素 </div>
Copier après la connexion, 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 ! !
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!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 id="行内元素-h-nbsp-标题元素">行内元素，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>
<div style="max-width:90%">行内元素，div 块级元素 </div>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
