Embedded
Introduit les styles CSS via la balise <style>
Format de grammaire : <style type = "text/css"></style>
Conseils : Le style CSS dans <style> page .
Dans une même page Web, la balise <style> peut apparaître plusieurs fois.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> h1{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> <style type="text/css"> p{ color:blue; } </style> </html>
Outline
Introduire un fichier CSS externe via la balise <link> dans ce cas, le code CSS commun peut être partagé par plusieurs pages Web.
<link rel = “stylesheet” type = “text/css” href = “css/public.css” />
<link>Attributs communs des balises
rel : C'est-à-dire quel type de fichier est importé. Valeur : feuille de style
type : type de contenu.
href : L'adresse du fichier CSS importé.
Remarque :
<link> est placée dans la balise <head>
La même page Web peut utiliser plusieurs <link> pour créer un lien vers plusieurs fichiers de style externes.
style en ligne (principalement utilisé Pour le style des éléments de contrôle JS)
Chaque balise HTML a des attributs communs : classe, identifiant, titre, style.
La valeur de l'attribut style dans la balise HTML est exactement la même que le style en CSS.
Remarque :
Dans les styles en ligne, vous ne pouvez pas écrire trop de code CSS
Dans le style en ligne, plusieurs attributs CSS ne peuvent pas être encapsulés, c'est-à-dire qu'ils peuvent être écrits sur une seule ligne.
Les styles en ligne ont la priorité la plus élevée, encore plus élevée que les sélecteurs d'ID.
Dans l'exemple de priorité précédent, nous avons utilisé cette méthode d'introduction
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> h1{ color:green; } .hclass{ color:bule; } #hid{ color:black; } </style> </head> <body> <div> <h1 class="hclass" id="hid" style="color:red">习近平心中的互联网</h1> </div> </body> </html>