CSS 基础篇

一、简介

1、CSS 定义

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。

属性和属性值用冒号隔开，以分号结尾。

2、 CSS 引入方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>引入css</title>
 7     <!-- 2.内嵌样式 -->
 8     <style>
 9         p{color:darkkhaki;}
10     </style>
11 
12     <!-- 3.外部引入 -->
13     <link rel="stylesheet" href="./ceshi.css" type="text/css">
14 </head>
15 <body>
16     <!-- 1.行内样式 -->
17     <div style="color:darkgreen">学习css 层叠样式表</div>
18     <p>这是一段话</p>
19     
20 </body>
21 </html>

CSS 引入方式

3、样式应用顺序

行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
!important
指定样式规则应用最优先

二、选择器（Selector）

1、基本选择器

（1）通用元素选择器

* 表示应用到所有的标签。

* {color: yellow}

（2）标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）

div {color: yellow}

（3）类选择器

匹配所有class属性中包含info的元素。

语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

（4）ID选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。

语法：#ID名{样式}（ID名不能以数字开头）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>常用选择器</title>
 7     <style>
 8         /* 通配选择器 *号代表所有标签 */
 9         *
10         {background-color: indianred;}
11         /* 标签选择器 */
12         h1
13         {color:darkmagenta}
14 
15         /* 类选择器 */
16         .ceshi1
17         {color:darkolivegreen}
18 
19         /* ID选择器 */
20         #ceshi2
21         {color:darkorange}
22 
23         /* 组合选择器 */
24         /* 越具体指定,越详细,优先级就越高 */
25         h2.ceshi1
26         {color:darkred;}
27         h3#ceshi2
28         {color:darkseagreen}
29 
30         h1,h2,h3,h4
31         {background-color: darkviolet;}
32 
33 
34     </style>
35 </head>
36 <body>
37     <!-- 
38         标签选择器 : 具体指定标签种类
39         类选择器   : 具体指定一类标签(用class修饰的类选择器)
40         ID选择器   : 具体指定一个标签(用id修饰的ID选择器) 
41     -->
42 
43     <h1>一级标签</h1>
44     <h2 class="ceshi1" >二级标签</h2>
45     <h3 id="ceshi2" >三级标签</h3>
46     <h4 class="ceshi1">四级标签</h4>
47 
48     
49 </body>
50 </html>

View Code

2、组合选择器

同时匹配h3,h4标签，之间用逗号分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

h2.ceshi1{color:darkred;}
h3#ceshi2{color:darkseagreen;}
<h2 class="ceshi1" >二级标签</h2>
<h3 id="ceshi2" >三级标签</h3>

3、关系选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>关系选择器</title>
 7     <style>
 8         
 9         /* 包含(后代)选择器 */
10         ul li
11         {color:tan;}
12         /* 父子选择器 */
13         ul>li
14         {color:red;}
15         /* 兄弟选择器 特指一堆 */
16         ol~li
17         {color:yellowgreen;}
18         /* 相邻选择器 特指一个 */
19         ol+li
20         {color:teal;} 
21 
22     </style>
23 </head>
24 <body>
25         <ul>
26             <li>梅花</li>
27             <li>三国演义</li>
28             <li>水浒传</li>
29             <ol>
30                 <li>羞答答的玫瑰,静悄悄的开</li>
31                 <li>钢铁是怎么弄折的</li>
32                 <li>盛和稻夫</li>
33             </ol>
34             <li>西游记</li>
35             <li>红楼梦</li>
36         </ul>
37     
38 </body>
39 </html>

View Code

4、属性选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>属性选择器</title>
 7     <style>
 8         input[name]
 9         {background-color: thistle;}
10         input[name=username]
11         {background-color: teal;}
12         input[type=password]
13         {background-color: violet;}
14         input[abc=nihao]
15         {background-color: yellow;}
16 
17     </style>
18 </head>
19 <body>
20     
21     <form action="" method="">
22         用户名: <input type="text" name="username">
23         <br>
24         密码  <input type="password" name="pwd">
25         <br>
26         邮箱 <input type="email" name="email">
27         <br>
28         <!-- input表单框里面可以自定义属性 -->
29         年龄 <input type="text" abc="nihao" >
30         <br>
31         <input type="submit">
32 
33 
34     </form>
35 
36 </body>
37 </html>

