1、css简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2、导入css
导入css有3种方式：
1.元素内嵌
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><pstyle="background-color:aqua">前端CSS基础</p></body></html>
效果：
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/08/40/wKiom1neHuOxVqdiAAADco22Q5M235.png" title="2017-10-11_213740.png" alt="wKiom1neHuOxVqdiAAADco22Q5M235.png" />
2.页面嵌入
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><!--在头部指定好CSS样式然后，在标签里使用--><style>.css_test{background-color:darkorchid;}</style></head><body><div><p><!--这里应用指定好的CSS样式名即可-->前端之CSS学习</p></div></body></html>效果：
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/A6/F4/wKioL1neHV6xX_hsAAADOK6SdyU343.png" title="2017-10-11_214325.png" alt="wKioL1neHV6xX_hsAAADOK6SdyU343.png" />
3.外部引用
也是将一个.css文件引入到HTML文件中
#css定义，文件名称color.css.page_color{/*设置背景颜色及宽带*/background-color:darkorchid;width:300px;}<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><!--这里通过link导入样式，有点类似与python导入模块中的import*--><linkrel="stylesheet"href="color.css"></head><body><div><pclass=page_color><!--这里直接应用指定好的CSS样式名即可-->前端CSS基础</p></div></body></html>效果：
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/A6/F4/wKioL1neHRfSWCq6AAADSCeMsVQ866.png" title="2017-10-11_214130.png" alt="wKioL1neHRfSWCq6AAADSCeMsVQ866.png" />
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，
闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，
因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高
4.优先级
标签>页面嵌入>外部引用
3、css选择器(常用)
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M02/A5/DF/wKioL1nEo1HCvTEDAACiY6Qs45U693.png" title="]0]_LI6R7`SHGFNET}27$$3.png " alt="wKioL1nEo1HCvTEDAACiY6Qs45U693.png" />
标签选择器：div{background-color:red;}<div></div>class选择器：.bd{background-color:red;}<divclass=‘bd‘></div>id选择器：#idselect{background-color:red;}<divid=‘idselect‘></div>关联选择器：#idselectp{background-color:red;}<divid=‘idselect‘><p></p></div>组合选择器：input,div,p{background-color:red;}属性选择器：input[type=‘text‘]{width:100px;height:200px;}.c1[xiao=‘a‘]{color:red;}<br><divclass=‘c1‘xiao=‘a‘>自定义属性选择器</div><br>伪元素选择器：a:link{background-color:red;}#鼠标没有碰过的样式a:hover{background-color:red;}#鼠标放上去的样式a:active{background-color:red;}#选择链接时的样式a:visited{background-color:red;}#已经访问过的链接的样式案例：
<style>/*标签选择器，找到所有的标签应用以下样式*/div{color:green;}/*id选择器，找到标签id等于i1的标签，应用以下样式*/#i1{/*color:green;*/}/*class选择器，找到class=c1的所有标签，应用一下样式*/.c1{background-color:red;}/*层级选择器，找到class=c2下的div下的p下的class=c3标签，应用以下样式*//*.c2divpa{*//**//*}*/.c2divp.c3{background-color:red;}/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/.c4,.c5,.c6{background-color:aqua;}</style>CSS选择器案例
1.id应用
"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> # name意思就是所有id为name的都会使用这个css样式
<head><metacharset="UTF-8"><title>前端CSS</title><style>#name{background-color:red;}</style></head><body><div><p><!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->前端CSS</p><p>前端HTML</p></div></body>效果：
ID选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>/*ID选择器*/#i1{background-color:red;}</style></head><body>/*为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同*/<a>id选择器</a><a>id选择器</a><a>如果ID不同,那么将不会应用样式</a></body></html>效果：
2.标签应用
为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式
<head><metacharset="UTF-8"><title>前端CSS</title><style>p{background-color:lightskyblue;width:100px;height:20px;}</style></head><body><div><p><!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->前端CSS</p><p>前端HTML</p></div></body>效果：
标签选择器
为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>/*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/div{}</style></head><body><div>fontsizetest19</div></body></html>效果：
3.类选择器
class选择器，id是可以相同的，代码如下：
<head><metacharset="UTF-8"><title>前端CSS</title><!--在头部指定好CSS样式然后，在标签里使用--><style>/*类选择器标签*/.cls{background-color:blue;}</style></head><body><!--任何类型的标签都可以调用类选择器--><div>classtestdiv</div><a>classtesta</a><span>classtestspan</span></body>效果：
注：以上三种选择器，建议使用第三种
4.关联选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS学习</title><style>/*为一个标签应用了,类选择器,下的li标签设置样式*/.containerli{background-color:pink;}</style></head><body><!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式--><div><divstyle="height:20px;background-color:red;">test</div><ul><li>li1</li><li>li2</li><li>li3</li></ul></div></body></html>效果图：
关联选择器应用场景：为某标签下面的标签设置指定的样式：
#下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式.containerli{background-color:pink;}#问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！.containerlia{background-color:pink;}案例：
<!DOCTYPEhtml><htmllang="en"><head><style>/*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/.container.l.p{background-color:pink;}</style></head><body><div><div>test<div><ul><!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着--><li>helloshuaige</li></ul></div></div></div></body></html>效果图：
5.组合选择器
有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？
.container.a.cc1{background-color:pink;}.container.a.cc2{background-color:pink;}解决方法代码如下：
.container.a.cc1,.container.a.cc2{background-color:pink;}上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：
.container.a.cc1,.cc2{background-color:pink;}这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：
/*组合选择器*/.containerb,.a.cc1,.cc2{background-color:pink;}/*组合选择器分解,上面的分解完成之后谁来应用:background-color:pink;这个样式呢?*/.containerb.containerb.a.cc1.containerb.cc2 ......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法6.属性选择器
写表单验证的时候最常用,举个例子来说看下面的代码：
我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性
<div><inputtype="text"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div>
怎么做呢？在组合选择器后面加个[type=“text”]即可
<style>/*input和[之间不能有空格]*/.coninput[type="text"]{border:3pxsolidred;}</style><!DOCTYPEhtml><htmllang="en"><head><style>/*input和[之间不能有空格]*/.coninput[type="text"]{border:3pxsolidred;}</style></head><body><div><inputtype="text"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div></body></html>效果图：
需求又来了，我想找到input标签为type为text并且name为“lianxi”的那个input标签
<div><inputtype="text"/><inputtype="text"name="lianxi"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div>
解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：
<style>/*input和[之间不能有空格]*/.coninput[type="text"][name="shuaige"]{border:3pxsolidred;}</style>效果：
属性标签经常用，要记住
也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>shuaige</title><style>/*input和[之间不能有空格]*/.coninput[type="text"][alex="shuaige"]{border:3pxsolidred;}</style></head><body><div><inputtype="text"/><inputtype="text"alex="shuaige"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div></body></html>更多选择器
4、css常用的属性
1.颜色属性：
color：greencolor：#ff6600color：#f60color：rgb(255,255,255)#红(R)、绿(G)、蓝(B)每个的取值范围0~255color：rgba(255,255,255,1)#RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的(色彩空间)透明度
2.字体属性：
br> font: 20px ‘微软雅黑‘
3.背景属性：background-image:url(图片路径)background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)background-position:righttop(20px20px);(横向：leftcenterright)(纵向：topcenterbottom)简写方式:background:背景颜色url(图像)重复位置background:#f60url(images/bg,jpg)no-repeattopcenter代码：
<head><metacharset="UTF-8"><title>前端CSS</title></head><body><divstyle="background-color:red"><!--设置背景颜色-->Hello,html</div><divstyle="background-image:url(ico.gif);height:80px;"><!--设置背景图片--></div></body>650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/A6/F4/wKioL1neHhezAFg9AAAHsxHy7CU783.png" title="index.png" alt="wKioL1neHhezAFg9AAAHsxHy7CU783.png" />
div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：
效果：
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/A6/F4/wKioL1neHkXDWE11AAAF42LIv8g491.png" title="index.png" alt="wKioL1neHkXDWE11AAAF42LIv8g491.png" />
4.文本属性：
text-align:center;#横向排列line-height:200px;#文本行高通俗的讲，文字高度加上文字上下的空白区域的高度50%:基于字体大小的百分比text-indent:150px;#首行缩进，letter-spacing:10px;#字符间距word-spacing:20px;#单词间距5.边框属性：
border-style:none#无边框solid#直线边框dashed#虚线边框dotted#点状边框double#双线边框inherit#继承groove#凸槽边框ridge#垄状边框、insetinset边框、outsetoutset边框依赖于border-color属性border-width：px固定值的边框medium中等边框thick粗边框thin细边框inherit继承border-color：red#ff0000rgb(255,255,0)rgba(255,255,0,0.1)<br>border-radius:px倒角简写方式：border：2px#f60solid代码：
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色--><!--第一种：线的粗细为1像素，实线、红色--><divstyle="border:1pxsolidred;height:10px"></div><!--第二种：线的粗细为1像素，点、蓝色--><divstyle="border:1pxdottedblue;height:10px"></div><!--第三种：线的粗细为1像素、虚线、紫色--><divstyle="border:1pxdashedpurple;height:10px"></div>#边框可以单独的设置一边的边框、上、下、左、右<!--在左边设置边框，3px、实线、红色--><divstyle="border-left:3pxsolidred">前端CSS</div>650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/A6/F4/wKioL1neHqzxROaqAAAE-97zKyQ968.png" title="index.png" alt="wKioL1neHqzxROaqAAAE-97zKyQ968.png" />
6.列表属性：
list-style-type:none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01,02,03,等。)lower-roman小写罗马数字(i,ii,iii,iv,v,等。)upper-roman大写罗马数字(I,II,III,IV,V,等。)lower-alpha小写英文字母Themarkerislower-alpha(a,b,c,d,e,等。)upper-alpha大写英文字母Themarkerisupper-alpha(A,B,C,D,E,等。)lower-greek小写希腊字母(alpha,beta,gamma,等。)lower-latin小写拉丁字母(a,b,c,d,e,等。)upper-latin大写拉丁字母(A,B,C,D,E,等。)hebrew传统的希伯来编号方式armenian传统的亚美尼亚编号方式georgian传统的乔治亚编号方式(an,ban,gan,等。)cjk-ideographic简单的表意数字hiragana标记是：a,i,u,e,o,ka,ki,等。（日文片假名）katakana标记是：A,I,U,E,O,KA,KI,等。（日文片假名）hiragana-iroha标记是：i,ro,ha,ni,ho,he,to,等。（日文片假名）katakana-iroha标记是：I,RO,HA,NI,HO,HE,TO,等。（日文片假名）list-style-position:inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承list-style-position属性的值。list-style-image:URL图像的路径。none默认。无图形被显示。inherit规定应该从父元素继承list-style-image属性的值。简写方式:list-style:squareinsideurl(‘/i/arrow.jpg‘);7.dispaly属性：
display:none#隐藏属性block#变块级元素inline#变内联元素inline-block#内联元素默认不能设置长宽，块级可以，这个让内联元素可以设置heightwidth代码：
<!--display为none将隐藏标签--><div&