CSS属性讲解大集合

1. 字体
　　1. font-family
　　2. font-size
　　3. font-weight

2. 文本属性
　　1. text-align 对齐(重要)
　　2. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
　　3. text-indent 首行缩进

3. 背景属性
　　1. background-color 背景颜色
　　2. background-image 背景图片(九宫格涮葫芦娃) url() no-repeat 50% 50%

4. color
　　1. red (直接写名字)
　　2. #FF0000
　　3. rgb(255, 0, 0) --> rgba(255,0,0,0.5)

5. 边框属性 border
　　1. border-width (边框宽度)
　　2. border-style (边框样式)
　　3. border-color (边框颜色)
　　4. border-radius(圆角边框) -------50%取值应用于圆形边框
　　简写: border: 1px solid red;

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             color: RGB(255,255,255);
 9 
10             font-family: "Microsoft Yahei", "微软雅黑", "Arial";
11             font-weight: bold;
12             font-size: 18px;
13         }
14         div {
15             height :200px;
16             width: 600px;
17 
18         }
19         #d1 {
20             text-align: center;
21             background-color: deeppink;
22         }
23         #d2{
24             text-indent:150px;
25             background-color: blue;
26         }
27         #d3{
28             background-color: #666666;
29             background-image: url("https://dummyimage.com/200x100/ff0/f0f.png&text=backgroud");
30         }
31         #d4{
32             background-color: #666666;
33             background-image: url("https://dummyimage.com/200x100/0f0/f0f.png&text=backgroud");
34             background-repeat: no-repeat;
35         }
36         #d5{
37             background-color: #006666;
38             background-image: url("https://dummyimage.com/200x100/0f/f00.png&text=backgroud");
39             background-repeat: no-repeat;
40             background-position: 100px 100px;
41         }
42         #d6{
43             background-color: #060660;
44             border: 2px dashed orangered;
45         }
46         #d7{
47             color: darkmagenta;
48             line-height: 190px;
49             text-align:center;
50 
51             background-color: #066666;
52             border: 3px solid orangered;
53             border-radius: 100px;
54         }
55         #d8 {
56             visibility:hidden
57         }
58         #d9 {
59 
60             background-color: #660000;
61             border: 2px solid #060660;
62         }
63         #d10 {
64 
65             background-color: deeppink;
66             border: 4px solid yellow;
67         }
68         #d10>.c1 {
69             text-decoration: none;
70             font-weight: 900;
71             color: deepskyblue;
72         }
73          #d10>.c2 {
74 
75             font-weight: 900;
76             color: deepskyblue;
77         }
78 
79     </style>
80 </head>
81 <body>
82     <div id="d1">白日依山尽，font-weight:"bold"加粗</div>
83     <div id="d2">黄河入海流，text-indent 文本缩进150px</div>
84     <div id="d3">背景图background-image 重复6次铺满</div>
85     <div id="d4">背景图background-image no-repeat</div>
86     <div id="d5">背景图background-position: 水平100px 垂直100px</div>
87     <div id="d6">我设置了边框border:width style color 实线solid 虚线dashed</div>
88     <div id="d7">属性border-radius 可以呈现圆角边框的效果 想想正方形->圆形</div>
89     <div id="d8"></div>
90     <div id="d9">上面用visibility:hidden 隐藏了一个占位的div&nbsp;&nbsp;&nbsp;&nbsp;如果改用display:"none"属性，则也隐藏，且不占位！</div>
91     <div id="d10">对比下面两个链接的a标签 属性text-decoration: none去掉了装饰
92         <br>
93         <a class="c1" href="http://wwww.baidu.com">跳转到百度</a>
94         <br>
95         <a class="c2" href="http://wwww.baidu.com">跳转到百度</a>
96     </div>
97 </body>
98 </html>

View Code

