一、CSS概述
1、什么是CSS
CSS：层叠样式表，是用于丑化、渲染网页的一门语言
和传统的html标签属性设置款式相比，应用CSS设置款式能够实现：将展现数据的html代码和设置款式的CSS代码进行拆散，能够加强网页的展现能力。
2、如何在html中引入CSS
2.1.在标签上的style属性外部增加css款式
<div style="border:2px solid #FF0000;font-size:26px;background:pink;">
这是一个div...
</div>
这种形式是将css款式间接写在标签上的style属性外部,只对以后标签无效,无奈实现代码的复用,而且容易造成页面构造的凌乱,不利于前期的扩大和保护。所以不倡议大量应用。
2.2.在head标签内的style标签外部增加css款式
这种形式是将所有的css款式在一个style标签外部对立治理,没有将css代码写在标签上,因而不会造成页面构造的凌乱,而且能够实现代码的复用
2.3.通过link标签引入内部的css文件
<!-- 引入内部的demo.css文件 --><link rel="stylesheet" href="demo.css"/>这种形式是将所有的css代码写在一个css文件中对立治理,真正的实现了: 将html代码和CSS代码进行拆散。能够实现代码的复用，也不会造成页面构造的凌乱。
举荐应用这种形式(特地是在企业开发中)
二、CSS罕用选择器
所谓的选择器,就是能够帮咱们在html中选中元素进行润饰的一门技术
1、元素名/标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格局: 元素名/标签名{ css款式.. }
span{} -- 选中所有的span元素
div{} -- 选中所有的div元素
2、class类选择器
能够在标签上增加一个通用的属性--class,为元素设置所属的分组,class值雷同的则为一组, 通过class值能够选中这一组的元素。
格局: .class值{ css款式.. }
.s1{} -- 选中所有class值为s1的元素
<div class="s1"></div><span class="s1"></span><span class="s1"></span><span class="s1"></span>另外，一个元素能够同时设置多个class值，例如：
<span class="s1 s2 s3">span111</span>
示意以后这个span元素同时属于s1分组和s2分组，如果s1和s2给这个span设置背景（但值不同），最终写在前面的会笼罩后面的（针对同一类选择器）。
如果是不同类的选择器，例如：应用元素名、类选择器、id选择器选中同一个元素，设置雷同的属性，但值不同，优先级程序是：
id选择器(100)>类选择器(10)>元素名选择器(1)
3、id选择器
在标签上能够增加一个通用的属性--id,id是编号,要求在整个网页中是举世无双的。通过id值，能够惟一的选中一个元素。
格局：#id值{ css款式.. }
#p1{}选中id值为p1的元素
#one{} 选中id值为one的元素
4、后辈选择器
在父选择器选中的元素外部,选中指定的后辈元素
格局: 父选择器 后辈选择器{ css款式... }
div span{} -- 选中所有div外部的span元素
#d1 p{} -- 选中id值为d1元素外部的p元素
5、属性选择器
能够通过元素的属性或属性值匹配元素
格局: 选择器[属性条件][属性条件]..{ css款式 }
input[type="text"]{} -- 选中所有的文本输入框
input[type="password"]{} -- 选中所有的明码输入框
input[type="checkbox"]{} -- 选中所有的复选框
div[id]{} -- 选中所有具备id属性的div元素
三、CSS罕用属性总结
1、文本、字体相干属性
text-align：设置元素内文本程度排列形式 left（居左,默认）、center（居中）、right（居右）text-indent：设置文本首行缩进，百分比或像素值 text-shadow：设置字体暗影letter-spacing：设置字符距离/间距font-siz：设置字体大小font-weight：设置字体粗细， 100~900，bold，bolder，normalfont-family：设置字体，"微软雅黑","宋体","楷体"等color：设置字体色彩2、背景相干属性
background是一个综合属性,能够同时设置背景色彩/背景图片/背景图片是否反复/背景图片的地位等background-color: 设置背景色彩background-image: 设置背景图片background-repeat: 设置背景图片是否以及如何反复排列backgronnd-position: 设置背景图片的地位backgournd-size: 设置背景图片的大小3、边框属性
border: 2px solid red; -- 同时设置边框的宽度、款式、色彩border-width: 2px;border-style: solid; double(双线) dotted(点状线) dashed(虚线)border-color: red;border-radius: 设置圆角边框4、其余属性
width: 设置元素的宽度height: 设置元素的高度block:块级元素(div/p/h1~h6/form/table等)能够设置宽高inline:行内元素(span/b/i/u等)无奈设置宽高,即便设置了也不起作用inline-block:行内块元素,既具备行内元素的特点(能够和其余行内元素或行内块元素显示在同一行)也具备块级元素的特点(能够设置宽高)--------------------------------margin: 设置元素的外边距margin-top: 设置元素的上外边距margin-left: 设置元素的左外边距margin-right: 设置元素的右外边距margin-bottom: 设置元素的下外边距margin: 10px 20px 30px 40px; /* 上 右 下 左 */margin: 10px 20px 30px; /* 上 左右 下 */margin: 10px 20px; /* 高低 左右 */margin: 10px; /* 上下左右 */--------------------------------5、补充内容：色彩取值形式
形式一: 应用色彩的名称(英文单词) red green blue black yellow pink 形式二: #六位十六进制数(AABBCC==ABC) #FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF #F00 #0F0 #00F #000 #FF0 #FFF形式三: rgb(255,255,255) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)