Apprenez le développement front-end à partir de zéro et créez votre propre monde de pages Web (3) - CSS Basics

1. Introduction aux CSS

CSS (feuilles de style en cascade), feuilles de style en cascade, le langage standard de performance dans les normes WEB, le langage standard de performance contrôle principalement l'affichage des informations de la page Web dans la page Web, et c'est simplement comment modifier le style d'affichage des informations de la page Web .

Deux, la syntaxe CSS

Syntaxe CSS : sélecteur {attribut : valeur de l'attribut ; attribut : valeur de l'attribut ;}

Exemple de syntaxe CSS

Le sélecteur indique l'objet pour définir le style, qui peut être l'élément lui-même, ou un type d'élément ou un élément avec un nom spécifié.

Attribute : l'attribut est l'attribut du sélecteur spécifié, c'est le noyau de css, il y a plus de 150 attributs dans css2
Valeur d'attribut : la valeur d'attribut comprend la valeur d'attribut statutaire et la valeur commune plus l'unité, telle que 25 px, ou la valeur de couleur, etc.

Explication :
1) Chaque style CSS se compose de deux parties, à savoir le sélecteur et l'instruction, et l'instruction est divisée en attributs et valeurs d'attribut ;
2) Les attributs doivent être placés entre accolades, et les attributs et les valeurs d'attribut sont relié aux deux-points.
3) Chaque instruction se termine par un point-virgule.
4) Lorsqu'un attribut a plusieurs valeurs d'attribut, les valeurs d'attribut et les valeurs d'attribut ne sont pas dans un ordre particulier.
5) Lors du processus d'écriture des styles, les opérations telles que les espaces et les sauts de ligne n'affectent pas l'affichage des attributs.

Troisièmement, la création de styles (styles internes, styles externes, styles en ligne) et la différence entre les deux types de feuilles de style externes importées

1. Styles internes

grammaire:

<style type="text/css">
/*css语句*/
</style>

Remarque : Lorsque vous utilisez la balise style pour créer un style, il est préférable d'écrire la balise dans <head></head>;

2. Styles externes

Méthode 1 : Créer une feuille de style externe :

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
Remarque :
Lorsque vous utilisez l'élément de lien pour importer une feuille de style externe, l'élément doit être écrit en tête du document, c'est-à-dire <head>entre </head>et .

rel (relation) : permet de définir l'association du document, représentant la feuille de style associée ;
type : définit le type du document ;

Méthode 2 : Importer une feuille de style externe

<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>

Remarque : Il n'y a pas d'espace entre @ et import et il n'y a pas d'espace entre url et parenthèses ; la fin doit se terminer par un point-virgule ;

3. Style en ligne (style interligne, style en ligne, style intégré)

grammaire:<标签 style="属性：属性值;属性:属性值;"></标签>

4. La différence entre les deux types de lien de feuille de style externe et d'importation

Différence 1 : Différence essentielle : le lien est une balise XHTML, et @import est complètement un moyen fourni par CSS.
Différence 2 : La différence d'ordre de chargement : lorsqu'une page est chargée (c'est-à-dire lorsqu'elle est parcourue par le spectateur), le CSS référencé par le lien sera chargé en même temps, tandis que le CSS référencé par @import attendra jusqu'à ce que la page soit complètement téléchargée avant d'être chargée. . Ainsi, parfois, lors de la navigation sur une page chargée avec CSS par @import, il n'y aura pas de style (c'est-à-dire de scintillement), ce qui est assez évident lorsque la vitesse du réseau est lente.
Différence 3 : La différence de compatibilité : @import est proposé par CSS2.1, donc les anciens navigateurs ne le supportent pas. @import ne peut être reconnu que par IE5 ou supérieur, mais la balise de lien n'a pas ce problème.
Différence 4 : La différence lors de l'utilisation de dom (document object model document object model) pour contrôler le style : lors de l'utilisation de javascript pour contrôler le dom afin de modifier le style, seule la balise de lien peut être utilisée, car @import n'est pas contrôlable par dom.

Cinq, la priorité de la feuille de style

Les feuilles de style en ligne ont la priorité la plus élevée
La feuille de style interne est liée à la priorité et à l'ordre d'écriture de la feuille de style externe, et la priorité d'écriture ultérieure est plus élevée.

