What is inheritance in CSS? How to use CSS?-CSS Tutorial-php.cn

What is inheritance in CSS? How to use CSS?

青灯夜游

Release： 2018-10-20 16:43:26

forward

2668 people have browsed it

The content of this article is to introduce to you what CSS inheritance is? How to use CSS? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Inheritance of CSS

Inheritance of css means that when tags have a nested relationship, the internal tags automatically own the external tags without conflict. style of nature.

Some properties in CSS are not allowed to be inherited. For example, the border property has no inheritance. None of the properties of the multi-border class are inherited, such as padding, margin, background, etc.

Example:

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

Copy after login

How to use CSS

There are three main ways to use CSS in html pages: Embedded mode, internal style sheet, use tag to link to external style sheet.

1. Embedded method (the CSS code is written in the HTML tag.)

Example:

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

Copy after login

2. Internal style sheet

Similar to inline style sheets, CSS codes are written in HTML documents; the difference is that internal style sheets are not written in tags and have a certain format.

Example:

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

Copy after login

3. Use the tag to link the external style sheet

The same as the internal style sheet is that they have a certain format; different It's because his CSS code is written in the .css file outside the HTML document, and needs to be quoted when using it.

Example:

html1.html

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

Copy after login

CSS1.css

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

Copy after login

Summary : The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of What is inheritance in CSS? How to use CSS?. For more information, please follow other related articles on the PHP Chinese website!