刘文奇

css

5/11/2019 css

[toc]

# 一、 简单介绍

CSS是Cascading Style Sheets（级联样式表）的缩写，也叫层叠样式表。

CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

# 二、 CSS 代码应该放置的位置

# 1. 可以放在 HTML 的 style 标签中 ，之后通过 CSS 选择器对相应的标签生效。

<head>
     <style>
         div {
             background-color:red;
             width:100px;
             height:100px; 
         }
     </style>
</head>
1
2
3
4
5
6
7
8
9

div 是 CSS 使用的一种选择器，用于在当前的 HTMl 页面上选中所有的 div 标签。

# 2. 放在一个单独的文件中，这个单独的文件一般以 .css结尾，就叫 css 文件。之后可以在 html 文件中引入。推荐

a. 先在某个路径下写一个CSS文件，在这个文件中写入需要的所有样式：

// qf.css 文件内容
  .c1{
     background:url("meizi.jpg") no-repeat -163px -215px;
   }
   /*
     上面的样式的意思是：给类名为 c1 的元素设置背景图片，
     url("图片路径")
    */
1
2
3
4
5
6
7
8

b. 之后再在 html 文档中引入该 css 文件

   <head>
       <link rel='stylesheet' href='./qf.css'/>
   </head>
1
2
3

# 3. 针对某一个标签设置

   <div style="color: red;size: 10px">测试</div>
1

# 三、 CSS 选择器

要对 html 标签进行相关操作，需要先找到他们，找到他们的方法就是使用 CSS 的选择器。

# 1. 选择器的分类

  • 直接选择器
  • 组合选择器
  • 层级选择器

# 2. 选择器之间的优先级

不同类型的优先级:

# id > 属性 > 类 > 标签

但是可以使用 !important 指定某一类优先级最高

相同类型的优先级： 就近原则，即谁在最后谁生效

# 3. 选择器详解

# a. 直接选择器

/*标签选择器*/
a{
    color:red !important;
}

/*id选择器*/
#a1{
    color: blue;
}
#sy{
    color: greenyellow;
}

/*class(类)选择器 重要指数 五颗星 ☆☆☆☆☆ */
.c1{
    color: blue;
}

/*属性选择器*/
input[type="text"]{
    color: blue;
}
a[n="1"]{
    font-size: 20px;
}
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

# b. 组合选择器 : 重要指数五颗星 ☆☆☆☆☆

类名 c1 和 c2 的标签

.c1,.c2{
    color: greenyellow;
}
1
2
3

# c. 间接选择器包括以下几种：五颗星 ☆☆☆☆☆

层级选择器：依据标签之间嵌套关系来对标签进行选择

五颗星 ☆☆☆☆☆ div 下面的 p 标签及其下面的所有标签中含有 p 标签的都生效

    div p{
        color:gold;
    }
1
2
3

div>p 表示只对 div 下面 第一层含有 p 标签及其这层下面含有 p 标签的生效， 若是 div下面的第一层含有非 p 标签，且其下面含有 p标签的，则不生效.

div>p{
    color:green;
}
1
2
3
4

多层的层级选择器

/*表示，类名为 c1 下面的第一层的 p 标签下面的所有 span 标签*/
.c1>p span{
    color:blue;
}
1
2
3
4

# d. hover 伪类

当鼠标放在其上面时，CSS才生效

#hover1:hover{
    color: red;
}
1
2
3

# 四、 CSS 样式详解

# 1. 边框和圆角

border 给元素添加边框

/* 画个边框
    border: 表示画边框
    border: 2px; 边框线条的粗细程度
    border: 3px solid red; 实线边框，线条颜色是红色，不设置颜色就是黑色
    dashed: 3px dashed blue; 虚线边框，颜色蓝色
            边框出现在一个标签的左侧
    border-left
    padding: 10px 设置边框占多高，其高度可以比父标签还高
*/
1
2
3
4
5
6
7
8
9

border-radius 是向元素添加圆角边框。

border-radius: 100%;
/*
100% 原型， 前提是元素是正方形
50% 椭圆
*/
1
2
3
4
5

# 3. 文字和字体

  /*字体颜色*/
    color:white;
    /*背景色*/
    background-color:antiquewhite;

    /*字体加粗的大小*/
    font-weight:bold;

    /*设置字体之间的间距*/
    letter-spacing: 3px;
.bs{
    /*字体大小*/
    font-size:22px;
    background-color: greenyellow;
    height:30%;
    width:30%;

    /*字体大小调节小技巧，在浏览其中按 F12 后直接调整，调整好，再在代码中改*/
}

.c1{
    /*字体颜色和大小*/
    color: red;
    font-size: 30px;
}

/*字体左右居中*/
.c1{
   text-align: center;
}

/*字体上下居中, 需要设置 行高的值等于元素的高度值*/