Six, sélecteur CSS (sélecteur)

Il existe une dizaine de sélecteurs couramment utilisés :
1. Sélecteur de type

    Syntaxe : nom de l'élément { attribut : valeur de l'attribut ; }
    Explication :
    a) Le sélecteur d'élément utilise le type d'objet du langage du document comme sélecteur, c'est-à-dire qu'il utilise le nom de l'élément dans la structure comme sélecteur. Tels que body, div, p, img, em, strong, span...etc.
    b) Tous les éléments de la page peuvent être utilisés comme sélecteurs ;
utilisation :

Si vous voulez changer le style par défaut d'un élément, vous pouvez utiliser le sélecteur de type ;
(ex : changer un style div, p, h1)
Lors de l'unification de l'effet d'affichage d'un élément dans le document, vous pouvez utiliser le sélecteur de type
(par exemple : changer le style de tous les p paragraphes du document)

2. sélecteur d'identifiant

Syntaxe : #id nom { attribut : valeur de l'attribut ; } Le sélecteur d'ID est la seule
description :

Lorsque nous utilisons le sélecteur d'identifiant, nous devons définir un attribut d'identifiant pour chaque élément
tel que :<div id="div1"></div>
Le format grammatical du sélecteur d'identifiant est "#" suivi d'un nom d'identifiant personnalisé
tel que :#box{width:300px; height:300px;}
Le nom anglais doit être utilisé lors de la dénomination, et les mots-clés ne peuvent pas être utilisés : (toutes les balises et tous les attributs sont des mots-clés)
tels que : balise principale
Un nom id ne peut correspondre qu'à un objet élément spécifique dans le document, car id ne peut définir qu'un objet élément unique dans la page.
Meilleure utilisation pour : créer la structure périphérique d'une page Web.

3. sélecteur de classe

