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>习近平心中的互联网</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.

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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Tutoriel de base CSS : Comment introduire CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]