View Code

5、伪类选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>伪类选择器</title>
 7     <style>
 8         /*在鼠标悬停在a标签时,触发代码*/
 9         a:hover
10         {color:yellowgreen;}
11         /* 特指列表中的第一个 */
12         ul li:first-child
13         {color:blue;}
14         /* 特指列表中的最后一个 */
15         ul li:last-child
16         {color:brown}
17         /* 特指列表中的某一个 */
18         ul li:nth-child(6)
19         {color:cornflowerblue;}
20         /* 特指偶数个 */
21         ul li:nth-child(even)
22         {color:red;}
23         /* 2n 代表偶数个 */
24         ul li:nth-child(2n)
25         {color:cyan;}
26     
27         /* 特指奇数个 */
28         ul li:nth-child(odd)
29         {color:green;}
30         /* 2n-1 代表奇数个 */
31         ul li:nth-child(2n-1)
32         {color:tan;}
33         ul li:hover
34         {background-color: crimson;color:white;}
35     </style>
36 </head>
37 <body>
38     <a href="#"> 百度 </a>
39     
40     <ul>
41         <li>李琦</li>
42         <li>李雅琪</li>
43         <li>李炯辉</li>
44         <li>薛宇健</li>
45         <li>吴赔偿</li>
46         <li>王雨涵</li>
47         <li>石磊</li>
48         <li>王生福</li>
49     </ul>
50 
51 
52 </body>
53 </html>

View Code

6、伪对象选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>伪对象选择器</title>
 7     <style>
 8         #ceshi
 9         {background-color: darkgreen;color:white}
10         /* 在内容之前插入数据 */
11         #ceshi::before
12         {
13             content:"请问:";
14             color:red;
15         }
16         /* 在内容之后插入数据 */
17         #ceshi::after
18         {
19             content:"对✔";
20             color:orange;
21         }
22         /* 鼠标选中后的样式 */
23         #ceshi::selection
24         {
25             background-color:darkslategray;
26             color:dodgerblue;
27         }
28 
29 
30     </style>
31 
32 </head>
33 <body>
34 
35     <span id="ceshi">明天是周六,放假,对不对?</span>
36     
37 </body>
38 </html>

View Code

7、选择器的优先级

原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>选择器的优先级</title>
 7     <style>
 8         font
 9         {color:deeppink}
10         .one
11         {color:forestgreen;}
12         #two
13         {color:gold;}
14         font
15         {color:indianred!important;}
16 
17     </style>
18 </head>
19 <body>
20     <!-- 原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高 -->
21     <!-- 标签选择器 -> 类选择器 -> id选择器 -> 行内样式 -> !important(强制把优先级提升到最高) -->
22     <font style="color:blue;" class="one" id="two">234234</font>
23     
24 </body>
25 </html>

View Code

三. 常用属性

1.颜色属性

color:

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）

transparent :

全透明，使用方式：color: transparent;

opacity:

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。

2.字体属性

1. font-style: 用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示

2. font-weight: 设置文本的粗细

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

3. font-size: 设置字体的大小

默认值：medium
<absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用长度值指定文字大小，不允许负值。

4 . font-family：字体名称

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

5 . font：简写属性

语法：font：字体大小/行高字体;（字体要在最后）
font:italic bold 14px "楷体";

6.自定义字体名字

@符号是用来制定字体的规则,用来设置自定义的字体文件

 @font-face
        {
            font-family:"王文";
            src:url("./font/方正舒体.TTF");
        }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>字体属性</title>
 7     <style>
 8         /* @符号是用来制定字体的规则,用来设置自定义的字体文件 */
 9         @font-face