Syntaxe : .nom de la classe {attribut : valeur de l'attribut ;}
Description :

Lorsque nous utilisons le sélecteur de classe, nous devons d'abord définir un nom de classe pour chaque élément
Le format grammatical du sélecteur de classe est : " tel que : <div class="top"></div>"

Utilisation : Le sélecteur de classe est plus adapté pour définir une classe de styles ;

4. Caractères génériques

    Syntaxe : { Attribut : valeur de l'attribut ; }
    Explication : La formulation du sélecteur de caractère générique est *que sa signification est tous les éléments.
    Utilisation : Couramment utilisé pour réinitialiser les styles.

5.
Syntaxe du sélecteur de groupe : sélecteur 1, sélecteur 2, sélecteur 3 {attribut : valeur de l'attribut ;}
description séparée par des virgules : lorsqu'il y a plusieurs sélecteurs appliquant le même style, vous pouvez utiliser "," pour le sélecteur Séparé, fusionné dans un groupe.

6. Inclure le sélecteur
    Syntaxe : sélecteur 1 sélecteur 2{attribut : valeur de l'attribut ;} séparés par des espaces
    Explication : le sélecteur 1 et le sélecteur 2 sont séparés par des espaces, ce qui signifie que tous les sélecteurs 2 contenus dans le sélecteur 1 ;
    utilisation : lorsque mon élément a un parent élément, je veux changer mon propre style, qui peut être résolu directement en incluant un sélecteur sans ajouter de sélecteur.

7. Sélecteur de pseudo-classe (le sélecteur qui a été défini dans le sélecteur de pseudo-classe CSS ne peut pas être nommé par hasard)

Syntaxe : généralement <a>utilisée avec

a:link{attribute : valeur de l'attribut ;} l'état initial de l'hyperlien ;
a:visited{attribute : valeur de l'attribut ;}L'état de l'hyperlien après avoir été visité ;
a:hover {attribut : valeur de l'attribut ;} survol de la souris, c'est-à-dire l'état lorsque la souris traverse l'hyperlien ;
a:actif{attribut : valeur de l'attribut ;}L'état lorsque le lien hypertexte est activé, c'est-à-dire l'état du lien hypertexte lorsque la souris est enfoncée ; laissez-les respecter un principe d'amour/haine, c'est-à-dire Lien-visité-survol -actif.

Descriptif :

Lorsque ces 4 sélecteurs de pseudo-classes d'hyperliens sont utilisés en combinaison, il convient de prêter attention à leur ordre. L'ordre normal est :
a:link,a:visited,a:hover,a:active.Parfois, le mauvais ordre fera le style de l'échec du lien hypertexte ;
Afin de simplifier le code, la même instruction dans le sélecteur de pseudo-classe peut être mise en avant dans le sélecteur a ;
par exemple : a{color:red;} a:hover{color:green;} signifie que les trois états de les hyperliens sont les mêmes, seule la couleur change au passage de la souris.

8. Les sélecteurs de pseudo-objet (pseudo-élément)
sont utilisés pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles (tels que : avant/: après)

Le double-virgule (::) introduit dans CSS3 n'est pas supporté par IE8 et ci-dessous, tous les navigateurs supportent l'utilisation de double-virgules dans les pseudo-éléments. Certains pseudo-éléments tels que ::backdrop n'acceptent que l'utilisation de doubles-points.

Si vous souhaitez être compatible avec les navigateurs de versions inférieures, vous pouvez utiliser des deux-points simples, et vous devez toujours utiliser des deux-points doubles sur les pseudo-éléments qui spécifient des deux-points doubles.

Grammaire : Il peut être compris comme la même méthode d'écriture deux-points que le sélecteur de pseudo-classe

first-letter/:first-letter : Définit le style du premier caractère dans l'objet.
first-line/:first-line : stylise la première ligne de l'objet.
before/:before : définit le contenu qui se produit avant l'objet (selon la structure logique de l'arborescence d'objets). À utiliser avec l'attribut content
after/:after : définit ce qui se passe après l'objet (selon la structure logique de l'arborescence d'objets). À utiliser avec l'attribut content
:selection : définit la couleur de l'objet lorsqu'il est sélectionné.
::placeholder:::-webkit-input-placeholder/::-moz-placeholder/:-ms-input-placeholder Définir le texte de l'espace réservé d'un élément de formulaire

Sept, le poids des sélecteurs CSS

En css, quatre chiffres sont utilisés pour représenter le poids, et l'expression du poids est la suivante : 0, 0, 0, 0

Les sélecteurs de type ont un poids de 0001
Le sélecteur de classe a un poids de 0010
Le sélecteur d'identifiant a un poids de 0100
Les sous-sélecteur ont un poids de 0000
Les sélecteurs d'attributs ont un poids de 0010
Les sélecteurs de pseudo-classe ont un poids de 0010
Les sélecteurs de pseudo-éléments ont un poids de 0010
Pondérations contenant des sélecteurs : la somme des pondérations contenant des sélecteurs
Les styles en ligne ont un poids de 1000
Les styles hérités ont un poids de 0000

Lorsque les paramètres de style de différents sélecteurs sont en conflit, le style de ++sélecteur de poids élevé++ remplacera le style de ++sélecteur de faible poids++.

Par exemple : le poids de b .demo est 1+10=11, et le poids de .demo est 10, donc le style de .demo échoue souvent

Pour les sélecteurs de même poids, le style suit le principe de proximité : quel que soit le dernier sélecteur défini, le style de sélecteur sera utilisé.

(Remarque : il s'agit de l'ordre dans lequel le sélecteur est défini dans le style css, et non de l'ordre dans lequel il est utilisé en html)

8. Notes sur la page

commentaires html commentaires

css
/* 我是css的注释 */

九、css float

    Définition : Définir comment les autres textes de la page Web s'enroulent autour de cet élément
    Objectif de l'affichage : Rendre les éléments verticaux horizontaux
    Grammaire : float : aucun/gauche/droite ;

left : l'élément flotte à gauche du texte
right : l'élément flotte à droite
none : la valeur par défaut, pas de flottement.

Si le premier texte est défini sur flottant et que le reste n'est pas défini sur le premier, il couvrira la seconde moitié du calque.
Si le flottement n'affecte pas le bas, ajoutez une boîte

flotter à gauche

Flotter à droite

Bienvenue à tous pour prêter attention à mon compte officiel "Treading the Waves Life Circle". Il n'y a pas seulement un contenu plus intéressant ici, mais aussi les dernières informations de Treading the Waves coupe à la pointe de la technologie, rejoignez-nous !