CSS

1.样式

用class来定位

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*.开头，通过class来赋予样式*/
 6         .s1{
 7             background-color: red;
 8             height:24px;
 9             color: white;
10         }
11     </style>
12 </head>
13 <body>
14     <div style="background-color: blue;height: 40px;">1</div>
15     <span class="s1">2</span>
16     <div class="s1">3</div>
17     <div>4</div>
18 </body>
View Code

用ID来定位

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*通过ID来设置指定的样式*/
 6         #s1{
 7             background-color: red;
 8             height: 40px;
 9         }
10     </style>
11 </head>
12 <body>
13 <!--style的背景色,高度，rgb-->
14 <div style="background-color: blue;height: 40px;">1</div>
15 <div id="s1">2</div>
16 <div>3</div>
17 </body>
View Code

 通过标签来定位

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*.开头，通过class来赋予样式*/
 6         .s1{
 7             background-color: red;
 8             height:24px;
 9             color: white;
10         }
11         /*所有span默认的效果*/
12         span{
13             background-color: blue;
14             height: 40px;
15         }
16     </style>
17 </head>
18 <body>
19     <div style="background-color: blue;height: 40px;">1</div>
20     <span class="s1">2</span>
21     <span>3</span>
22     <div class="s1">4</div>
23     <div>5</div>
24 </body>
View Code

通过层级来定位

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*span标签下的div应用这个样式*/
 6         span div{
 7             background-color: red;
 8             height:20px;
 9         }
10         /*s1下面的s2应用这个样式， 只有441才会应用这个样式*/
11         .s1 .s2{
12             background-color: red;
13             color: white;
14         }
15     </style>
16 </head>
17 <body>
18 <div>11</div>
19 <div>22
20     <div class="s2">441</div>
21 </div>
22 <span class="s1">33
23     <div>331</div>
24 </span>
25 <div class="s1">44
26     <div class="s2">441</div>
27 </div>
28 </body>
View Code

通过组合来选择（并列）

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*class为s1,s2,s3的都应用这个样式*/
 6         .s1,.s2,.s3{
 7             background-color: red;
 8             height:20px;
 9         }
10     </style>
11 </head>
12 <body>
13 <div class="s1">11</div>
14 <div>22</div>
15 <span class="s3">33</span>
16 <div class="s2">44</div>
17 </body>
View Code

对选择的在进行一次属性过滤

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         /*寻找input，type是text的设置样式*/
 6         input[type='text']{
 7             background-color: red;
 8             height:20px;
 9         }
10         /*寻找class为s1并且内部含有n='text'来设置样式*/
11         .s1[n='text']{
12             background-color: blue;
13             height:20px;
14         }
15     </style>
16 </head>
17 <body>
18 <div>11</div>
19 <input class="s1" type="text" />
20 <input class="s1" n='text' type="password"/>
21 </body>
View Code

priority

标签中的最高级

head中style

1 无重叠时，相加

2 有重叠时，重复的部分取最下面的，不重复的部分相加

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .s1{
 6             background-color: red;
 7         }
 8         .s2{
 9             color:white;
10         }
11         .s3{
12             background-color: red;
13             color: white;
14         }
15         .s4{
16             background-color: blue;
17         }
18     </style>
19 </head>
20 <body>
21 <!--s1,s2无重叠，相加-->
22 <div class="s1 s2">11</div>
23 <!--s3,s4有重叠，重复的部分取离得近的-->
24 <div class="s3 s4">11</div>
25 </body>
View Code

添加默认样式

 1 /*添加默认样式css.css*/
 2 .s1{
 3     background-color: red;
 4 }
 5 .s2{
 6     color:white;
 7 }
 8 .s3{
 9     background-color: red;
10     color: white;
11 }
12 .s4{
13     background-color: blue;
14 }
View Code

 

1 <head>
2     <meta charset="UTF-8">
3     <title>Title</title>
4     <!--导入这个文件-->
5     <link rel="stylesheet" href="../css.css" />
6 </head>
7 <body>
8 <div class="s1 s2">11</div>
9 </body>
View Code

 

2. 边框boarder

其他可以定义的 border-top/right/left/bottom-color/style/width
1 <body>
2 <!-- board 边框solid 实线 dotted 虚线-->
3 <!--其他可以定义的 border-top/right/left/bottom-color/style/width-->
4 <div style="border: 1px solid red;">11</div>
5 <span style="border: 1px solid red;">11</span>
6 </body>
View Code

 

3. 字体格式

span/a 无法设置高度和宽度等

height 是整体的高度，若为百分比，则为占父的百分比，若父亲未定义高度，则孩子多高，父亲就多高，
width是整体的宽度,也可以是百分比。
font-size 字体大小
text-align 平行方向
line-height 垂直方向，放在中间，高度为height的高度
font-weight 加粗，不带px，只有固定的几个数值
 1 <body>
 2 <!-- board 边框solid 实线 dotted 虚线-->
 3 <!--其他可以定义的 border-top/right/left/bottom-color/style/width-->
 4 <div style="border: 1px solid red;">11</div>
 5 <span style="border: 1px solid red;">11</span>
 6 <!--height 是整体的高度，若为百分比，则为占父的百分比，
 7 width是整体的宽度,也可以是百分比。
 8 font-size 字体大小
 9 text-align 平行方向
10 line-height 垂直方向，放在中间，高度为height的高度
11 font-weight 加粗，不带px，只有固定的几个数值
12 -->
13 <div style="height: 50px;border: 1px solid red;width: 50px">hello</div>
14 <div style="height: 50px;border: 1px solid red;width: 50%;font-size: 40px; text-align: center;line-height: 50px;font-weight: 600;">hello</div>
15 </body>
View Code