10         {
11             font-family:"王文";
12             src:url("./font/方正舒体.TTF");
13         }
14 
15         /* ul li:nth-child(1)
16         {background-color: red;} */
17         #one
18         {
19             background-color: yellow;
20             /* 字体倾斜 */
21             font-style:italic;
22             /* 字体粗线  */
23             font-weight: bold;
24             /* 字体大小 */
25             font-size: 14px;
26             /* 字体类型 : 微软雅黑 黑体 楷体 宋体... */
27             font-family:"楷体";        
28         }
29 
30         #two
31         {
32             background-color: red;
33             font:italic bold  14px "楷体";
34         }
35 
36         #three
37         {
38             background-color: blue;
39             color:white;
40             font:16px/4 "宋体";
41         }
42 
43         #four
44         {
45             font:32px/4 "王文";
46         }
47 
48         ul
49         {
50             /* 去掉列表前面的点 */
51             list-style: none;
52             /* 改变鼠标样式 */
53             cursor:cell;
54         }
55 
56 
57     </style>
58 </head>
59 <body>
60     <ul>
61         <li id="one">设置字体的相关样式1</li>
62         <li id="two">设置字体的相关样式2</li>
63         <li id="three">设置字体的相关样式3</li>
64         <li id="four">设置字体的相关样式4</li>
65     </ul>
66 
67 
68 </body>
69 </html>

试例

3. 文本属性

1. white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

2. text-align: 水平文字居中位置

left
center
right

3.line-height: 文本行高

height 和 line-height 如果数值相同,代表垂直方法居中
normal 默认

4. text-decoration 设置上下划线

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

5. text-shadow：文本阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
text-shadow: 5px 5px 5px #888;

6. word-wrap：自动换行

word-wrap: break-word;

7. text-indent: 文本缩进

em单位 1em = 1个元素的大小, 按照文字比例进行调整

text-indent: 2em;
text-indent: 32px;

8.vertical-align: 文本所在行高的垂直对齐方式

baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

9. letter-spacing: 添加字母之间的空白

10. word-spacing: 添加每个单词之间的空白

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>文本属性</title>
  7     <style>
  8         /* 1.把公共部分的样式提炼出来,减少冗余代码 */
  9         .common
 10         {
 11             width:200px;
 12             height:200px;
 13             font-size:14px;
 14             background-color: red;
 15             /* em单位 1em = 1个元素的大小, 按照文字比例进行调整 */
 16             /* 设置缩进 text-indent: 32px; */
 17             text-indent: 2em;
 18         }
 19 
 20         /* 2.如果是纯英文,不会默认换行 */
 21         .d1
 22         {
 23             /* 强制换行 */
 24             word-wrap: break-word;
 25         }
 26 
 27         /* 3.如果是中文,会默认换行 */
 28         .d2
 29         {
 30             /* 强制不换行 */
 31             white-space:nowrap ;
 32         }
 33 
 34         /* 4.height 和 line-height 如果数值相同,代表垂直方法居中 */
 35         .d3
 36         {
 37             width:200px;
 38             height:50px;
 39             line-height:50px;
 40             background-color: rosybrown;
 41         }
 42 
 43         /* 5.text-align 水平文字居中位置 left / center /right */
 44         .d4
 45         {
 46             width:500px;
 47             height:50px;
 48             line-height:50px;
 49             background-color: rosybrown;
 50             text-align: center;
 51         }
 52 
 53         /* 6.text-decoration 设置上下划线 */
 54         .lianjie
 55         {
 56             /* text-decoration:none; */
 57             /* text-decoration: overline ; 上划线*/
 58             text-decoration:line-through;  /*中划线*/
 59             text-decoration: underline ;   /*下划线*/
 60         }
 61 
 62         /*  7.vertical-align 文字和图片的上下位置关系 */
 63         .d5 img
 64         {
 65             /* top   middle  bottom  百分比*/
 66             vertical-align: -900%;
 67         }
 68 
 69 
 70         /* 
 71         8.text-shadow  设置文字阴影
 72         none： 无阴影 
 73         <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
 74         <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
 75         <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
 76         <color>： 设置对象的阴影的颜色。  
 77         */
 78         .d6
 79         {text-shadow:4px 4px 3px black;}
 80     </style>
 81 
 82 </head>
 83 <body>
 84     
 85     <div class="common d1">sdflsdfjkasdjkfasdjfkasjdkfjalsdfjlaskdjflakjsdlfkasdf</div>
 86     <br>
 87     <div class="common d2">水电费234水电费水电费水电费234水电费水电费水电费</div>
 88     <br>
 89     <div class="d3">设置行高</div>
 90     <br>
 91     <div class="d4">水平居中</div>
 92     <br>
 93     <a href="" class="lianjie">我是a连接</a>
 94     <br>
 95     <div class="d5">
 96         <img src="../../images/xiao.gif" alt="">
 97         小孩要喝奶
 98     </div>
 99     <br>