.c1 {
  height: 100px;
  line-height: 100px;
}
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

# 4. 背景

    /*背景图片,图片的高度和宽度是对于此标签进行填充的，
      默认是重复填充的*/
    background-image: url(shark.png);
    /*!*background-repeat: 设置不重复：*/
                /* 下面三种同时只能出现一种
                repeat-x;  x 轴不重复,即竖向不重复
                repeat-y; y 轴不重复，即横向不重复
                no-repeat;  都不重复
             */
            /*例如：background-repeat:repeat-x;*/

    /*抠图*/
    background-image: url(meizi.jpg);
    background-repeat: no-repeat;
    background-position-x: -163px;  /*由左向右*/
    background-position-y: -215px;  /*由上到下*/

    /*以上可以写成一行：*/
    background:url(meizi.jpg) no-repeat -163px -215px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4. display 控制显示

/*标签显示属性：
    隐藏标签：
    display:none 表示不显示,可以设置召之即来，挥之即去。

    块标签和内联标签互换
    display:block 表示让内联变为块
    display:inline 表示把块标签变为内联标签
    display:inline-block 表示同时具有内联和块的属性，很有用

    关于inline-block 特别对于让一个内联标签具有块标签的属性时
    是非常有用的，因为内联标签是不能设置高度和宽度的，而块标签
    又是独占一行的，就是说定义一个块标签时，假如这个块标签宽度
    并不需要要一整行，只需要半行，但剩余的一半空间也不能放其他
    的内容了。而利用inline-block可让一个内联标签可以自定义高度
    宽度，同时也不会独占一整行的空间。
*/


.meizi{
    display: none;
}

.in-block1{
    display:inline-block;
    height:300px;
    width: 200px;
    background-color: green;
}

.in-block2{
    display:inline-block;
    height:300px;
    width:200px;
    background-color: red;
}
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

# 6. 布局