4. 标签浮动

<!--float第一个浮动，加起来小于100%，所以第二个到了第一个的旁边,第二个不加float也可以，但是第一个必须加float-->
结尾可以加<div style"clear:both;"><\div>来阻止子节点的浮动
1 <body>
2 <!--float第一个浮动，加起来小于100%，所以第二个到了第一个的旁边,第二个不加float也可以，但是第一个必须加float-->
3 <div style="width: 20%;background-color: red;float: left">hello</div>
4 <div style="width: 60%;background-color: blue;float: right;">hello</div>
5 </body>
View Code

 

5. 边距

padding-top上方的像素增加
margin-top离上方的距离
margin:0 auto去掉默认边距
 1 <body>
 2 <div style="height:200px;border: 1px solid red;">
 3     <!--padding-top上方的像素增加-->
 4     <div style="height: 60px;background-color: blue; padding-top:10px;">hello</div>
 5     <div style="height: 40px;line-height: 40px">separate</div>
 6     <!--
 7     margin-top离上方的距离
 8     margin:0 auto去掉默认边距
 9     -->
10     <div style="height: 60px;background-color: blue; margin-top:10px;">hello</div>
11 </div>
12 </body>
View Code

 

6.position 固定在某个位置

1 <div style="width: 50px;height: 50px;background-color: black;color: white;position: fixed;bottom: 10px;right: 10px;">back to top</div>
View Code
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .pg-header{
 6             height: 40px;
 7             background-color: black;
 8             color: #dddddd;
 9             /*fix后变成了块级标签*/
10             position: fixed;
11             top: 0;
12             /*right: 0;*/
13             /*left: 0;*/
14             width: 100%;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 6000px;
19             margin-top: 50px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="pg-header" >title</div>
25 <div class="pg-body">content</div>
26 </body>
View Code

 

父标签中有relative, absolute相对于父标签来定位

正数为内部，负数为外部

1 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
2     父标签中有relative, absolute相对于父标签来定位
3     <div style="position: absolute;bottom: 0;left: 0;width: 50px;height: 50px;background-color: #dddddd;"></div>
4 </div>
5 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
6     <div style="position: absolute;top: 0;right: -51px;width: 50px;height: 50px;background-color: #dddddd;"></div>
7 </div>
View Code

 

7. span. div互相转换 

div 转换span display:inline 

span 转换div display:block

标签消失: display:none

display:inline-block，具有相互的属性

1 <body>
2 <!--div变成span,因为转换成span标签，所以高度设置无法生效 -->
3 <div style="background-color: red;height:50px;display: inline">hello</div>
4 <!--span变成div-->
5 <span style="background-color: blue;display: block">hi</span>
6 <span style="background-color: blue;height:50px;display: inline-block">hi</span>
7 </body>
View Code

为了使改变网页大小(如放大缩小等)而不改变内容的大小。需要最外面一层用像素表示

 

8. overflow

overflow: hidden 子若超过父亲大小，则隐藏
overflow: auto 子若超过父亲大小，则出现滚动条

1 <div style="height: 200px;width: 300px;overflow: auto">
2     <img src="test.jpg" />
3 </div>
View Code

 

9. hover

鼠标悬停在当前class的便签上，应用这个样式

1         /*鼠标悬停在当前class的便签上，应用这个样式*/
2         .pg-header .menu:hover{
3             background-color: black;
4         }
View Code

 

10.层级

opacity设置透明度

z-index设置层级，大的在上面

 1 <!--
 2 opacity设置透明度
 3 z-index设置层级，大的在上面
 4 -->
 5 <!--
 6 居中
 7 左上的点所在的位置
 8 top: 50%; left: 50%;
 9 反向移动
10 margin-left:-250px;margin-top:-200px;
11 -->
12 <div style="z-index:10;position: fixed;top: 50%; left: 50%;margin-left:-200px;margin-top:-150px;background-color: white;height: 300px;width: 400px"></div>
13 <div style="z-index:9;position: fixed;background-color: black;top: 0;bottom: 0;left: 0;right: 0;opacity: 0.8"></div>
View Code

 

11. background-repeat

1 <!--background-repeat: no-repeat 不重复-->
2 <div style="background-image: url('icon_18_118.png'); height: 80px; background-repeat: no-repeat;"></div>
3 <!--x轴重复-->
4 <div style="background-image: url('icon_18_118.png'); height: 80px; background-repeat: repeat-x;"></div>
5 <!--y轴重复-->
6 <div style="background-image: url('icon_18_118.png'); height: 800px; background-repeat: repeat-y;"></div>
7 <!--x,y都重复-->
8 <div style="background-image: url('icon_18_118.png'); height: 800px; background-repeat: repeat"></div>
View Code

background-position

1 <div style="height: 100px;"></div>
2 <!--background-position-x
3 background-position-y
4 背景图片的坐标 移动背景图片可以选择所需要的图片
5 -->
6 <div style="background-image: url(icon_18_118.png);height: 20px;background-repeat: no-repeat;border: 1px solid red;width:20px;background-position-x: 0;background-position-y: 10px;"></div>
7 <!--简写方法-->
8 <div style="background: url(icon_18_118.png) 0 -20px no-repeat; height: 20px; border: 1px solid red;width: 20px;"></div>
View Code

 

posted @ 2017-11-25 21:42  Demoncloud  阅读(162)  评论(0)  编辑  收藏  举报