落风的风
0%

CSS3笔记（狂神）

Posted on Edited on In

1、CSS介绍
2.、美化网页元素
3.、盒子模型
4、 display和浮动
5、定位

1、什么是CSS

1.1 什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

1.2 CSS的基本语法和优点

CSS基本语法

  • CSS的基本语法结构，由选择器和声明构成（弄通这两个就ok）

  • 然后对照具体的样式详细讲解语法，强调声明必须在{ }中

  • 最后说明基本W3C的规范，每条声明后的;都要写上

css语法

选择器分为基本选择器、属性选择器、层次选择器、结构伪类选择器。

CSS的优点

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分的丰富
  • 建立使用独立于html的css文件
  • 利用SEO，容易被搜索引擎收录

1.3 引入CSS的4种方式

优先级：就近原则，谁离代码近，谁的优先级越高

  • 行内样式：在元素标签中，编写一个style属性，编写样式即可

    1
    2
    <!--行类样式-->
    <h1 style="color: aqua">标题一</h1>

  • 内部样式：css语句直接写在里面、不需要.css文件

    1
    2
    3
    4
    5
    6
    <!--内部样式-->
    <style>
    h2{  //h2表示选择器
        color: blueviolet;  //命令表示申明
    }
    </style>

  • 外部样式一：链接，需要.css文件

    1
    2
    <!-- 外部样式1 链接式-->
    <link rel="stylesheet" href="css/style.css">
    1
    2
    3
    4
    h3{
    /*    外部样式*/
        color: yellow;
    }

  • 外部样式二：导入，需要css文件

    1
    2
    3
    4
    <!-- 外部样式2 导入式-->
    <style>
        @import url("css/style.css");
    </style>
    1
    2
    3
    4
    h4{
        /*    外部样式*/
        color: rosybrown;
    }

引用实例的示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS快速入门</title>
    <!--内部样式-->
    <style>
        h2{  //h2表示选择器
            color: blueviolet;  //命令表示申明
        }
    </style>
    <!-- 外部样式1 链接式-->
    <link rel="stylesheet" href="css/style.css">
    <!-- 外部样式2 导入式-->
    <style>
        @import url("css/style.css");
    </style>
</head>

<body>
    <!--行类样式-->
    <h1 style="color: aqua">标题一</h1>
    <!--内部样式\不需要写css文件-->
    <h2>标题二</h2>
    <!--外部样式1 链接\需要写css文件-->
    <h3>标题三</h3>
    <!--外部样式2 导入\需要写css文件-->
    <h4>标题四</h4>
</body>
</html>
1
2
3
4
5
6
7
8
9
h3{
/*    外部样式*/
    color: yellow;
}

h4{
    /*    外部样式*/
    color: rosybrown;
}
css语法

1.4 CSS基本选择器