6. CSS盒子模型
　　要习惯看浏览器console窗口那个盒子模型
　　1. content (内容)
　　2. padding (内填充) 调整内容和边框之间距离时使用这个属性
　　3. border (边框)
　　4. margin (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)

　　顺时针 top right bottom left——四个值
　　上下左右 ——两个值

7. display (标签的展现形式)
　　1. inline
　　2. block 菜单里面的a标签可以设置成block
　　3. inline-block
　　4. none (不让标签显示,不占位)

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11 
12         .c1 {
13             height: 50px;
14             border: 4px solid red;
15             background-color: yellow;
16 
17         }
18         .c2 {
19             height: 300px;
20             border: 3px dashed blue;
21             background-color: deeppink;
22 
23         }
24 
25 
26 
27         #d1 {
28             width: 10%;
29             float: left;
30         }
31         #d2 {
32             width: 30%;
33             float: left;
34         }
35         #d3 {
36             width: 40%;
37             float: right;
38         }
39         #d5 {
40             background-image: url("https://dummyimage.com/400x300/0f0/f0f.png&text=TestImage");
41             background-repeat: no-repeat;
42             background-position: center ,0;
43             background-attachment: fixed;
44         }
45 
46 
47 
48         .clearfix:after {
49             content: "";
50             clear: both;
51             display: block;
52         }
53 
54 
55     </style>
56 
57 </head>
58 <body>
59     <div class="clearfix">
60         <div id="d1" class="c1">一个DIV块A 高度 宽度可被设置</div>
61         <div id="d2" class="c1">一个DIV块B 宽度是浏览器页面宽度的30%</div>
62         <div id="d3" class="c1">一个DIV块C 宽度是浏览器页面宽度的40%</div>
63     </div>
64 
65     <i>斜体文本标签，属于内联标签 ，无法设置高度和宽度</i>
66     <div id="d4" class="c2">一个DIV块 1</div>
67     <div id="d5" class="c2">一个DIV块 2  CSS样式引入背景图片，且该图片位置被固定background-attachment: fixed;</div>
68     <div id="d6" class="c2">一个DIV块 3</div>
69 </body>
70 </html>

View Code

8. float(浮动)
　　1. 多用于实现布局效果
　　　　1. 顶部的导航条
　　　　2. 页面左右分栏 (博客页面:左边20%,右边80%)

　　2. float

　　　　1. 任何标签都可以浮动,浮动之后都会变成块级所以 a标签float之后就可以设置高和宽
　　3. float取值:
　　　　1. left
　　　　2. right
　　　　3. none 是默认值

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .c1 {
            height: 50px;
            border: 4px solid red;
            background-color: yellow;

        }
        .c2 {
            height: 300px;
            border: 3px dashed blue;
            background-color: deeppink;

        }



        #d1 {
            width: 10%;
            float: left;
        }
        #d2 {
            width: 30%;
            float: left;
        }
        #d3 {
            width: 40%;
            float: right;
        }
        #d5 {
            background-image: url("https://dummyimage.com/400x300/0f0/f0f.png&text=TestImage");
            background-repeat: no-repeat;
            background-position: center ,0;
            background-attachment: fixed;
        }



        .clearfix:after {
            content: "";
            clear: both;
            display: block;
        }


    </style>

</head>
<body>
    <div class="clearfix">
        <div id="d1" class="c1">一个DIV块A 高度 宽度可被设置</div>
        <div id="d2" class="c1">一个DIV块B 宽度是浏览器页面宽度的30%</div>
        <div id="d3" class="c1">一个DIV块C 宽度是浏览器页面宽度的40%</div>
    </div>

    <i>斜体文本标签，属于内联标签 ，无法设置高度和宽度</i>
    <div id="d4" class="c2">一个DIV块 1</div>
    <div id="d5" class="c2">一个DIV块 2  CSS样式引入背景图片，且该图片位置被固定background-attachment: fixed;</div>
    <div id="d6" class="c2">一个DIV块 3</div>