/*通过选择器，进行穿衣服*/
.s1{

    /*高度*/
    height:200px;

    /*用百分比形式表示的话，是对其父级标签有实际高度时才有效
    例如下面的 50% 表示占父级标签的 50%
   */
    height:50%;

    /*宽度*/
    width: 185px;

    /*对于宽度的百分比形式来表示时是可以直接生效的，
      是相对于整个浏览器的宽度的百分比。
      当然也可以对于父级的宽度的百分比*/
      width:40%;


/*边距：
    padding: 30px;  内边距：移动自身的中心，但移动后被空出来的
                   距离还是属于自己（英文直译：衬垫）

    padding-left: 30px; 把自己的中心从左边的向右移动30像素的距离
    margin:30px;   外边距 移动自身整体，
                   移动后被空出来的距离就不在属于自己了，
                   但其他标签也不可使用（英文直译：合并）

    margin-left: 30px; 同样的从左边开始移动30像素的距离
*/

.bk1{
    background-color:#dddddd;
    padding:10px;
    /*解决当鼠标放到伪类上，边框不再闪烁，就要首先在这里设置一个边
      框，让他先占个位置，之后再给其加上伪类属性。所以把它的颜色先
      要设置为透明
      transparent 就是透明的意思
    */
    border-left:10px solid transparent;
}

.bk1:hover{
    border-left:10px solid rebeccapurple;
}

/*外边距*/
       .margin{
           margin:30px;
           background-color: greenyellow;
        }
        .margin-left{
            margin-left: 30px;
            background-color: red;
        }
        .margin-right{
            margin-right: 30px;
            background-color: aqua;
        }

/*内边距*/
 .padding{
     padding: 20px;
     background-color: rebeccapurple;
}
        .padding-left{
            padding-left: 20px;
            background-color: green;
        }
        /*鼠标放上时，会显示不同的图标，也可以自定义显示自己的图标*/
        /*.cousor{
            cursor:wait; 等待
            cursor:pointer; 小手
        }*/

        /*设置某一个标签在浏览器出现的位置*/
        /*
        .position{
            相对定位
            position: relative;


            这个单独使用没有意义，需要和下面的absolute结合使用
            一般的使用场景是，relative 在外层，absolute 在内层；
            起到的效果是：
                可以设置 absolute 相对于 relative 层出现的位置；
            值得注意的是：
               absolute 向外层找 relative 时，会一直找，直到找到为止，若都没有，则
                会相对于当前页面来定位。就像直接使用 absolute 一样的效果。

            相对定位
            position: absolute;
             设置把某个标签永远固定在浏览器的某个位置，其位置会随着浏览器内容的滚动而变化，即跟随浏览器的滚动。

             固定定位
             position: fixed;  重要指数：☆ ☆ ☆ ☆ ☆
             设置把某个标签永远固定在当前浏览器窗口的某个位置，就是浏览器滚动，它不移动，使用场景： 返回顶部功能

            上面几种都需要配合使用下面的位置属性：
            top:0px;
            right:0px;
            left:0px;
            bottom:30px;
        }
      */
        .fixed{
            position:fixed;
            right:0px;
            bottom:10px;
            color:white;
            background-color: rebeccapurple;
        }
        .relative{
            position: relative;
            height:100px;
            widht:500px;
            background-color: greenyellow;
        }
        .abs{
            position:absolute;
            right:0px;
            bottom:50%;
            background-color: red;
        }
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 详解</title>
</head>  
<link href="./qf.html" />
</head>
<body>
    <div class="c1">西瓜甜</div>
    <a href="#s1">
         <img src="meizi.jpg"/>
    </a>

    <div>
        <p id="sy" class="c2"> 鲨鱼</p>
        <p n="1" class="c1">
            兰博基尼
            <a> 宝马</a>
            牛头
        </p>
    </div>
    <div class="d1" id="div1">
        <p>
            我是第一层
            <span>span</span>
        </p>
        <a>
            <p>我是第二层</p>
        </a>
    </div>
    <a id="a1" n="1" class="c1">我是自定义的key=value</a>
    <p calss="c1">我是类</p>
    <div id="hover1">
        <a>我是伪类，鼠标放在我上面，我才会变</a>
    </div>

    <input type="text"/>
    <input type="text"/>
    <input type="password"/>

    <h2>下面是穿衣服</h2>
    <div class="s1" id="s1">穿衣服</div>

    <div style="height:100px;width:500px;background-color:brown;">
            <div class="bs">穿衣服</div>
    </div>
    <h2>设置隐藏</h2>
    <input type="button" value="妹子召之即来" onclick="showDiv();"/>
    <input type="button" value="妹子挥之即去" onclick="hideDiv();"/>

    <div id="m1" class="meizi">
           <img src="meizi.jpg" />
    </div>
    <!--执行脚本-->
    <script>
          <!--设置要显示时需要执行的函数-->
        function showDiv() {
                    document.getElementById('m1').classList.remove('meizi');
        }

        <!--设置要显示时需要执行的函数-->
           function hideDiv() {
                 document.getElementById('m1').classList.add('meizi');
        }
    </script>
    <br/>
    <a class="in-block1">设置display:inline-block 属性后,a标签可以设置高度了</a>
    <a class="in-block2">设置display:inline-block 属性后,a标签可以设置高度了</a>
    <div class="in-block1">设置display:inline-block 属性后,div标签也不独占了</div>
    <div class="in-block2">div</div>
    <br/>
    <!--画个边框-->
    <div style="height:100px;border:2px dashed blue;"></div>
    <br/>
    <!--边框的左侧有个小竖条-->
    <div style="background-color:#dddddd;border-left:10px solid red;padding:20px;">搜索</div>
    <br/>
    <!--在head中设置边框-->
    <div class="bk1">
        搜索，我含有伪类属性
    </div>
    <!--设置标签之间的边距-->
    <div class="margin">margin</div>
    <div class="margin-left">margin-left</div>
    <div class="margin-right">margin-right</div>
    <div class="padding">padding</div>
    <div class="padding-left">padding-left</div>

    <!--利用 position 设置 返回顶部-->
    <div class="fixed">返回顶部</div>
    <!--abolute in relative-->
    <div class="relative">
        我是 relative
        <div class="abs">
            我是相对于 relative 的绝对位置
        </div>
    </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
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

# CSS 之 如何布局一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--如何利用之前学到的知识，开始布局一个网页-->
    <style>
        /*页面要不要四周留白*/
        body{
            margin: 0;
        }
        /*页面中是否有一大块需要占整个页面大部分*/
        .w{
            /*自身宽度*/
            width: 980px;
            /*设置整个标签的位置
            margin：边距的意思
            0 上下距离不动，对于父级标签
            auto  左右去自适应，对于父级标签
            假如是:
            margin：0；
            设置的是上下左右
            假如是：
            margin:0 auto 0 auto;
            设置的顺序依次是：上、右、下、左
            */
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        /*设置页面头属性*/
        .pg-header{
            height: 48px;
            background-color: brown;
            color: white;
            /*字体上下居中*/
            line-height: 48px;
        }
        .pg-header .menus a{
            padding: 0 10px;
            display: inline-block;
        }
        /*设置伪类属性，效果是：鼠标放上后显示背景色*/
        .pg-header .menus a:hover{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <div class="menus left">
                <a href="#">菜单一</a>
                <a href="#">菜单二</a>
                <a href="#">菜单三</a>
                <a href="#">菜单四</a>
            </div>
            <div class="menus right">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">
            asdka;sdfjk;alsd

        </div>

    </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
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
67
68
69
70
71
72
73
74
75
76