Maison > Article > interface Web > Quels types de styles CSS existe-t-il ? Résumé de trois méthodes de feuille de style CSS (avec code)

Quels types de styles CSS existe-t-il ? Résumé de trois méthodes de feuille de style CSS (avec code)

不言original: 2018-08-02 16:52:098776parcourir

Quels sont les types de styles CSS ? Les formes d'insertion de code de style CSS peuvent essentiellement être divisées en trois types suivants : en ligne, intégré et externe. Ces trois styles ont des priorités : en ligne > contenu et code spécifiques des trois types de styles CSS.

Remarque : Embedded>Le style externe a un principe : la position du style CSS intégré doit être derrière le style externe. Par exemple, dans l'éditeur de code de droite, le code f87a5964fcebb93d98ebca11ba9d357b se trouve devant le code 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 ; code (en fait, ceci est également écrit pendant le développement). Les amis intéressés peuvent l’essayer, inverser leur ordre et voir si leurs priorités changent.

En fait, en général, c'est le principe de proximité (plus on est proche de l'élément à paramétrer, plus la priorité est élevée).

Mais notez que la priorité résumée ci-dessus a un principe : les styles CSS dans les feuilles de style en ligne, intégrées et externes ont le même poids.

1. Feuille de style CSS en ligne

La feuille de style CSS consiste à écrire du code CSS directement dans la balise HTML existante, comme le code suivant :

<p style="color:red">这里文字是红色。</p>

Attention à l'écrire dans la balise de début de l'élément. L'écriture suivante est erronée :

<p>这里文字是红色。</p style="color:red">

Et le code de style css doit être écrit entre guillemets doubles s'il y en a. sont plus Plusieurs paramètres de code de style CSS peuvent être écrits ensemble et séparés par des points-virgules. Le code suivant :

<p style="color:red；font-size:12px">这里文字是红色。</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

2. Feuille de style CSS intégrée

Le style CSS intégré signifie que vous pouvez écrire le code de style CSS dans < ;style type="text/css">531ac245ce3e4fe3d50054a55f265927 entre les balises . Par exemple, le code suivant définit le texte des trois balises 45a2772a6b6107b401db3c9b82c049c2 en rouge :

<style type="text/css">
span{
color:red;
}
</style>

Le style CSS intégré doit être écrit entre c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927, et en général Le style CSS intégré est écrit entre 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1. Comme le code dans l'éditeur de droite.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</html>

3. feuille de style CSS externe

Le style CSS externe (également appelé style externe) consiste à écrire le code CSS dans un fichier externe séparé, ce CSS Le fichier de style a ".css" comme extension et la balise 2cdf5bf648cf2f33323966d7f58a7f3f est utilisée dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e (et non dans la balise c9ccee2e6ea535a969eb3f532ad9fe89) pour lier le fichier de style CSS au fichier HTML, comme indiqué. ci-dessous Code :

2a70f08f0d44bd4c2f68451177d09813base.css

" rel="stylesheet" type="text/css" />

Remarque :

1. Le nom du fichier de style CSS est nommé avec des lettres anglaises significatives, telles que main.css.

2. rel="stylesheet" type="text/css" est une méthode d'écriture fixe qui ne peut pas être modifiée.

3. La position de la balise 2cdf5bf648cf2f33323966d7f58a7f3f est généralement écrite dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e

index.html

<!DOCTYPE HTML>
<html>
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

style.css

span{
   color:red;
   font-size:20px;
}

Articles Liés

Voir plus