CSS（层叠样式表）

最新推荐文章于 2024-03-22 16:45:09 发布

草丛是我家QAQ

最新推荐文章于 2024-03-22 16:45:09 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39062385/article/details/90676184

本文介绍了CSS语法结构、引入方式，包括head内style标签、link标签引入外部文件、标签内style属性。详细讲解了基本选择器、组合选择器、属性选择器等，还提及选择器优先级，以及文本、背景、边框等样式属性，最后介绍了伪元素选择器和样式修改。

CSS语法结构：选择器 {属性:属性值;属性:属性值;属性:属性值;}

三种引入css样式的方式：
       head内style标签内部直接书写css代码
       link标签引入外部css文件
       直接在标签内通过style属性书写css样式

分组和嵌套：

I：分组：多个元素样式相同时，可以在多个选择器之间以逗号分隔，统一设置样式

II：嵌套：不同的选择器可以共用一个样式，后代选择器与标签组合使用

div的后代里面的p，span一起设置样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*分组*/
        div,p,span{
            color: green;
        }
        /*嵌套：不同的选择器可以共用一个样式
          后代选择器与标签组合使用*/
        div,p,span{
            color: red;
        }
    </style>
</head>

1.基本选择器：

基本选择器有四种：标签选择器，id选择器（#开头），类选择器（.），通用选择器(*)

标签选择器：

标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性,可以有多个值
ps:可以把它理解成python面向对象的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        span{
            color: chocolate;
        }
        /*id 选择器*/
        #s1{
            color: red;
        }
        /*类选择器*/
        .c1{
            color: green;
        }
        /*通用选择器*/
        *{
            color: pink;
        }
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>ppp
        <span>span</span>
    </p>
</div>
<div class="c1"></div>
</body>
</html>

2.组合选择器

后代选择器（元素1里包含的所有元素），儿子选择器（元素1下所有儿子类的元素），毗邻选择器（相邻的元素只包含下面），弟弟选择器（和元素1平行的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器 div里面的所有span标签都变蓝*/
        div span{
            color: blue;
        }
        /*儿子选择器*/
        div>span{
            color: red;
        }
        /*毗邻选择器 对下不对上*/
        div+span{
            color: pink;
        }
        /*弟弟选择器 对下不对上*/
        div~span{
            color: orange;
        }
    </style>
</head>
<body>
<span>我是div上面的span</span>        ## 黑的（默认颜色）
<div>
    <span>我是div里面的第一个span</span> ## red
    <p>我是div里面的第一个p
        <span>我是div里面第一个p中的span</span> # 后代选择器 blue
    </p>
    <span>我是div里面的第二个sapn</span> ## red
</div>
<span>我是div下面的第一个span</span>   ## orange
<span>我是div下面的第二个span</span>   ## orange
</body>
</html>

3.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只要有xxx的属性名的标签都能找到*/
        [xxx] {
            color: red;
        }
        /*只要有xxx的属性名且值为1的标签都能找到*/
        [xxx='1']{
            color: blue;
        }
        /**规定p标签内部必须有xxx的属性名且值为1的标签**/
        p[xxx='2']{
            color: green;
        }
    </style>
</head>
<body>
<span xxx="2">span我只有</span>                     ##红的
<p xxx>我只有属性名</p>                              ##红的
<p xxx="1">我只有属性名和属性值且值为1</p>            ##蓝的
<p xxx="2">我只有属性名和属性值且值为2</p>            ##绿的
</body>

4.伪类装饰器（针对a标签）

a:link:访问之前为红色 a:hover 鼠标移动在链接上为黄色 a:active 鼠标点击不放为黑色 a:visited 访问过之后为绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color:red;
        }
        a:hover{
            color:yellow;
        }
        a:active{
            color:black;
        }
        a:visited{
            color: green;
        }
        input:focus{
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">校草网</a>
<a href="https//www.sogo.com">搜狗</a>
<input type="text">

效果图：

5.选择器优先级

相同的选择器，不同的引入方式。就近原则谁越靠近标签谁说了算。

不同的选择器，相同的引入方式。

行内样式 > id 选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            color: green;
        }
        .c1{
            color: aqua;
        }
        p{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">啊啊啊</p>
</body>
</html>

6.文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*color: red;*/
            /*color: rgb(0,0,255);*/
            /*color: #FF6700;*/
            color: rgba(0,255,0,1);
        }
    </style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>

7.文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*text-align: right;  !*文本放在最右*!*/
            /*text-decoration: underline; !*文本下划线*!*/
            /*text-decoration: line-through; !*文本删除线*!*/
            text-indent: 48px; /*缩进段落第一行48像素*/
        }
        a{
            text-decoration: none; /*text-decoration属性规定添加到文本的修饰*/
        }
    </style>
</head>
<body>
<p>上山打老虎，老虎不在家</p>
<a href="http://www.xiaohuar.com">我怀疑shj在搞黄色但我没有证据！</a>
</body>
</html>

8.背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            /*background-color: green;*/
            /*background-image: url("https://tse3-mm.cn.bing.net/th?id=OIP.PSLcb9oKur2VmmNUmQSH8AHaEo&w=300&h=187&c=7&o=5&pid=1.7");*/
            /*background-repeat:no-repeat ;!*如何平铺对象*!*/
            /*background-position: center ;*/
            background: blue no-repeat center url("https://tse3-mm.cn.bing.net/th?id=OIP.PSLcb9oKur2VmmNUmQSH8AHaEo&w=300&h=187&c=7&o=5&pid=1.7");
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

9.背景图片实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 400px;
            background-color: tomato;
        }
        .box{
            height: 400px;
            background:
            url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
            background-attachment: fixed; /*background-attachment设置背景图像是否固定或者随着页面的其余部分滚动*/
        }
        .c2{
            height: 400px;
            background-color: red;
        }
        .c3{
            height: 400px;
            background-color: fuchsia;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

10.边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*border-width: 3px;*/
            /*border-style: dashed; !*边框为那种线条 dotted，solid，double, dashed*!*/
            /*border-color: deeppink;*/
            border: 3px solid red;
        }
    </style>
</head>
<body>
<div>div</div>
</body>
</html>

11.如何画一个圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: red;
            border: 3px solid black;
            border-radius: 50% ; /*order-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

12 display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
            /*display: none;*/
        /*}*/
        /*inline将块级标签变成行内标签*/
        /*div {*/
            /*display: inline;*/
        /*}*/
        /*span   {*/
            /*display: block;*/
        /*}*/
        /*将选择的标签既具有行内标签特点又有块级标签的特点*/
        span{
            display: inline-block; /*inline-block 行内块元素*/
            height: 400px;
            width: 400px;
            background-color: deeppink;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>

13.伪元素选择器

I：first-letter----给首字符设置特殊样式

II：before----在每个元素之前插入内容

III：after----在每行元素后面追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter{
            color: red;
            font-size: 24px;
        }
        /*P:before{*/
            /*content: '*';*/
            /*color: green;*/
        /*}*/
        p:after{
            content: '?';
            color:deeppink;
            font-size: 48px;
        }

    </style>
</head>
<body>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
</body>
</html>

运行结果：

14 样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*块级标签设置宽和搞高*/
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        /*调整字体*/
        body{
            font-family: "Microsoft YaHei UI", "微软雅黑","Arial",sans-serif;
        }
        /*字体大小*/
        p{
            font-size: 24px;
            font-weight: bold;
        }
    </style>

</head>
<body>
<div>div</div>
<div>div</div>
<p>富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善/p>
</body>
</html>

效果图：