Sélecteur de style CSS-tutoriel CSS-php.cn

Sélecteur de style CSS

高洛峰

Libérer： 2017-02-14 15:04:32

original

1763 Les gens l'ont consulté

css est l'abréviation de l'anglais Cascading Style Sheets, appelée feuilles de style en cascade et utilisée pour embellir la page. Il existe trois modes d'existence :

élément en ligne, intégration de page et introduction externe. Comparez les avantages et les inconvénients des trois méthodes.

Syntaxe : style='key1:value;key2:value2;'

Utiliser style='xx:xxx;' dans les balises

Intégrer dans la page : < ;style type='text/css'> Block

Présentation des fichiers CSS externes

Nécessité : L'artiste éditera la page Le développeur est responsable de la correspondance des couleurs et de l’embellissement des images, et doit savoir comment y parvenir.

Regardez comment utiliser les trois méthodes ci-dessus :

1. Utilisez Bloc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

Copier après la connexion

dans la page Ajouter un bloc de code pour personnaliser un style, puis appelez

à plusieurs reprises dans le code suivant 3. Introduisez des fichiers CSS externes

S'il y a plusieurs fichiers HTML qui doivent référencer des styles CSS personnalisés, puis selon la deuxième méthode, vous devez définir un style dans chaque fichier HTML. Afin de résoudre ce problème, vous pouvez définir un fichier, écrire un style personnalisé, puis l'appeler. style du fichier.

style s'écrit :

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=&#39;text&#39;]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

Copier après la connexion

1. Lorsque le sélecteur de classe

.logo indique class='logo', référencez le style

2. Sélecteur d'ID

# Lorsque le logo indique id='logo', faites référence à ce style

3. Sélecteur de sélecteur

a, div signifie que toutes les balises a et div font référence à ce style

4. Sélecteur d'association

un div représente une relation hiérarchique, c'est-à-dire que toutes les balises div situées en dessous de la balise a appliquent ce style.

5. Sélecteur d'attribut

input[type='text'], balise d'attribut, indiquant que toutes les balises de type 'text' font référence à ce style.

6. .logo a, .logo p signifie quand class='logo', toutes les balises a suivantes et quand class='logo', toutes les balises a suivantes. balise p suivante, reportez-vous au style

Pour plus d'articles sur le sélecteur de style CSS, veuillez faire attention au site Web PHP chinois !