100     <div class="d6">这是文字阴影效果</div>
101     <br>
102     <br>
103     
104 </body>
105 </html>

试例

4.背景属性

1. background-color:背景颜色:

2. background-image 设置图像为背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

3. background-position 设置背景图像的位置坐标

background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴

4. background-repeat 设置背景图像不重复平铺

no-repeat 设置图像不重复，常用
round 自动缩放直到适应并填充满整个容器
space 以相同的间距平铺且填充满整个容器

5. background-size:背景图片大小

　　参数1:控制水平方向参数2:控制垂直方向　

background-size: 100% 100%;
background-size: 100% auto;

6. background-attachment 背景图像是否固定或者随着页面的其余部分滚动(了解)

7. background 简写

background: url("o_ns.png") no-repeat 0 -196px;

background: url("o_ns.png") no-repeat center bottom 15px;

background: url("o_ns.png") no-repeat left 30px bottom 15px;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>背景属性</title>
 7     <style>
 8         #c1
 9         {
10             width:500px;
11             height:500px;
12             border:solid 1px red;
13             background-color: blue;
14             /* 引入背景图 */
15             background-image: url("../images/tupian1.png");
16             /* 设置是否平铺: repeat-x  repeat-y  no-repeat  */
17             background-repeat: no-repeat;
18             /* 参数1:控制水平方向  参数2:控制垂直方向 */
19             /* background-position: 200px  50px; */
20             background-position: 50% 50%;
21             /* 固定背景图片(了解) */
22             background-attachment: fixed;
23         }
24 
25         #c2
26         {
27             width:500px;
28             height:500px;
29             border:solid 1px red;            
30             background:url("../images/tupian1.png") no-repeat 50% 50%;
31             background-color:green;
32         }
33 
34     </style>
35 </head>
36 <body>
37     <div id="c1"></div>
38     <div id="c2"></div>
39     <div style="height:1000px;"></div>
40     
41     
42 </body>
43 </html>

试例1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>背景图片引入</title>
 7     <style>
 8 
 9         .c1
10         {
11             width:55px;
12             height:50px;
13             border:dotted 5px green;
14             background: url("../images/tag.jpg") no-repeat;
15             background-position: -2px -11px;
16         }
17 
18         .c1:hover
19         {
20             background: url("../images/tag.jpg") no-repeat;
21             background-position: -314px -14.7px;
22         }
23 
24         .gy
25         {
26             width:500px;
27             height:500px;
28             border:solid 1px red;
29         }
30 
31         /* 导入一张背景图 */
32         .c2
33         {
34             background: url("../images/xiao.gif") no-repeat;
35             /* 参数1:控制水平方向  参数2:控制垂直方向 */
36             /* background-size: 100% 100%; */
37             background-size: 100% auto;
38         }
39 
40         /* 导入多张背景图 上面的图层优先写,下面的图层最后写,背景图之间用逗号,如果最后写完了用分号结尾;*/
41         .c3
42         {
43             background: 
44                 url("../images/game/map_05.gif") no-repeat 100px 100px,
45                 url("../images/game/map_05.gif") no-repeat 124px 100px,
46                 url("../images/game/map_05.gif") no-repeat 148px 100px,
47                 url("../images/game/map_05.gif") no-repeat 174px 100px,
48                 url("../images/game/map_05.gif") no-repeat 198px 100px,
49                 url("../images/game/map_17.gif") no-repeat 50px 50px,
50                 url("../images/game/map_20.gif") no-repeat 200px 200px,
51                 url("../images/game/map_03.gif");
52         }
53 
54     </style>
55 </head>
56 <body>
57     <div class="c1"></div>
58     <div class="c2 gy"></div>
59     <div class="c3 gy"></div>
60     
61 </body>
62 </html>

试例2

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志
decimal-leading-zero; 02.
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside
outside

list-style：缩写

四 .页面布局

1.边框

border-style：边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺时针）

border: 简写

border: 2px yellow solid;

border-top:solid 10px red;
border-bottom: dotted 10px blue;
border-left: groove 10px yellow;
border-right: double 10px green;

box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

2.盒子模型

一个标准的盒子