</body>
</html>

View Code

9. clear 清除浮动

　　清除浮动的副作用(内容飞出,父标签撑不起来)
　　1. 结合伪元素来实现
　　　　.clearfix:after {
　　　　content: "",
　　　　display: "block",
　　　　clear: both;
　　}

　　2. clear取值:
　　　　1. left
　　　　2. right
　　　　3. both

10. overflow
　　1. 标签的内容放不下(溢出)

　　2. 取值:
　　　　1. hidden --> 隐藏
　　　　2. scroll --> 出现滚动条
　　　　3. auto
　　　　4. scroll-x
　　　　5. scroll-y

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             padding: 0px;
 9             margin: 0px;
10         }
11         .c1 {
12             width: 150px ;
13             height: 200px;
14             border: 2px solid blue;
15             float: left;
16         }
17         .c2 {
18             width: 150px ;
19             height: 200px;
20             border: 2px solid blue;
21             float: left;
22             overflow: auto;
23         }
24 
25         .c3 {
26             width: 200px;
27             height: 200px;
28             border-radius: 60px;
29             border: 4px dashed deeppink;
30             background-color: chartreuse;
31             float: right;
32         }
33 
34         .c4,
35         .c5 ,
36         .c6 {
37             width: 200px;
38             height: 200px;
39             border-radius: 100px;
40             border: 4px dashed deeppink;
41             background-color: chartreuse;
42             float: right;
43         }
44 
45         #m2 {
46             max-width: 100%;
47         }
48         #m3 {
49             <!--max-width: 100%;-->
50         }
51 
52         .c6 {
53             overflow: hidden;
54         }
55         #m4 {
56             max-width: 100%;
57         }
58     </style>
59 </head>
60 <body>
61     <div class="c1">
62         朝辞白帝彩云间，千里江陵一日还，两岸猿声啼不住，轻舟已过万重山。
63         山不在高有仙则灵，水不在深有龙则灵,斯是陋室惟吾德馨。
64         我家大门前游过一群鸭，快来快来数一数，二四六七八。
65         文本内容过多，显示上超出区域，被称为内容溢出现象。
66     </div>
67     <div class="c2">
68         overflow: auto 文本超出显示区域的处理&nbsp;&nbsp;&nbsp;&nbsp;朝辞白帝彩云间，千里江陵一日还，两岸猿声啼不住，轻舟已过万重山。山不在高有仙则灵，水不在深有龙则灵，斯是陋室惟吾德馨。
69     </div>
70     <div class="c3">
71         <img id="m1" src="https://dummyimage.com/150x150/ff0/f0f.png&text=HeadImage1" alt="">
72     </div>
73     <div class="c4">
74         <img id="m2" src="https://dummyimage.com/220x220/0ff/f00.png&text=max-width百分百" alt="">
75     </div>
76     <div class="c5">
77         <img id="m3" src="https://dummyimage.com/220x220/f0f/00f.png&text=HeadImage3" alt="">
78     </div>
79     <div class="c6">
80         <img id="m4" src="https://dummyimage.com/220x220/f0f/00f.png&text=overflow-hidden" alt="">
81     </div>
82 
83 </body>
84 </html>

View Code

11. 定位 position
　　1. static(默认)
　　2. relative(相对定位 --> 相当于原来的位置)
　　3. absolute(绝对定位 -->相当对于定位过的前辈标签)
　　4. fixed (固定 --> 返回顶部按钮示例)

　　补充总结说明:下列三种是脱离文档流的（脱离，即离开原位置，且不再占位）
　　　　float
　　　　absolute
　　　　fixed

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0px;
 9             padding: 0px;