不遵循就近原则。id选择器>类选择器>标签选择器

  • 标签选择器：选择同种类型标签，只能对同一类标签进行操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        /*标签选择器*/
        h1{color: pink;}
        p{color: aqua;background: #0066ff;border-radius: 10px;}
    </style>

    <!--标签选择器-->
        <h1>第一章 标签选择器</h1>
        <h1>第二章 标签选择器</h1>
        <p>吴康世界第一帅,标签选择器</p>

  • 类选择器：（.class名称{}) 为标签定义class 可以多个标签归类，是同一个class，可以复用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        /*类选择器*/
        .wk_1{color: #ffe600;}
        .wk_2{color: #c9ffc0;}
    </style>

    <!--类选择器-->
        <h1 class="wk_1">第三章 类选择器wk_1</h1>
        <h1 class="wk_2">第三行 类选择器wk_2</h1>
        <p class="wk_1">吴康宇宙第一帅,类选择器wk_1</p>

  • id选择器： (#id名称{}) id保证全局唯一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        /*id选择器*/
        #wk_001{color: red;}
        #wk_002{color: pink;}
        #wk_003{color: aqua;}
    </style>

    <!--id选择器-->
        <h1 id="wk_001">第四章 id选择器</h1>
        <h1 id="wk_002">第六章 id选择器</h1>
        <h1 id="wk_003">第七章 id选择器</h1>

基本选择器示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*标签选择器*/
        h1{color: pink;}
        p{color: aqua;background: #0066ff;border-radius: 10px;}
        /*类选择器*/
        .wk_1{color: #ffe600;}
        .wk_2{color: #c9ffc0;}
        /*id选择器*/
        #wk_001{color: red;}
        #wk_002{color: pink;}
        #wk_003{color: aqua;}
    </style>

</head>

<body>
<!--标签选择器-->
    <h1>第一章 标签选择器</h1>
    <h1>第二章 标签选择器</h1>
    <p>吴康世界第一帅,标签选择器</p>
<!--类选择器-->
    <h1 class="wk_1">第三章 类选择器wk_1</h1>
    <h1 class="wk_2">第三行 类选择器wk_2</h1>
    <p class="wk_1">吴康宇宙第一帅,类选择器wk_1</p>
<!--id选择器-->
    <h1 id="wk_001">第四章 id选择器</h1>
    <h1 id="wk_002">第六章 id选择器</h1>
    <p id="wk_003">吴康亚洲第一帅 id选择器</p>

</body>
</html>

1.5 CSS高级选择器

1、层次选择器

选择器就是为了定位，层次选择器分为4类：

image-20210213191927367

  • 后代选择器：格式是空格，body p{background: red}当前body下的所有后代p标签全部选中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        /*后代选择器*/
        body p{background: red}
    </style>

    <!--    后代选择器-->
        <P>1</P>
        <P>2</P>
        <P>3</P>
        <ul>
            <li> <P>4</P> </li>
            <li> <P>5</P> </li>
            <li> <P>6</P> </li>
        </ul>

  • 子选择器：格式是大于号>，只有下一代(儿子代)被选中。body >h2{background: #c9ffc0}表示设置body下的h2这一代的背景颜色。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*子选择器*/
    body >h2{background: #c9ffc0}

    <!--子选择器-->
        <h1>第一章</h1>
        <h1>第二章</h1>
            <h2>2.1</h2>
                <h3>2.1.1</h3>
        <h1>第三章</h1>
            <h2>3.1</h2>

  • 相邻兄弟选择器：格式是加号+，同一层次，只对下选择一个（也称为弟弟选择器），这里只会选择到p8

    1
    2
    3
    4
    5
    6
    7
        /*相邻兄弟选择器 */
        .wk_1 +p{background: #fa4ac9;}

    <!--相邻兄弟选择器-->
        <p class="wk_1">p7</p>
        <p>p8</p>
        <p>p9</p>

  • 通用兄弟选择器：格式是~，同一层次，选择向下所有（也成为所有弟弟选择器），这里能选到p11、p12

    1
    2
    3
    4
    5
    6
    7
        /*通用兄弟选择器 */
        .wk_2 ~p{background: #5cfa4a;}

    <!--通用兄弟选择器-->
        <p class="wk_2">p10</p>
        <p>p11</p>
        <p>p12</p>

    2、结构伪类选择器

    标红的为重点：

    image-20210213203015986

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    /*选取第一个li元素*/
    ul li:first-child{background: red;}
    /*选取最后一个li元素*/
    ul li:last-child{background: aqua;}

    /*选中第一个p元素*/
    p:nth-child(1){background: #3ad073;}
    /*选中父元素下的P元素类型中的第二个*/
    p:nth-of-type(2){ background: blue;}

<!--结构伪类选择器-->
    <P>p1</P>
    <P>p2</P>
    <P>p3</P>
    <ul>
        <li> li1 </li>
        <li> li2 </li>
        <li> li3 </li>
    </ul>
image-20210213203138655

4、属性选择器（最常用）

格式：元素[属性 = 属性值（正则表达式）]{声明1；声明2；}

image-20210214010248531

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: aquamarine;
        text-align: center;
        color: pink;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/52px Arial;
    }
    /*存在id属性的元素   a[]{}*/
    a[id]{background: aqua;}
    /*id=wk2的元素*/
    a[id=wk2]{background: red;}
    /*class中有links的元素*/
    a[class*="links"]{background: antiquewhite;}
    /*选中href中以http开头的元素*/
    a[href^=http]{background: cornflowerblue;}
    /*选中href中以为pdf结尾的元素*/
    a[href$=pdf]{background: #e23bf5;}
</style>

<body>
    <p class="demo">
        <a href="http://www.baidu.com"class="links check-menu-item first" id="first">1</a>
        <a href="http://blog.kuangstudy.com"class="links item active"target="_blank"title="text">2</a>
        <a href="images/123.html" id="wk2">3</a>
        <a href="images/123.png"class="links item">4</a>
        <a href="images/123.jpg"class="links item">5</a>
        <a href="abc"class="links item">6</a>
        <a href="/a.pdf"class="links item">7</a>
        <a href="/abc.pdf"class="links item">8</a>
        <a href="abc.doc"class="links item">9</a>
        <a href="abcd.doc"class="links item last">10</a>
    </p>
</body>

image-20210214011223806

2、美化网页元素

2.1 为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页、页面漂亮了才能吸引用户
  3. 凸显页面的主题
  4. 提高用户体验

span标签： 重点要突出的字，使用span标签包起来。

1
2
3
4
5
6
7
8
9
<style>
    #wk1{font-size: 40px;}
    #wk2{font-size: 40px;}
</style>

<body>
    欢迎学习<span id="wk1">java</span> 和
    <span id="wk2">scc</span>
</body>
image-20210214012840842

2.2 字体、文本样式、文本阴影

字体样式

image-20210214013332457
  • font-family: “Adobe 楷体 Std R”; 字体风格
  • font-size: 20px; 字号
  • font-weight: 100; 字体粗细
  • color: aqua; 字体颜色

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    body{font-family:Times,"Times New Roman", "楷体"; color: red;}
    h1{font-size: 30px;}
    .p1{font-weight: bold;}
</style>

<body>
    <h1>故事介绍</h1>
    <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生</p>
    <p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼</p>
    <p>When I wake up in the morning，You are all I see.</p>
</body>
image-20210214014750696

文本样式

image-20210214015221154
  • 颜色 color
  • 对齐的方式 text-align
    • center 排版，居中
  • 首行缩进
    • text-indent：2em； 段落首行缩进2字母
  • 行高
    • hight 块的高度
    • line-height 行高，行高和块的高度相同，就可以上下居中
  • 装饰 text-decoration
    • 下划线 underline
    • 中划线 line-through
    • 上划线 overline
    • 超链接去下划线 a { text-decoration : none}
  • 文本图片水平对齐 参照物 a，b

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    h1{
        color: rgba(255,0,0,0.9);
        text-align: center;
    }
    .p1{text-indent: 2em;}
    .p3{
        background: blueviolet;
        height: 50px;
        line-height: 50px;
    }
    .L1{text-decoration: underline;}
    .L2{text-decoration: line-through;}
    .L3{text-decoration: overline;}
    a{text-decoration: none;}
</style>

<h1>故事介绍</h1>
<p class="L1">11</p>
<p class="L2">22</p>
<p class="L3">22</p>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼</p>
<p class="p3">When I wake up in the morning，You are all I see.</p>
<a href="https:/www.baidu.com ">没有下划线了</a>

超链接伪类和阴影

image-20210214112327796 image-20210214112613515

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    a{text-decoration: none; color: black;}
    /*悬浮(重要)*/
    a:hover{color: orange; font-size: 20px;}
    /*按住未释放*/
    a:active{color: green;}

    /*阴影*/
    #price{text-shadow: black 3px 1px 2px;}
</style>

<body>
    <a href="#">
        <img src="../images/2.png" alt="">
    </a>
    <p>
        <a href="">码出高效：Java开发手册</a>
    </p>
    <p>
        <a href="">作者：孤尽老师</a>
    </p>
    <p id="price">
        ￥99  
    </p>
</body>

2.3 列表样式

list-style和list-style-type两个属性是大家经常用到的

image-20210214162634704 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav2">
    <h2 class="title">主题市场</h2>
    <ul>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
        <li><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
    </ul>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#nav2{
    float:left; /*左边对齐*/
    /*background: white;*/
    color: white;
    width: 190px;
    background: wheat;
}

.title{
    /*width: 190px;*/
    text-align: center;
    font-size: 16px;
    background: coral;
}

ul li{
    list-style: none; /*隐藏小圆点*/
    /*overflow: hidden;!*隐藏小圆点*!*/
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: 400;
    /*width: 150px;*/
    color: #666;
}
a{
    text-decoration: none; /*去掉下划线*/
    color: black;
}
a:hover{
    text-decoration: underline;
    color: orange;
}

2.4 背景和渐变

背景

css语法;

代码示意

1
2
3
4
5
background: red url("../images/1.png") 150px -11px no-repeat;

background-image: url("../images/2.png");
background-repeat: no-repeat;
background-position: 110px -11px;
css语法;

渐变

Grabient官网链接：https://www.grabient.com/

3、盒子模型

3.1 盒子模型和边框

image.png

margin: 外边距

padding:内边距

border: 边框

Content(内容)： 盒子的内容，显示文本和图像

  • 建议所有的属性都用

    标签包起来。

  • 默认的外边距为8，一般先设为0 `margin: 0;`，还有其他的诸如内边距、下划线一般都初始化设为空；如下 
    1
    2
    3
    4
    5
    h1,ul,li,a,body{
        margin: 0px;
        padding: 0px;
        text-decoration: none;
    }

  • 设置边框的格式 border: 1px solid #cbc9c9; /粗细 样式 颜色/

  • 自动居中 margin: 0 auto;

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型体验</title>
    <style>
        h1,ul,li,a,body{
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        h2{
            background: #3ad073; /*设置背景颜色*/
            color: white; /*设置字体颜色*/
            font-size: 16px; /*设置字体大小*/
            line-height: 30px; /*设置行高*/
            margin: 0 auto; /*自动边距 居中*/
        }

        #box{
            width:300px;
            /*粗细 样式 颜色*/
            border: 1px solid #cbc9c9;/*设置一个浅灰色的边框*/
            border-radius: 10px; /*倒圆角*/
            margin: 0 auto; /*自动边距 居中*/
        }

        input{
            border: 1px solid #3ad073; /*设置input框的粗细样式和颜色*/
        }

        div:nth-of-type(1){
            padding: 5px 3px; /*设置第一个输入框 的内边距*/
        }
        div:nth-of-type(2){
            padding: 5px 3px; /*设置第二个输入框 的内边距*/
        }
        div:nth-of-type(3){
            padding: 5px 3px; /*设置第三个输入框 的内边距*/
        }
    </style>
</head>


<body>
<div id="box">
    <h2>京东会员</h2>
    <!--form表单-->
    <form action="#">
        <div>
            <spam>用户名：</spam>
            <input type="text">
        </div>
        <div>
            <spam>密&nbsp&nbsp&nbsp码：</spam>
            <input type="text">
        </div>
        <div>
            <spam>邮&nbsp&nbsp&nbsp箱：</spam>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>
image-20210215170159793

3.2 圆角边框和阴影

  • 圆角边框：border-radius: 20px 10px 50px 30px;左上、右上、右下、左下
  • 阴影：box-shadow: 3px 3px 10px #06c;x轴位移、y轴位移、模糊半径、颜色

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 5px solid yellowgreen;
            border-radius:50px;
        }
        img{
            border-radius:25px; /*倒圆角*/
            box-shadow: 10px 10px 20px yellow; /*阴影位置厚度颜色*/
        }
    </style>
</head>
<body>
    <div>
    </div>
    <img src="images/tx.jpg" alt="#">
</body>
</html>
image-20210215172208428

4、display和浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动和display</title>
    <style>
        div{
            /*width: 100px;*/
            /*height: 30px;*/
            border: 1px solid #9ee31e;
            background: #ecb718;
            display: inline;
        }

        a{
            border: 1px solid #e23bf5;
            color: black;
            text-decoration: none;
            display: inline;
            /*float: left;*/
            /*clear: left;*/
        }
    </style>
</head>

<body>
    <div>
        <a href="#">新闻</a>
        <a href="#">网页</a>
        <a href="#">地图</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
        <a href="#">更多</a>
    </div>
</body>
</html>
image-20210215194615262

5、定位

5.1 相对定位

image-20210215195059385

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{padding:20px;}

        div{
            margin:10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            border: 1px dashed #e23bf5;
            background: #5cfa4a;
            position: relative;
            bottom: 20px;
        }
        #second{
            border: 1px dashed #e23bf5;
            background: #ffe600;
            position: relative;
            left: 20px;
        }
        #third{
            border: 1px dashed #e23bf5;
            background: #0066ff;
            position: relative;
            top: 10px;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

image-20210215202445710

5.2 绝对定位

5.3 Z-index

-------------感谢阅读没事常来-------------