padding:用于控制内容与边框之间的距离,注意会增加盒子的宽和高

margin: 用于控制元素与元素之间的距离;

让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中;
margin:0 auto;

padding、margin	表示上右下左都应用
padding-top、margin-top	上
padding-right、margin-right	右
padding-bottom、margin-bottom	下
padding-left、margin-left	左

一个参数，应用于四边。

两个参数，第一个用于上、下，第二个用于左、右。

三个参数，第一个用于上，第二个用于左、右，第三个用于下。

3.position 规定元素的定位类型

static	默认值，没有定位，遵从正常的文档流
relative	相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
absolute	绝对定位元素，脱离正常文档流
fixed	固定(绝对)定位元素，固定在浏览器某处

通过以下四种属性进行定位

left:50px;
top:50px;
right:50px;
bottom:50px;
z-index:-1; 控制层叠关系,值越大,越靠上层,反之,越在下层

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>定位:相对定位</title>
 7     <style>
 8         .gy
 9         {
10             width:200px;
11             height:200px;
12             border:solid 1px red;
13         }
14         .d1
15         {background: orchid;}
16         /* 
17             position: relative; 是相对定位 
18             相对定位: 参考点相对于原来的起始位置进行定位
19             有了定位(相对,绝对,固定)之后,会触发如下几个属性
20             top right bottom left z-index      
21             z-index : 控制层叠关系,值越大,越靠上层,反之,越在下层  
22         */
23         .d2
24         {
25             background:palegoldenrod;
26             position: relative;
27             left:20px;
28             top:50px;
29             z-index:-1;
30         }
31         .d3
32         {background:palegreen;}
33         .d4
34         {background:paleturquoise;}
35     </style>
36 </head>
37 <body>
38     <div class="gy d1"></div>
39     <div class="gy d2"></div>
40     <div class="gy d3"></div>
41     <div class="gy d4"></div>
42 </body>
43 </html>

相对定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>定位:绝对定位</title>
 7     <style>
 8         /* 把所有标签默认添加的距离置0 */
 9         *
10         {margin:0px;padding:0px;}
11 
12         .gy
13         {
14             width:200px;
15             height:200px;
16             border:solid 1px red;
17         }
18         .d1
19         {background: red;position: relative;}
20         /* 
21             绝对定位:脱离文档流,下面的元素自动补齐 
22             绝对定位会参照他的父级做绝对定位,默认参照的浏览器body,
23             也可以通过在页面父级所在的div中加入position:relative作为参照点,做绝对定位
24             如果是兄弟元素,不能够做参考点,使用方式:
25                 (1) 把要定位的元素变成absolute
26                 (2) 把对应的父级元素变成relative                   
27         */
28 
29         .d2
30         {
31             background:palegoldenrod;
32             position: absolute;
33             z-index: -100;
34             bottom:0px;
35             right:0px;
36 
37         }
38         .d3
39         {background:blue;}
40         .d4
41         {background:paleturquoise;}
42         .bigbox
43         {border:solid 1px red;margin-top:100px;}
44 
45     </style>
46 </head>
47 <body>
48     <div class="bigbox">
49         <div class="gy d1"></div>
50         <div class="gy d2"></div>
51         <div class="gy d3"></div>
52         <div class="gy d4"></div>
53     </div>  
54 </body>
55 </html>

绝对定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>定位:固定定位</title>
 7     <style>
 8         .c1
 9         {
10             width:500px;
11             height:500px;
12             border:solid 1px red;
13             background: red;
14             position: fixed;
15         }
16 
17         /* 
18             transition取值：动画过度效果
19             <' transition-property '>： 检索或设置对象中的参与过渡的属性  默认为all
20             <' transition-duration '>： 检索或设置对象过渡的持续时间 
21             <' transition-timing-function '>： 检索或设置对象中过渡的动画类型 
22             <' transition-delay '>： 检索或设置对象延迟过渡的时间  
23         */
24 
25         img
26         {
27             width:100px;
28             height:100px;
29             border:solid 1px red;
30             position: fixed;
31             bottom:0px;
32             right:0px;
33             margin-right:-80px;  
34             transition: all 1s ease 0s;          
35         }
36         img:hover
37         {
38             margin-right:0px;
39             background-color: green;
40         }
41 
42 
43     </style>
44 </head>
45 <body>
46     <div>这是滋滋滋滋滋滋滋滋滋滋</div>
47     <div class="c1">固定定位</div>    
48     <div style="height:1000px;"></div>
49     <div>这是滋滋滋滋滋滋滋滋滋滋</div>
50 
51     <img src="../images/xiao.gif" alt="">
52 
53 </body>
54 </html>

