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>

例子

posted @ 2021-01-21 11:41 讷言敏行~ 阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

讷言敏行

但知行好事，莫要问前程

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、选择器的优先级