CSS基础-CSDN博客

本文链接：https://blog.csdn.net/qq_42919419/article/details/128790194

CSS层叠样式表（Cascading Style Sheets），是一种浏览器解释型语言，直接由浏览器进行运行，使用css设置HTML元素样式，可以让HTML页面更美观。

CSS引入方式

1.外联式（外部样式）：将网页链接到外部样式表，网页就可以使用外部样式表中的样式

引入方式：

<link>标签

@import:

link和@import的区别：

1.link属于HTML标签，@immport是css提供的属性

2.当页面被加载时，link会同时被加载，@import被引用的css会等到引用它的css文件被加载完再加载到页面上

3.@import只在IE5版本以上才能识别，link标签是HTML标签，没有兼容性问题

4.link方式的样式权重高于@import的权重

2.嵌入式（内嵌样式）：在网页上创建嵌入的样式表。

<style>
设置样式
</style>

3.内联式（行内样式）：在每个元素开始标记中使用，对应各个元素

<标签名 style="设置样式"/>

CSS语法

css语法由三部分构成：选择器、属性、值，例：

selector{
property:value
}

选择器

简单选择器

1、通用选择器

*{//页面中的所有元素

}

例：

css样式

*{//设置所有标签内容的字体颜色为红色
color:red
}

body内容

<p id="pr1">这是一个段落</p>

完整代码

<html>
    <head>
        <title></title>
        <style>
            *{//设置所有标签内容的字体颜色为红色
                color:red
             }
        </style>
    </head>
    <body>
        <p id="pr1">这是一个段落</p>
    </body>
</html>

2、标签选择器

标签名{

}

例：

css样式

p{//设置p标签内容的字体颜色为红色
color:red
}

body内容

<p id="pr1">这是一个段落</p>

完整代码

<html>
    <head>
        <title></title>
        <style>
            p{//设置p标签内容的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <p id="pr1">这是一个段落</p>
    </body>
</html>

3、id选择器

#选择器名{

}

例：

css样式

#pr1{//设置id属性值为pr1的标签内容的字体颜色为红色
color:red
}

body内容

<p id="pr1">这是一个段落</p>

完整代码

<html>
    <head>
        <title></title>
        <style>
            #pr1{//设置id属性值为pr1的标签内容的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <p id="pr1">这是一个段落</p>
    </body>
</html>

注意：一个网页中，id值不能重复，但是class值可以重复

4、类选择器

.类名{

}

例：

css样式

.pr1{//设置class属性值为pr1标签内容的字体颜色为红色
color:red
}

body内容

<p class="pr1">这是一个段落</p>

完整代码

<html>
    <head>
        <title></title>
        <style>
            .pr1{//设置class属性值为pr1标签内容的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <p class="pr1">这是一个段落</p>
    </body>
</html>

复合选择器

1、后代选择器

选择器后代选择器{

}

例：

css样式

div .sp1{//设置div元素中的span元素class属性为sp1的字体颜色为红色
color:red
}

body内容

<div>
    <div>
        <span class="sp1">这是span1的内容</span>
    </div>
    <span class="sp2">这是span2的内容</span>
</div>

完整代码

<html>
    <head>
        <title></title>
        <style>
            div .sp1{//设置div元素中的span元素class属性为sp1的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <span class="sp1">这是span1的内容</span>
            </div>
            <span class="sp2">这是span2的内容</span>
        </div>
    </body>
</html>

2、子代选择器

选择器>子代选择器{

}

例：

css样式

div>.sp2{//设置div元素中的span元素class属性为sp2的字体颜色为红色
color:red
}

body内容

<div>
    <div>
        <span class="sp1">这是span1的内容</span>
    </div>
    <span class="sp2">这是span2的内容</span>
</div>

完整代码
<html>
    <head>
        <title></title>
        <style>
            div>.sp2{//设置div元素中的span元素class属性为sp2的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <span class="sp1">这是span1的内容</span>
            </div>
            <span class="sp2">这是span2的内容</span>
        </div>
    </body>
</html>

3、并集选择器

选择器1,选择器2,....{

}

例：

css样式

.sp1,.sp2,.pr1{//设置class属性值为pr1  sp1  sp2的字体颜色为红色
    color:red
}

body内容

<div>
    <p class="pr1">这是一个段落</p>
    <div>
        <span class="sp1">这是span1的内容</span>
    </div>
    <span class="sp2">这是span2的内容</span>
</div>

完整代码

<html>
    <head>
        <title></title>
        <style>
            .sp1,.sp2,.pr1{//设置class属性值为pr1  sp1  sp2的字体颜色为红色
                color:red
            }
        </style>
    </head>
    <body>
        <div>
            <p class="pr1">这是一个段落</p>
            <div>
                <span class="sp1">这是span1的内容</span>
            </div>
            <span class="sp2">这是span2的内容</span>
        </div>
    </body>
</html>

4、交集选择器

选择器1选择器2{

}

例：

css样式

span.sp2{//设置span标签的class属性值为sp2的字体颜色为红色
color:red
}

body内容

<div>
    <p class="pr1">这是一个段落</p>
    <div>
        <span class="sp1">这是span1的内容</span>
    </div>
    <span class="sp2">这是span2的内容</span>
</div>

完整代码

<html>
    <head>
        <title></title>
            <style>
                span.sp2{//设置span标签的class属性值为sp2的字体颜色为红色
                    color:red
                }
            </style>
    </head>
    <body>
        <div>
            <p class="pr1">这是一个段落</p>
            <div>
                <span class="sp1">这是span1的内容</span>
            </div>
            <span class="sp2">这是span2的内容</span>
        </div>
    </body>
</html>

注：交集选择器，之间没有分隔，所以如果有标签选择器，必须改它放在首位