固定定位

4 .display 转换元素

none 不显示。
block 显示为块级元素。
inline 显示为行内元素。
inline-block 行内块元素（会保持块元素的高宽）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>display 转换元素</title>
 7     <style>
 8         /* display:inline 转换成行内元素 */
 9         div
10         {display:inline;width:100px;height:100px;border:solid 1px red;}
11         /* display:block 转换成块状元素 */
12         span
13         {display:block;width:100px;height:100px;border:solid 1px red;}
14         /* display:inline-block 转换成行内块状元素 */
15         a
16         {display:inline-block;width:100px;height:100px;border:solid 1px red;}
17        /* display:none 隐藏元素 */
18         #yincang
19         {display: none;}
20 
21     </style>
22 </head>
23 <body>
24     <div>我是块状元素1</div>
25     <div>我是块状元素2</div>
26 
27     <span>我是行内元素1</span>
28     <span>我是行内元素2</span>
29 
30     <a href="#">我是连接1</a>
31     <a href="#">我是连接2</a>
32 
33     <div id="yincang">我是隐藏元素</div>
34 
35 </body>
36 </html>

View Code

5. float 浮动

让一行显示两个块级标签，会脱离文档流,后面的内容会自动补齐

none
left 左浮动
right 右浮动

clear 清除浮动,消除浮动产生的影响：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>浮动效果float</title>
 7     <style>
 8         .gg
 9         {width:150px;height:150px;border:solid 1px red;float:left;}
10         .c1{background:greenyellow;}
11         .c2{background: teal;}
12         .c3{background: tomato;}
13         .c4{background: gold;}
14 
15 
16 
17         .content2
18         {width:500px;height:500px;border:solid 1px red;}
19         .content2 .span1
20         {float:left;width:100px;height:100px;border:solid 1px red;}
21         .content2 .span2
22         {clear:both;display:block;width:100px;height:100px;border:solid 1px red;}
23     </style>
24 </head>
25 <body>
26     <!-- 
27         float:left 向左浮动
28         float:right 向右浮动
29         在浮动时,都会脱离开文档流,后面的内容会自动补齐 
30         作用:就是让块级元素在一行显示;
31         clear:both 作用:清除两边的浮动,消除浮动产生的影响;
32     -->
33     
34     <!-- 1.让块状元素浮动 -->
35     <div class="content">
36         <div class="c1 gg">1</div>
37         <div class="c2 gg">2</div>
38         <div class="c3 gg">3</div>
39         <div class="c4 gg">4</div>
40     </div>
41 
42     <!-- 
43         2.让行内元素浮动 
44         如果让行内元素浮动,默认会升级成行内块状元素,可设置宽高    
45     -->
46     <div class="content2">
47         <span class="span1">行内元素1</span><span class="span2">行内元素2</span>
48         
49     </div>
50 
51 </body>
52 </html>

View Code

6.float带来的问题:内容塌陷(高度没撑开)

子元素浮动时脱离文档流,会导致父级元素高度塌陷

解决方案:在父标签中使用伪对象选择器插入清除浮动效果

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>float带来的问题:内容塌陷(高度没撑开)</title>
 7     <style>
 8         .content1
 9         {border:solid 1px red;}
10         .gg
11         {width:150px;height:150px;border:solid 1px red;float:left;}
12         .c1{background:greenyellow;}
13         .c2{background: teal;}
14         .c3{background: tomato;}
15         .c4{background: gold;}
16 
17         /* 方法二:动态在内容中插入清除浮动效果 */
18         .content2
19         {border:solid 1px red;}
20         .content2::after
21         {
22             content:"";
23             display:block;
24             clear:both;
25         }
26 
27     </style>
28 </head>
29 <body>
30     <!-- 解决方案1 -->
31     <!-- <div class="content1">
32         <div class="c1 gg">1</div>
33         <div class="c2 gg">2</div>
34         <div class="c3 gg">3</div>
35         <div class="c4 gg">4</div>
36         <div style="clear:both;"></div>
37     </div>     -->
38 
39     <!-- 解决方案2 -->
40     <div class="content2">
41         <div class="c1 gg">1</div>
42         <div class="c2 gg">2</div>
43         <div class="c3 gg">3</div>
44         <div class="c4 gg">4</div>
45 
46     </div>    
47 
48 
49 </body>
50 </html>

