Qu'est-ce que l'héritage en CSS ? Comment utiliser CSS ?-tutoriel CSS-php.cn

Qu'est-ce que l'héritage en CSS ? Comment utiliser CSS ?

青灯夜游

Libérer： 2018-10-20 16:43:26

avant

2674 Les gens l'ont consulté

Le contenu de cet article est de vous présenter ce qu'est l'héritage CSS ? Comment utiliser CSS ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Héritage du CSS

L'héritage du CSS signifie que lorsque les balises ont une relation imbriquée, la balise interne possède automatiquement la balise externe sans style de conflit de la nature.

Certaines propriétés en CSS ne peuvent pas être héritées. Par exemple, la propriété border n'a pas d'héritage. Aucune des propriétés de la classe multi-border n'est héritée, comme le padding, la marge, l'arrière-plan, etc.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/css" charset="GB2312">
    <title>css使用实例</title>
    <style type="text/css" >
        div{
            color: red;
            font-size: 10pt;
            font-weight: bold;
            font-family: 黑体;
            border: 1px solid #000;
        }
        p{
            color: blue;
            font-size: 12pt;
            font-style: italic;
        }
        em{
            color: green;
        }
    </style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>
    <p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>这是红色，10pt，加粗，黑体，有边框</div><br>
<div>
    这是红色，10pt，黑体<br>
    <em>我是em元素的文字，绿色文字周边无边框</em>
</div>

</body>
</html>

Copier après la connexion

Comment utiliser CSS

Il existe trois façons principales d'utiliser CSS dans les pages HTML : Mode intégré, feuille de style interne, utilisez la balise pour créer un lien vers une feuille de style externe.

1. Méthode intégrée (Écrivez le code CSS dans les balises HTML.)

Exemple :

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>内嵌方式</title>
    </head>
    <body>
        <p align="center" style="color: red;">内嵌方式</p>
    </body></html>

Copier après la connexion

2. feuilles de style, les codes CSS sont écrits dans les documents HTML ; la différence est que les feuilles de style internes ne sont pas écrites en balises et ont un certain format.

Exemple :

3. Utilisez la balise pour lier les feuilles de style externes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>内部样式表示例</title>
        <style type="text/css">
            p{
                width: 100px;
                height: 40px;
                color: yellow;
                background-color: red;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <p>内部样式表</p>
    </body>
</html>

Copier après la connexion

sont similaires aux feuilles de style internes dans le sens où elles ont un certain format. ; La différence est que son code CSS est écrit dans le fichier

.css en dehors du document HTML et doit être cité lors de son utilisation.

Exemple :

html1.html

CSS1.css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>外部样式表示例</title>
        <link rel="stylesheet" href="css/css1.css" />
    </head>
    <body>
        <p>外部样式表</p>
    </body>
</html>

Copier après la connexion

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

p {
    width: 100px;
    height: 40px;
    color: yellow;
    background-color: red;
    text-align: center;
}

Copier après la connexion

didacticiel vidéo de base CSS

, le didacticiel vidéo CSS3 , didacticiel vidéo bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!