一：行内式
即在html标签中添加style属性，并在style中添加相关样式的属性
<p style="background-color: rebeccapurple">hello yuan</p>
二：嵌入式
在<head></head>标签内用<style></style>来编写css
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
三：链接式
利用html的<link>标签将一个css文件引入hml文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
四：导入式
用<style>标签将一个css文件引入html文件中
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
1.基础选择器
*： 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
#: Id选择器，匹配某个ID标签 #p1 {background: brown;}
.: class选择器，匹配相同类名的标签 .cdiv2{ font-size: 20px; color: aqua; }
标签选择器： 匹配同一中标签的标签 div{background: coral;}
具有相同class名，不同标签的匹配 div.cdiv3{font-size: 50px;}
具有相同id名，不同标签的匹配 div#cdiv3{font-size: 50px;}
id:相当于身份证，只能标识一个标签，
class:相当于名字，多个标签可以共用一个class名
2.组合选择器
E,F : 将id或类名或标签为E或F的元素都加以css样
div,p{font-size: 30px;color: coral}
E F : 将id或类名或标签为E的”后代"标签或id或类名为F的加以css
.cdiv2 .cdiv3{font-size: 50px;background: chartreuse;}
E>F: 将id或类名或标签为E的儿子标签或id或类名为F的加以css
#idiv2>.cdiv3{color: darkgreen;background: darkviolet;}
E+F: 将id或类名或标签名为E的相邻标签或id或类名为F的加以css
div+p{color: brown;background: aqua;}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 <!--#p1{--> 8 9 <!--background: brown;--> 10 <!--}--> 11 <!--#p2{--> 12 <!--background: coral;--> 13 <!--}--> 14 <!--#p3{--> 15 <!--background: darkgoldenrod;--> 16 <!--}--> 17 <!--.cdiv1{--> 18 <!--font-size: 10px;--> 19 <!--color: chartreuse;--> 20 21 <!--}--> 22 <!--.cdiv2{--> 23 <!--font-size: 20px;--> 24 <!--color: aqua;--> 25 26 <!--}--> 27 <!--div{--> 28 29 <!--background: coral;--> 30 <!--}--> 31 <!--div.cdiv3{font-size: 50px;}--> 32 /*#idiv1,#ip1{font-size: 30px;color: coral}*/ 33 /*.cdiv2 .cdiv3{font-size: 50px;background: chartreuse;}*/ 34 #idiv2>.cdiv3{color: darkgreen;background: darkviolet;} 35 div+p{color: brown;background: aqua;} 36 </style> 37 </head> 38 <body> 39 40 <!--<p id="p1">this is p1</p>--> 41 <!--<p id="p2">this is p2</p>--> 42 <!--<p id="p3">this is p3</p>--> 43 <!--<div id="div1" class="cdiv1">this is div1</div>--> 44 <!--<div id="div2" class="cdiv2">this is div2</div>--> 45 <!--<p class="cdiv3">this is cdiv3</p>--> 46 <!--<div class="cdiv3">this is cdiv3</div>--> 47 <div clas="cdiv1" id="idiv1">this is div1</div> 48 <p class="cp1" id="ip1">this is p1</p> 49 <div class="cdiv2" id="idiv2"> 50 <p class="cp2" id="ip2">this is p2 under cdiv2</p> 51 <div class="cdiv3" id="idiv3"> 52 this is div3 uner cdiv2 53 <div class="cdiv5" id="idiv5"> 54 this is div5 uner cdiv3 55 </div> 56 </div> 57 </div> 58 <div class="cdiv4" id="idiv4"> 59 <p class="cp3" id="ip3">this is p3 under cdiv4</p> 60 </div> 61 62 </body> 63 </html>
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。
3.属性选择器
[att] 匹配属性为att的标签
[top]{font-family: "Comic Sans MS";color: brown}
[att=“value”] 匹配属性att的值为value的标签
[top="div2"]{font-family: "Arial Black";color: chartreuse}
E[att="value"] 匹配标签为E属性为att的值为value的标签
p[top="div1"]{color: red}
E[att~=val] 匹配标签为E所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
div[top~="div1"]{color: darkorchid}
[attr^=val] 匹配属性值以val开头的每个标签
[s^="s"]{font-size: 40px;}
[attr*=val] 匹配属性值中包含指定值的每个元素
[s*="i"]{color: greenyellow}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 [top]{font-family: "Comic Sans MS";color: brown} 8 [top="div2"]{font-family: "Arial Black";color: chartreuse} 9 p[top="div1"]{color: red} 10 div[top~="div1"]{color: darkorchid} 11 [s^="s"]{font-size: 40px;} 12 [s*="i"]{color: greenyellow} 13 </style> 14 </head> 15 <body> 16 <div top="div1">this is div1</div> 17 <p top="div2">this is p1</p> 18 <p top="div1">this is p2</p> 19 <div top="div2 div">this is div2</div> 20 <div top="div2 div1">this is div3</div> 21 <span s="string">this is span</span> 22 </body> 23 </html>
4.伪类
a:link a:link{color:orange}/*链接默认颜色*/
a:hover a:hover{color: red;font-size: 50px}/*鼠标移动到链接上的颜色*/
a:visited a:visited{color: green}/*点击过的链接的颜色*/
a:active a:active{color: olive}/*点击时链接的颜色*/
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a:link{color:orange}/*链接默认颜色*/ 8 a:hover{color: red;font-size: 50px}/*鼠标移动到链接上的颜色*/ 9 a:visited{color: green}/*点击过的链接的颜色*/ 10 a:active{color: olive}/*点击时链接的颜色*/ 11 .index{width: 100px} 12 .top,.buttom{ 13 14 width: 100px; 15 height: 100px; 16 background: green; 17 } 18 19 20 .index:hover .top{ 21 background: orange; 22 23 } 24 p:after{ 25 content: "前端学习css"; 26 color: orange; 27 } 28 </style> 29 </head> 30 <body> 31 <a href="css四种基本选择器.html">www.baidu.com</a> 32 <div class="index"> 33 <div class="top"></div> 34 <div class="buttom"></div> 35 </div> 36 <p>hellow world</p> 37 </body> 38 </html>
5 css优先级和继承
优先级：所谓CSS优先级，即那种css样式最终被显示
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1 内联样式表的权值最高 style=""-------------------1000； 2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100 3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10 4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1
按这些规则将数字符串逐位相加，就得到最终的权重
CSS的继承性:
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} <p>helloyuan</p>
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低。
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
附加说明：
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照就近原则。 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
1.颜色属性
<div style="color:#ffee33">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>#a为透明度0-1
2.字体属性
font-size: 20px font-family:'Lucida Bright' font-weight: lighter/bold/border/
3.背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>Title</title> 6 6 <style> 7 7 .div1{ 8 8 color:rgba(40,60,80,0.2); 9 9 font-size: 30px; 10 10 font-weight: bold; 11 11 12 12 } 13 13 .div2{ 14 14 width:300px; 15 15 height: 300px; 16 16 border: 1px solid red; 17 17 /*background: orange;*/ 18 18 background-image: url("meinv2.jpg"); 19 19 background-repeat: no-repeat; 20 20 /* background-position:right top;*/ 21 21 background-position: 30px -50px; 22 22 } 23 23 .div3{ 24 24 /*display: inline-block;*/ 25 25 width: 20px; 26 26 height: 20px; 27 27 background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13"); 28 28 background-position: 0 -100px; 29 29 } 30 30 </style> 31 31 </head> 32 32 <body> 33 33 <div class="div1"> 34 34 this is div1 35 35 </div> 36 36 <div class="div2"> 37 37 </div> 38 38 <div class="div3"></div> 39 39 </body> 40 40 </html>
4 文本属性
font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-indent: 150px; 首行缩进 letter-spacing: 10px;字母之前的间距 word-spacing: 20px;单词之间的间距 text-transform: capitalize;首字母大写
5 边框属性
border-style: solid; border-color: chartreuse; border- 20px; 简写：border: 30px rebeccapurple solid;
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>Title</title> 6 6 <style> 7 7 .div1{ 8 8 width: 400px; 9 9 height: 100px; 10 10 font-size: 20px; 11 11 background: orange; 12 12 /*text-align: center;*/ 13 13 /*line-height: 100px;*/ 14 14 text-indent: 30px; 15 15 letter-spacing: 10px; 16 16 text-transform: capitalize; 17 17 18 18 } 19 19 .div2{ 20 20 width: 100px; 21 21 height: 100px; 22 22 border-color: red; 23 23 border-style: dashed; 24 24 border-width:3px; 25 25 } 26 26 </style> 27 27 </head> 28 28 <body> 29 29 <div class="div1"> 30 30 文本属性v 31 31 hello this si text 32 32 </div> 33 33 <div class="div2"></div> 34 34 </body> 35 35 </html>
6.列表属性
ul,ol{list-style: none;}
7.display属性
none #隐藏相应标签 block #快标签属性，可以设置长宽，但不能在同一行 inline #内联属性 ，不可以设置长宽，可以在同一行 inline-block #内联-块属性，既可以设置长宽，也可在同一行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul,ol{list-style: none} 8 div,p,span,a{width: 100px;height: 100px} 9 div{background: orange;display: inline-block} 10 p{background: green;display: inline-block} 11 a{background: darkorchid;display: block} 12 span{background: blue;display: block} 13 </style> 14 </head> 15 <body> 16 <ul> 17 <li>123</li> 18 <li>456</li> 19 <li>789</li> 20 </ul> 21 <ol> 22 <li>qwe</li> 23 <li>asd</li> 24 <li>zxc</li> 25 </ol> 26 <dt> 27 <dt>qwe</dt> 28 <dd>wsx</dd> 29 <dd>qaz</dd> 30 <div>hthfthft</div> 31 <p>sdsdsdsd</p> 32 <span>dwadwadfwaf</span> 33 <a href="#">链接</a> 34 35 </dt> 36 </body> 37 </html>
8.外边距和内边
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框) 围绕在内边距和内容外的边框。
- Content(内容) 盒子的内容，显示文本和图像。
margin边框顺序
margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左
margin collapse（边界塌陷或者说边界重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则
1.兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2.父子div:如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin ；
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位(脱离文档流相当于在原文档流上面)
只有绝对定位absolute和浮动float才会脱离文档流。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1{ 8 width: 100px; 9 height: 100px; 10 background-color: aqua; 11 float: left} 12 .div2{width: 200px;height: 100px;background-color: gold;} 13 .div3{width: 100px;height: 200px;background-color: green; 14 float: left;} 15 .div4{width: 300px;height: 300px;background-color: deeppink} 16 </style> 17 </head> 18 <body> 19 <div class="div1"></div> 20 <div class="div2"></div> 21 <div class="div3"></div> 22 <div class="div4"></div> 23 </body> 24 </html>
清除浮动
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
举例：由于设置浮动所以该框1会脱离文本流，会导致下面的框顶上来，如果框1父级内的所有标签都设置了浮动，下面的框会认为父框不存在
方法一：伪类
.clearfix:after{
content: "";
display: block;
clear: both;
}
方法二：
overflow: hidden;
1.static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2 position: relative／absolute
relative相对定位
relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对 定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文 档流中偏移位置。而其层叠通过z-index属性定义。
position: relative; top: -120px; left: 360px;
absolute绝对定位
定义：设置为绝对定位的元素框脱离文本流，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于body进行定位（即body元素）
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可
position: absolute; left: 150px; top: 100px;
3. position:fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以body为参考点进行定位，当出现滚动条时，对象不会随着滚动注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流
position: fixed; right: 120px; bottom: 120px;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0px; 9 } 10 .alex{ 11 width: 200px; 12 height: 100px; 13 background-color: aquamarine; 14 } 15 .outer{ 16 width: 800px; 17 height: 800px; 18 border: 2px rebeccapurple solid; 19 background-color: green; 20 /*position:relative;*/ 21 /*left: 50px;*/ 22 /*top: 50px;*/ 23 } 24 .div1{ 25 width: 200px; 26 height: 200px; 27 background-color:gray; 28 /*position: relative;*/ 29 /*top: 100px;*/ 30 /*left: 100px;*/ 31 /*position: absolute;*/ 32 /*left: 150px;*/ 33 /*top: 100px;*/ 34 35 } 36 .div2{ 37 width: 200px; 38 height: 100px; 39 background-color: gold; 40 /*position:relative;*/ 41 /*top:50px;*/ 42 /*left: 300px;*/ 43 } 44 .outer2{ 45 width: 100%; 46 height: 2000px; 47 background-color: deeppink; 48 /*position: relative;*/ 49 /*top: -120px;*/ 50 /*left: 360px;*/ 51 } 52 .outer3{ 53 width: 80px; 54 height: 80px; 55 background-color: gold; 56 color: green; 57 position: fixed; 58 right: 120px; 59 bottom: 120px; 60 } 61 </style> 62 </head> 63 <body> 64 <div class="alex"></div> 65 <div class="outer"> 66 <div class="div1"></div> 67 <div class="div2"></div> 68 </div> 69 <div class="outer2"></div> 70 <div class="outer3">返回顶部</div> 71 </body> 72 </html>
4 仅使用margin属性布局绝对定位元素
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以该文档流中原来所在的位置上偏移参照物。