试例

7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>overflow</title>
 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
 7 <style>
 8 .test {
 9     overflow: hidden;
10     width: 200px;
11     height: 100px;
12     background:blue;
13     color:red;
14     text-align: center;
15     /* 让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中; */
16     margin:0 auto;
17 }
18 </style>
19 </head>
20 <body>
21     <div class="test">
22         <p>苏打速度</p>
23         <p>苏打速度</p>
24         <p>苏打速度</p>
25         <p>苏打速度</p>
26         <p>苏打速度</p>
27     </div>
28 </body>
29 </html>
30

View Code

8.margin-top失效问题

父子结构时,margin-top会失效

如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>margin-top失效问题</title>
 7     <style>
 8         *
 9         {margin:0px;padding:0px;}
10         .content1
11         {width:100px;height:100px;background: lawngreen;margin-top:10px;}
12         
13         /* 如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用; */
14         .father
15         {width:100px;height:100px;background: magenta;overflow: hidden;}
16         .son
17         {width:50px;height:50px;background:mediumaquamarine;margin-top:10px;}
18     </style>
19 </head>
20 <body>
21     <!-- 单独的一个div -->
22     <div class="content1">我是内容1</div>
23     <div class="father">
24         <div class="son">子div</div>
25     </div>
26     
27 </body>
28 </html>

View Code

9.transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。
translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。

Transition 平滑过渡

transition-property：变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
transition-duration：变换持续时间
transition-timing-function：变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
transition-delay：变换延迟时间
transition：缩写

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

property 指定属性对应类型

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

支持执行transition效果的属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>nick</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         .img-see-2016-7-2 {
 9             background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
10             background-size: 660px;
11             background-repeat: no-repeat;
12             height: 300px;
13             width: 600px;
14 
15             transition-duration: 30s;
16             transition-timing-function: ease;
17             transition-property: background-size;
18         }
19         .img-see-2016-7-2:hover {
20             background-size: 2000px;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="img-see-2016-7-2"></div>
26 </body>
27 </html>

例子

CSS 基础篇

一、简介

1、CSS 定义

2、 CSS 引入方式

3、样式应用顺序

二、 选择器（Selector）

1、 基本选择器

（1）通用元素选择器

（2）标签选择器

（3）类选择器

（4）ID选择器

2、组合选择器

3、关系选择器

4、属性选择器

5、伪类选择器

6、伪对象选择器

7、 选择器的优先级

三. 常用属性

1.颜色属性

2.字体属性

1. font-style: 用于规定斜体文本

2. font-weight: 设置文本的粗细

3. font-size: 设置字体的大小

4 . font-family：字体名称

5 . font：简写属性

6.自定义字体名字

3. 文本属性

1. white-space: 设置元素中空白的处理方式

2. text-align: 水平文字居中位置

3.line-height: 文本行高

4. text-decoration 设置上下划线

5. text-shadow：文本阴影

6. word-wrap：自动换行

7. text-indent: 文本缩进

8.vertical-align: 文本所在行高的垂直对齐方式

9. letter-spacing: 添加字母之间的空白

10. word-spacing: 添加每个单词之间的空白

4.背景属性

1. background-color:背景颜色:

2. background-image 设置图像为背景

3. background-position 设置背景图像的位置坐标

4. background-repeat 设置背景图像不重复平铺

5. background-size:背景图片大小

6. background-attachment 背景图像是否固定或者随着页面的其余部分滚动(了解)

7. background 简写

5. 列表属性

四 .页面布局

1.边框

2.盒子模型

3.position 规定元素的定位类型

4 .display 转换元素

5. float 浮动

6.float带来的问题:内容塌陷(高度没撑开)

7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

8.margin-top失效问题

9.transform、transition 动画效果

二、选择器（Selector）

1、基本选择器

7、选择器的优先级