Tutoriel de base CSS?: Comment introduire CSS
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>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</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">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
</div>
</body>
</html>
