css复习笔记
1. css样式值
1.1 文字样式
1 p{
2 font-size: 30px;/*设置文字大小*/
3 font-weight: bold;/*文字加粗*/
4 font-style: italic;/*文字倾斜*/
5 font-family: 幼圆;/*文字字体*/
6 }
1.2 文本样式
color 设置颜色,取值可以是单词也可以是十六进制的颜色值
text-align 水平对齐,取值:left/center/right,前提条件:横向位置有多余的空间才可以
vertical-align 垂直对齐，取值:top/middle/bottom
text-decoration:underline,line-through,overline,none 文本修饰,设置下划线，删除线，取消下划线等
line-height 行高，单位px
text-indent 首行缩进，单位:em（字符）或px
1 p{
2 font-size: 30px;/*设置文字大小*/
3 font-weight: bold;/*文字加粗*/
4 font-style: italic;/*文字倾斜*/
5 font-family: 幼圆;/*文字字体*/
6 color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */
7 text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/
8 text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/
9 line-height:60px;/*行高，设置完成后，文字默认垂直居中*/
10 text-indent: 2em;/*首行缩进，单位：px，em(字符)*/
11 }
12 img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/
13 }
1.3 列表项符号
1 li{
2 list-style-type: none;/*取消列表项符号*/
3 list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/
4 }
1.4 鼠标样式
1 cursor:pointer/*pointer 小手样式，help 帮助的样式 wait 等待的样式*/
2 span:hover{color: red; text-decoration: underline;cursor: pointer}
1.5 伪类
针对于鼠标的不同时间点，进行的css设置
分类:
:link 未点击之前
:hover 鼠标放上的时候
:active 鼠标点击时
:visited 鼠标访问后
语法：
选择器:伪类名{ css}
案例:
1 li:hover{css} 当鼠标放在li上面时。。。
2
3 li:hover{color: red;text-decoration: underline}
4
5 a:link{color: black;text-decoration: none}
6 a:hover{color: red; text-decoration: underline}
7 a:active{ color: green}
8 a:visited{color: gray}
1.6 DIV及背景属性
div 层标签，用来替代table,实现页面布局
div+css实现页面开发
1 div{
2 width: 200px;
3 height: 200px;
4
5 background-image: url("taobaolog.png");/*背景图片*/
6 background-repeat:no-repeat ;/*背景重复:repeat,no-repeat,repeat-x,repeat-y*/
7 background-position:50px 100px;/*位置的值先水平后垂直*/
8 }
2. 综合练习案例
复习：
html的基本结构
html的基本标签(标题,段落,换行，水平线，倾斜，加粗，超链接，图片，列表，表格，表单，css(位置，选择器，样式))
3.相关练习
练习1：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 p{
8 font-size: 30px;/*设置文字大小*/
9 font-weight: bold;/*文字加粗*/
10 font-style: italic;/*文字倾斜*/
11 font-family: 幼圆;/*文字字体*/
12 color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */
13 text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/
14 text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/
15 line-height:60px;/*行高，设置完成后，文字默认垂直居中*/
16 text-indent: 2em;/*首行缩进，单位：px，em(字符)*/
17 }
18 img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/
19 }
20 td{ vertical-align:top;}
21 li{
22 list-style-type: none;/*取消列表项符号*/
23 list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/
24 }
25 span{text-align: center;
26 }
27 /* tr{text-align: center}*/
28 li:hover{color: red;text-decoration: underline}
29 a:link{color: black;text-decoration: none}
30 a:hover{color: red; text-decoration: underline}
31 a:active{ color: green}
32 a:visited{color: gray}
33 span:hover{color: red; text-decoration: underline;cursor: pointer}
34 </style>
35 </head>
36 <body>
37 <a href="https://www.jd.com">京东</a><br>
38 <a href="https://www.taobao.com">淘宝</a><br>
39 <span>拼夕夕</span>
40 <ul>
41 <li>列表内容</li>
42 <li>列表内容</li>
43 <li>列表内容</li>
44 <li>列表内容</li>
45 <li>列表内容</li>
46 </ul>
47 <span>这是span标签</span>
48 <p>这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
49 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
50 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容
51 这是p标签的内容这是p标签的内容这是p标签的内容</p>
52 <a href="https://www.baidu.com">百度</a>
53 <p>
54 我是文字内容<img src="a3.jpg">
55 </p>
56 <table border="1" cellspacing="0" height="300px">
57 <tr>
58 <td>
59 aaaa
60 </td>
61 </tr>
62 </table>
63 </body>
64 </html>
颜色以及水平居中
显示结果：
练习2：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .title{ /*设置一级目录*/
8 font-size: 18px;
9 font-weight: bold;
10 line-height: 35px;
11 background-color: #0f7cbf;
12 text-indent: 1em;
13 color: white;
14 }
15 .content{ /*设置二级目录*/
16 font-size: 14px;
17 font-weight: bold;
18 line-height: 30px;
19 background-color: #e4f1fa;
20 color: #0f7cbf;
21 text-indent: 2em;
22 }
23 ul{
24 font-size: 12px;
25 line-height: 20px;
26 color: #666;
27 list-style-type: none;
28 padding-left: 20px;
29 }
30 .content a:link{
31 text-decoration: none;
32 color: #0f7cbf;
33 }
34 .content a:hover{ text-decoration: underline}
35
36 li a:link{text-decoration: none; color: #666}
37 li a:hover{color: #f60; text-decoration: underline}
38 .all{ width: 230px}
39
40 </style>
41 </head>
42 <body>
43 <div class="all">
44 <div class="title">家用电器</div>
45 <div class="content">
46 <a href="#">大家电</a>
47 </div>
48 <div>
49 <ul>
50 <li><a href="#">平板电视</a> 洗衣机 冰箱</li>
51 <li>空调 烟机/灶具 热水器</li>
52 <li>冷柜/酒柜 消毒柜 家庭影院</li>
53 </ul>
54 </div>
55 <div class="content">生活电器</div>
56 <div>
57 <ul>
58 <li>平板电视 洗衣机 冰箱</li>
59 <li>空调 烟机/灶具 热水器</li>
60 <li>冷柜/酒柜 消毒柜 家庭影院</li>
61 </ul>
62 </div>
63 <div class="content">厨房电器</div>
64 <div>
65 <ul>
66 <li>平板电视 洗衣机 冰箱</li>
67 <li>空调 烟机/灶具 热水器</li>
68 <li>冷柜/酒柜 消毒柜 家庭影院</li>
69 </ul>
70 </div>
71 <div class="content">五金家装</div>
72 <div>
73 <ul>
74 <li>平板电视 洗衣机 冰箱</li>
75 <li>空调 烟机/灶具 热水器</li>
76 <li>冷柜/酒柜 消毒柜 家庭影院</li>
77 </ul>
78 </div>
79 </div>
80 </body>
81 </html>
View Code
显示结果：
练习3：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 a {
8 text-decoration: none;
9 color: #666666;
10 font-size: 15px
11 }
12
13 a:hover {
14 text-decoration: none;
15 color: red
16 }
17
18 li {
19 background-image: url("dot_01.gif");
20 background-repeat: no-repeat;
21 background-position: 20px 2px;
22 /* border-bottom:red 1px solid;*/
23 }
24
25 li:hover {
26 background-image: url("dot_02.gif");
27 background-repeat: no-repeat;
28 background-position: 20px 2px
29 }
30
31 span {
32 color: white
33 }
34
35 ul {
36 list-style-type: none;
37 text-indent: 30px;
38 }
39
40 #beauty {
41 background-color: white;
42 width: 400px
43 }
44
45 p {
46 background-color: green
47 }
48
49 body {
50 background-color: #e4f1fa
51 }
52 </style>
53 </head>
54 <body>
55 <div id="beauty">
56 <p>大家都喜欢买的美容品</p>
57 <ul>
58 <li><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li>
59 <li><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
60 <li><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a></li>
61 <li><a href="#"><span>4</span> 巨型一号丝瓜水320ML</a></li>
62 <li><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a></li>
63 <li><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a></li>
64 <li><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
65 <li><a href="#"><span>8</span> SK-II护肤精华露 215ml</a></li>
66 <li><a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a></li>
67 </ul>
68 </div>
69
70
71 </body>
72 </html>
View Code
显示结果：
标签：入门,color,text,decoration,background,标签,font,快速,css From： https://www.cnblogs.com/deyo/p/17232043.html