Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour contrôler les pages

Comment utiliser CSS pour contrôler les pages

王林avant: 2020-06-05 09:14:423556parcourir

Utilisez CSS pour contrôler entièrement la page. Il existe quatre méthodes principales : le style en ligne, le style en ligne, le style de lien et le style d'importation :

1. Style en ligne

1. Caractéristiques : Le plus direct.

2. Comment utiliser

Utilisez directement l'attribut style dans la balise HTML et écrivez-y le code CSS.

3. Exemples

<html>
<head>
<title>页面标题</title>
   </head>
<body>
	<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
	<p style="color:#000000; font-style:italic;">正文内容2</p>
	<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>

Comment utiliser CSS pour contrôler les pages

4. Évaluation

Le style en ligne est le moyen le plus simple d'utiliser CSS, mais en raison de la nécessité de. each Si une balise définit l'attribut de style, le coût de maintenance ultérieur est toujours très élevé et la page Web est facile à surcharger, ce n'est donc pas recommandé.

2. Embedded

1. Introduction

La feuille de style intégrée consiste à écrire du CSS dans

avec les balises

2. Exemple

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
	color:#6600CC;
	text-decoration:underline;
	font-weight:bold;
	font-size:25px;
}
-->
</style>
   </head>
<body>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<p>紫色、粗体、下划线、25px的效果2</p>
	<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

Comment utiliser CSS pour contrôler les pages

3. Analyse

(1) Comme le montre l'exemple, tous les codes CSS le composent. est concentré dans la même zone, ce qui facilite la maintenance ultérieure et la page est considérablement allégée.

(2) Cependant, s'il y a plusieurs pages et que vous souhaitez utiliser le même style pour les balises

sur différentes pages, le style en ligne est un peu gênant et le coût de maintenance n'est pas faible.

(3) Par conséquent, inline ne convient que pour définir des styles séparés pour des pages spéciales.

3. Style de lien

1. Statut

Le style CSS de lien est la méthode la plus fréquemment utilisée et la plus pratique.

2. Méthode

Ajouter l'instruction entre les balises

et rel="feuille de style">.

3. Exemple

(1) Fichier CSS : 1.css

h2{
	color:#0000FF;
}
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:20px;
}

(2) Framework HTML

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
   </head>
<body>
	<h2>CSS标题1</h2>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<h2>CSS标题2</h2>
	<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>

Comment utiliser CSS pour contrôler les pages

4. Avantages

Sépare complètement le code HTML du cadre de page et le code CSS artistique, ce qui rend la pré-production et la post-maintenance très pratiques. Un fichier CSS peut être lié à plusieurs fichiers HTML.

4. Type d'importation

1. La fonction est similaire au type de lien, mais il existe de légères différences dans la syntaxe et les méthodes de fonctionnement.

2. Comparaison avec le type de lien

(1) La feuille de style importée à l'aide de la méthode d'importation sera importée dans le fichier HTML lorsque le fichier HTML est initialisé, dans le cadre du fichier, similaire au contenu du fichier HTML. Effet intégré ;

(2) Les fichiers CSS liés sont introduits sous forme de liens lorsque les balises HTML nécessitent un formatage.

3. Plusieurs instructions @import couramment utilisées

Vous pouvez en choisir une et la placer entre les balises

@import url(1.css);

@import url('1.css');

@import url("1.css");

@import 1.css;

@import '1.css';

@import "1.css";

4. >

(1) La plus grande utilisation de l'importation de feuilles de style est qu'un fichier HTML peut importer plusieurs feuilles de style

(2) Non seulement dans les formats

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：L'ombre de bordure CSS3 implémente 2 effets d'affichage de liste d'images - analyse de cas (exemple de code)Article suivant：L'ombre de bordure CSS3 implémente 2 effets d'affichage de liste d'images - analyse de cas (exemple de code)

Articles Liés

Voir plus