10 
11             width: 200px;
12             height: 100px;
13         }
14 
15         #d1 {
16             background-color: chartreuse;
17             border: 2px solid blue;
18         }
19         #d2 {
20             background-color: deeppink;
21             border: 2px solid blue;
22             position: relative;
23             top: 100px;
24             left: 100px;
25 
26 
27         }
28         #d3 {
29             background-color: purple;
30             border: 2px solid blue;
31             position: absolute;
32             top: 200px;
33             left: 400px;
34 
35         }
36         #d4 {
37             background-color: darkcyan;
38             border: 2px solid blue;
39             position: fixed;
40             right: 20px;
41             bottom: 20px;
42         }
43 
44 
45         #d5 {
46             background-color: yellow;
47             border: 2px solid magenta;
48         }
49 
50         #d6 {
51             background-color: yellow;
52             border: 2px solid blue;
53             position: relative;
54             top: 50px;
55             left: 50px;
56         }
57 
58     </style>
59 </head>
60 <body>
61     <div id="d1">位置position</div>
62     <div id="d2">
63         <div id="d5">原本位置</div>
64         <div id="d6">相对原本位置进行了偏移</div>
65     </div>
66     <div id="d3">绝对位置 absolute 设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位 上200px （右 下 ）左400px </div>
67     <div id="d4">固定位置 position=fixed 脱离正常文档流 当出现滚动条时，对象不会随着滚动,不能再设置为浮动float</div>
68 </body>
69 </html>

View Code

12. opacity (不透明度)
　　1. 取值0~1
　　2. 和rgba()的区别:
　　　　1. opacity改变元素\子元素的透明度效果
　　　　2. rgba()只改变背景颜色的透明度效果

13. z-index
　　1. 数值越大,越靠近你
　　2. 只能作用于定位过的元素
　　3. 自定义的模态框示例

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0px;
 9             padding: 0px;
10         }
11 
12         div {
13             background: yellowgreen;
14             border: 2px solid deeppink;
15             margin-bottom: 20px;
16         }
17 
18 
19         ul {
20             padding: 20px 20px;
21             list-style-type: none;
22         }
23 
24         .l1 {
25             border-bottom: 1px solid grey;
26         }
27 
28         /*将无效列表中的li标签通过display属性inline-block变成行内标签，从而实现一行显示*/
29         li.l2 {
30             display: inline-block;
31         }
32 
33         /*将a标签从行内内联标签通过display-block变成块标签，对块标签应用了内填充-扩充了a标签的可被点击范围*/
34         #d1 a {
35 
36             display: block;
37             height: 25px;
38             padding-top: 15px;
39             padding-bottom: 15px;
40             margin-top: 10px;
41             margin-bottom:10px;
42             text-decoration: none;
43 
44         }
45 
46         #d3 a {
47             color: darkmagenta;
48             text-decoration: none;
49             border-right: 1px solid red;
50             padding: 0 20px;
51         }
52 
53         a:hover {
54             color: yellow;
55         }
56 
57     </style>
58 </head>
59 <body>
60     <div id="d1">
61         <ul>
62             <li class="l1"><a href="">天天商城</a></li>
63             <li class="l1"><a href="">服装</a></li>
64             <li class="l1"><a href="">食品</a></li>
65             <li class="l1"><a href="">日用百货</a></li>
66         </ul>
67     </div>
68 
69     <div id="d2">我也是一个DIV 在没有特殊指定高度和宽度的的前提下 我依靠我的文字内容 支撑着DIV块的高度</div>
70 
71     <div id="d3">
72         <ul>
73             <li class="l2"><a href="http://www.baidu.com">百度</a></li>
74             <li class="l2"><a href="http://www.taobao.com">淘宝</a></li>
75             <li class="l2"><a href="http://www.sogo.com">搜狗</a></li>
76             <li class="l2"><a href="">知乎</a></li>
77         </ul>
78     </div>
79 
80 
81 </body>
82 </html>

View Code

posted @ 2020-04-11 21:14 CherryYang 阅读(284) 评论(0) 收藏举报

刷新页面返回顶部

CherryYang

CSS属性讲解大集合

公告