Expliquer en détail les points de connaissances de base de CSS-tutoriel php-php.cn

Expliquer en détail les points de connaissances de base de CSS

亚连

Libérer： 2023-03-26 12:14:02

original

1979 Les gens l'ont consulté

1. Concept

CSS (Cascading Style Sheets) : Feuilles de style en cascade après les styles CSS, cascade : utiliser différentes méthodes d'ajout à la même balise HTML Ajouter styles, tous les styles fonctionnent ensemble sur la balise ; style : ajoutez les effets qui doivent être affichés à la balise HTML.

est principalement utilisé pour définir le style d'affichage de l'apparence du contenu du texte, la forme de l'image et la mise en page de la page HTML.

Fonction : CSS rend la page plus belle ; CSS+Div rend la mise en page plus flexible.

Règles : les sélecteurs de style sont strictement sensibles à la casse, mais les attributs et les valeurs d'attribut ne sont pas distingués

Plusieurs attributs sont séparés par des points-virgules anglais

Si la valeur de l'attribut consiste de plusieurs compositions Word, entourées de guillemets anglais

le sélecteur de style est le suivant :

<font style="color:red;size:14;"></font>

Copier après la connexion

2. Introduisez le style CSS

1. Style en ligne

<body>  
    <!--行内样式-->  
    <font style="color:red">浅笑安然</font><br />  
</body>

Copier après la connexion

2. Style interne

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <!--内部样式-->  
    <style type="text/css">  
        font{  
            color: red;  
        }  
    </style>  
</head>

Copier après la connexion

3. Style externe

Style externe de référence :

<head>  
        <!--外部样式-->  
    <link rel="stylesheet" type="text/css" href="../css/outer.css"/>  
</head>

Copier après la connexion

Paramètres du fichier CSS :

/*paramètres de style de police*/

font{  
    color:green;  
}

Copier après la connexion

Priorité : les styles en ligne ont la priorité la plus élevée, les styles internes et les styles externes sont les plus proches les uns des autres

3. Sélecteur

1. Sélecteur d'élément

<font >浅笑安然</font>  
[html] view plain copy
/*元素选择器*/  
font{  
    color: red;  
}

Copier après la connexion

2. >

<font id="flower">心若浮沉</font>  
[html] view plain copy
/*ID选择器*/  
#flower{  
    color: blue;  
}

Copier après la connexion

3. Sélecteur de classe : .class class name {}

<font class="happy">清风自来</font>  
[html] view plain copy
/*类选择器*/  
.happy{  
    color:gold;  
}

Copier après la connexion

4. Sélecteur d'attribut : nom de la balise [attribute='attribute value']

Texte : < ;input type="text" name="texts"/>

/*属性选择器*/  
input[type=text]{  
    background-color: brown;  
}

Copier après la connexion

5. Contient des sélecteurs : étiquette parent étiquette enfant

<p class="day">  
    <font>  
        今天天气好晴朗  
    </font>  
</p>

Copier après la connexion

/*包含选择器*/  
.day font{  
    color:orangered;  
}

Copier après la connexion

4. Style CSS

1.border width height

2.display : bloc attribut de niveau de bloc attribut de niveau de ligne en ligne aucun attribut caché inline-block : le bloc -les éléments de niveau dans la ligne ont une largeur

élément au niveau du bloc p ; clear : flottant clair

5. Modèle de boîte

marge : marge, boîte et boîte, réglé dans le sens des aiguilles d'une montre, s'il n'est pas défini, appuyez sur Sa symétrie vient deborder : border line

padding : marge intérieure, boîte et contenu

Le modèle de boîte est la boîte que nous utilisons couramment Dans la vraie vie, elle a le sien. L'épaisseur de la bordure inclut la distance par rapport aux objets à l'intérieur, ainsi que la distance entre la boîte elle-même et le monde extérieur.

Résumé :

Le style en cascade CSS est une combinaison de plusieurs styles qui fonctionnent ensemble sur l'étiquette, qu'il s'agisse de l'utilisation de sélecteurs, de paramètres d'attributs ou de modèles de boîte. fondamentalement, afin de changer le style d'une page HTML, diverses forces travaillent pour produire une belle page.