CSS指的就是层叠样式表（Cascading Style Sheets），用来控制网页数据的显示，可以使网页的表现与数据内容分离。
CSS有四种引入方式：
①行内式，就是直接在标签的style属性中直接设置，这种方式，个人感觉对后期维护不太好，所以一般不用，比如：
<div style="background-color: red">Hello CSS</div>
②嵌入式，就是在head标签中设置<style></style>来实现，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; width: 100%; height: 500px; } </style> </head> <body> <div>Hello CSS</div> </body> </html>
③链接式，通过link将css文件引入，如：
test.css
div{ background-color: red; width: 100%; height:500px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body> <div>Hello CSS</div> </body> </html>
④导入式，在head标签中，在<style></style>通过@import来导入，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "test.css"; /*导入式有一个问题就是: 在整个页面加载完之后再装载CSS文件,如果网页比较大的话,就会导致显示无样式的页面,闪烁一下再出现页面样式*/ </style> </head> <body> <div>Hello CSS</div> </body> </html>
选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /* '*'是一个通用选择器,可以匹配body下的所有标签*/ /**{*/ /*color: #84a42b;*/ /*}*/ /*通过标签来设置样式*/ div{ color: #000; } /*通过id来设置样式*/ #p1{ color: #783d0c; } /*通过class来设置样式*/ .pclass{ color: #339900; } /*在进行组合设置样式的时候,中间用逗号隔开*/ #p2,.dclass{ background-color: #339900; } /*后代样式 通过空格来实现 比如可以通过outer来控制它的后代div元素*/ .outer div{ color: red; } /*子代样式 通过>来实现,只能控制子代,它是控制不了class=dii的div标签的*/ .outer > div{ color: burlywood; } /*相邻兄弟标签,只能向下找 并且找的是相邻的,如果中间隔了别的标签,就找不到了*/ .dclass + div{ color: aqua; } /*属性选择器*/ /*只要有name属性的都会变化*/ [name]{ color: crimson; } /*多个属性值,其中有一个值等于B*/ [name ~= "B"]{ color: blue; } /*以A开头的属性值*/ [name ^= "A"]{ color: blueviolet; } /*以C结尾的属性值*/ [name $= "C"]{ color: coral; } /*属性值包含B的元素*/ [name *= "B"]{ color: rosybrown; } /*伪类*/ .aclass:link{ color: black; } .aclass:hover{ color: red; } .aclass:visited{ color: green; } .aclass:active{ color: yellow; } /*after*/ .add:after{ content: "after"; color: red; } /*悬浮小案例*/ .top,.bottom{ width: 100px; height: 100px; background-color: green; } .top:hover{ background-color: #783d0c; } .bottom:hover{ background-color: #204982; } </style> </head> <body> <div>基础选择器标签</div> <p id="p1">基础选择器id</p> <p class="pclass">基础选择器class</p> <!--组合选择器--> <p id="p2">组合p2</p> <div>div class='dclass'的上面</div> <div class="dclass">组合class</div> <div>div class='dclass'的下面</div> <div>div class='dclass'的下下面</div> <!--嵌套--> <div class="outer"> <div class="inner1"> <p class="pi">内部的p标签</p> <div class="dii">和p同级的div</div> </div> <p>和div同级的p</p> <div class="inner2">inner2 div</div> </div> <!--嵌套需要注意的问题: ①块级元素可以包含内联元素和某些块级元素,但是内联元素不能包含块级元素,它只能包含其他的内联元素 ②有几个特殊的块级元素只能包含内联元素,不能包含块级元素,如hn,p,dt ③li内可以包含div ④块级元素与块级元素并列,内联元素与内联元素并列--> <!--属性选择器--> <!--语法格式 元素名字[元素类型="类型名字"]:选择器名字{ 属性:值 } 在进行匹配元素可以使用类型正则的匹配方式: E[att]:匹配所有具有att属性的E元素 比如:p[title]{color:red;} E[att=val]:配att=val的E元素 比如:div[class='error']{color:red;} E[att~=val]:匹配所有att属性具有多个空格分隔其中一个值等于val的E元素 比如:td[class~="name"]{color=red;} E[att^=val]:匹配属性值以指定开头的每个元素 比如:div[class^="test"]{color:red;} E[att$=val]:匹配属性值以指定结尾的每个元素 比如:div[class$="test"]{color:red;} E[att*=val]:匹配属性值包含指定值的每个元素 比如:div[class*="test"]{color:red;} --> <div name="A B">A和B</div> <div name="C">C</div> <div name="AB">AB</div> <div name="BC">BC</div> <div>没name属性</div> <!--伪类:就是css已经为我们定义好了一些选择器,我们可以通过 选择器:伪类{属性名:值} 来定义 常用的伪类有: a:link:没有接触过链接,也就是链接的常规状态 a:hover:鼠标放在链接上显示的状态 a:visited:访问过的链接,比如阅读过文章,表示已经阅读了 a:active:鼠标按下时的状态 after和before:之后和之前插入的内容--> <div> <a class="aclass" href="test.html">百度一下</a> </div> <div class="add">测试添加</div> <!--悬浮小案例--> <div class="box"> <div class="top"></div> <div class="bottom"></div> </div> </body> </html>
优先级: 也就是CSS样式在浏览器中被解析的先后顺序，规则如下：
①直接在标签里面的写样式的权值最高， style="" --------->1000
②ID属性来设置， #id --------->100
③class属性来设置， .class -------->10
④直接通过标签名来设置，比如： p ----------->1
权值的高低，可以通过这些来设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #pid{ color: red; } .pclass{ color: burlywood; } p{ color: yellow; } </style> </head> <body> <!--虽然最后设置的p为yellow,但是green的权值最高,所以显示的green颜色--> <p class="pclass" id="pid" style="color: green">最终的颜色</p> </body> </html>
其他常用的属性：
①背景属性，background-repeat：no-repeat（repeat表示平铺满）
background-position：背景位置，横向：left center right 纵向：top center bootom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ width: 100px; height: 600px; background-image: url("girl.jpg"); background-repeat: no-repeat; background-position: center center; } </style> </head> <body> </body> </html>
②文本属性：font-size --->文本大小
text-align:center --->横向排列
line-height:200px --->文本行高，通俗的讲可以是文本垂直居中
vertical-align:-4px --->设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效
text-indent:150px --->首行缩进
letter-spacing:10px --->设置字与字之间的间距
word-spacing:20px --->设置单词与单词之间的间距
text-transform:capitalize --->单词首字母大写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: #99aecb; /*设置文本居中*/ text-align: center; /*首行缩进*/ text-indent: 100px; /*设置字与字之间的距离*/ letter-spacing: 20px; /*单词与单词之间的距离*/ word-spacing: 50px; /*单词首字母大写*/ text-transform: capitalize; } </style> </head> <body> <div>文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本 介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本 介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 绍文本介绍文本介绍文本介绍</div> <div>hello text</div> </body> </html>
③表框属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; /*设置边框的样式*/ /*border-style: solid;*/ /*设置边框的颜色*/ /*border-color: green;*/ /*设置边框的大小*/ /*border-width: 20px;*/ /*以上可以统一来写*/ border: 10px solid red; } </style> </head> <body> <div>边框属性</div> </body> </html>
③列表属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ol,ul,dl{ /*设置列表的样式*/ list-style: circle; } </style> </head> <body> <ol> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ol> <ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li> </ul> </body> </html>
④display属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,p,span,a{ width: 200px; height: 100px; } .div1{ background-color: #99aecb; /*inline将块级标签改为内联标签*/ /*display: inline;*/ /*none 隐藏*/ /*display: none;*/ } span{ background-color: #84a42b; /*block改为块级标签*/ /*display: block;*/ /*inline-block 内联和块联*/ display: inline-block; } .div2{ word-spacing: 20px; } </style> </head> <body> <div class="div1">div111111111111111</div> <p>pppppppppppppppppp</p> <div class="div2"> <span>spannnnnnnnnn</span> <a href="#">click kkkkkkkkkk</a> </div> </body> </html>
⑤外边距和内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ background-color: green; width: 300px; height: 300px; } /* margin:元素与元素之间的距离 margin:20px 20px 20px 20px 上 右 下 左 margin:20px 20px 20px 上 右左 下 margin:20px 20px 上下 右左 margin:20px 上右下左 padding:元素内容与边框之间的距离 border:边框 content:盒子的内容 显示文本可图像 */ .div2{ background-color: blue; width: 100px; height: 100px; margin: 30px 100px; } </style> </head> <body> <div class="div1"> <div class="div2"></div> <div class="div2"></div> </div> </body> </html>
⑥float属性：设置float属性的元素会根据属性值向左或向右浮动，被设置的元素称为浮动元素，浮动元素会从普通文档流中脱离，但是浮动元素影响的不仅仅是自己，它会影响周围的元素对齐进行环绕；我们刚才提到文档流，那么什么是文档流呢？文档流指的是元素在排版布局的过程中，会自动从左往右，从上往下的流式排列，而脱离文档流就是从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位，只有绝对定位absolute和浮动float才会脱离文档流。比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color: greenyellow; padding: 10px; width: 500px; } .float-ele{ float: left; margin: 10px; padding: 10px; background-color: blueviolet; width: 100px; text-align: center; } </style> </head> <body> <div class="box"> <span class="float-ele"> 浮动元素 </span> 普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档 普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档 普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档普通文档 </div> </body> </html>
效果图：
看了上面的案例，我们在了解一些概念，包含块，就是里浮动元素最近的块级祖先元素，比如上面案例的div.box就是span元素的包含块。浮动元素有一个特性就是不管是内联元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用作横向配列的菜单，可以设置大小并且可以横向排列。
使用float的时候，需要注意的一些规则，浮动元素在浮动的时候，其margin不会超过包含块的padding也就是说浮动位置不能超过包含块的内边界；如果有多个浮动元素，后面浮动元素的margin不会超过前面的margin，也就是说，浮动元素会按照顺序排下来，而不会发生重叠；如果两个元素一个向左浮动，一个向右浮动，左浮动的marginRight不会和右浮动的marginLeft相邻，比如：
第一种情况：包含块的宽度大于两个浮动元素的宽度的综合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color: gray; width: 500px; height: 100px; } .rule1{ float: left; margin: 10px; padding: 10px; background-color: firebrick; width: 100px; text-align: center; } .rule2{ float: right; margin: 10px; padding: 10px; background-color: yellowgreen; width: 100px; text-align: center; } </style> </head> <body> <div class="box"> <span class="rule1"> 浮动元素1 </span> <span class="rule2"> 浮动元素2 </span> </div> </body> </html>
效果图：
第二种情况：包含块的宽度小于两个浮动元素宽度的和
我们将两个浮动元素的宽度分别都设置成300px，效果如：
浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个元素的底端，也就是说如果有多个浮动元素，后面元素的高度不会超过前面的高度，并且不会超过包含块，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color: grey; padding: 10px; width: 500px; height: 400px; } .rule1{ float: left; margin: 10px; padding: 10px; background-color: greenyellow; width: 250px; text-align: center; } p{ margin-top: 20px; margin-bottom: 20px; } </style> </head> <body> <div class="box"> <p>在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前</p> <p class="rule1">浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1</p> <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p> <p class="rule1">浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2</p> </div> </body> </html>
效果图：
后面的浮动元素不会超过前面的浮动元素
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素，上面的例子就是；浮动元素尽可能的向顶端，向左或向右对齐，上面的例子也体现出来了。上面这些是浮动元素的常规性，现在我们来看浮动元素的特殊性：
a：延伸性，比如，将span元素放在p元素内，并将其设置成高于p元素并且左浮动，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ margin-top: 20px; margin-bottom: 20px; background-color: grey; width: 500px; } .high-float{ float: left; height: 80px; line-height: 80px; background-color: coral; } </style> </head> <body> <p> 在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前 <span class="high-float"> 浮动元素比父元素高 </span> </p> <p> 在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后 </p> </body> </html>
效果图：
我们可以看到浮动元素的高高于父元素，超出了父元素的底端，这种情况的做法就是将父元素也设置成浮动，我们将其父元素设置成左浮动，效果就变成这样了：
那么浮动元素的延伸性也就是元素被设置为浮动后，该元素会进行延伸，进而包含所有的子浮动元素
b：浮动元素超出父元素的padding，前面我们说浮动元素的外边界不会超出父元素的内边界，大部分情况是这样的，但是，如果我们把浮动元素的margin设置成负数，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: grey; width: 500px; } .minus-left{ float: left; height: 80px; line-height: 80px; background-color: firebrick; margin-left: -20px; } </style> </head> <body> <p> 在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前 <span class="minus-left"> 负的marginLeft </span> </p> </body> </html>
效果图：
因为默认的情况下，marginLeft就是0，所以不会超出父元素的内边界，所以比没有违反之前的规则
还有就是如果浮动元素的宽度大于父级元素的宽度，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: grey; width: 250px; } .big-width{ float: left; height: 80px; line-height: 80px; background-color: firebrick; width: 300px; } </style> </head> <body> <p> 在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前在浮动元素之前 <span class="big-width"> width大于父级元素 </span> </p> </body> </html>
效果图：
c：重叠问题，也就是说两个元素在同一个位置上，会出现上下重叠的现象。
clear属性：有的时候，我们不希望一些元素被旁边的浮动元素影响到，这个时候就需要用到clear属性了，clear属性可以确保当前元素的左右两侧不会有浮动元素，clear属性只对本身的布局起作用，比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color: gray; width: 300px; height: 100px; } .float{ float: left; background-color: red; border: 1px solid black; margin: 10px; } .cl{ clear: left; } </style> </head> <body> <!--需求是希望第二元素另起一行进行浮动--> <div class="box"> <div class="float">浮动元素1</div> <div class="float cl">浮动元素2</div> <div class="float">浮动元素3</div> </div> </body> </html>
效果图：
清除浮动：首先要明白为什么要清除浮动，浮动会带来什么问题，我们直到一个块级元素没有设置height，那么它的height就是由子元素撑开的，对子元素使用浮动之后，子元素就会脱离标准文档流，也就是说，父级元素没有内容撑开其高度，这样父级的height就会被忽略，这就是所谓的高度塌陷，要解决这样的问题，我们就需要使用清除浮动了，比如：
a：增加额外的div，哪里有浮动元素，就在其父级元素的内容增加一个---><div style="clear:both"></div>，它的优点就是简单简洁，缺点就是额外添加了无意义的标签，造成不必要的浪费
b：父级元素添加overflow:hidden--->.claearfix{overflow:hidden;zoom:1}，优点就是代码量少，没有额外的标签，缺点就是如果子元素超出父元素的范围，会使超出的部分被隐藏
c：after伪元素--->clearfix:after{clear:both;}，优点就是没有使用额外的标签，缺点就是比较复杂，不太好理解
⑦position属性（定位属性）：默认是static，无定位；relative是相对定位，也就是相对该元素在文档流中的位置，即以自己的原始位置为参照物；absolute是绝对定位，它是元素框从文档流完全删除，并相对于最近的已定位祖先元素进行定位，如果元素没有已定义的祖先元素，那么他的位置相对于最初的包含块（即bod元素），如果父级元素设置了position属性，例如position:relative，那么子级的元素就会以父级的左上角为原始点进行定位；fixed，对象脱离了正常文档流，使用top，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动；如果一个元素被设置成了position：absolute/fixed，则该元素就不能设置float，理论上来讲，fixd的元素会被定位浏览器窗口的一些指定坐标，不论窗口是否滚动，他都会固定这个位置。
浙公网安备 33010602011771号