CSS介绍
- CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何在网页中如何显示HTML元素，就像 HTML中的字体标签和颜色属性所起的作用那样，且在实际开发中，样式通常存储在单独的样式表中，从而实现内容与表现分离的问题，提高工作效率。多个样式定义可层叠为一个。
创建
- 样式编写固定语法格式: 选择器{属性：值；}，对一个选择器，花括号内可添加多属性，同时赋值。
div {
width: 200px;
height: 200px;
}
- 插入样式方式
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="外部样式表.css">
</head>
通过在head文件中使用link标签方式，引入外部的后缀名为.css的文件，对本文档中的标签进行样式的定义。
- 内部样式表
<head>
<style>
div {
width: 200px;
height: 200px;
}
</style>
</head>
在head文件中中，直接使用style标签，对本文档中的标签进行样式的定义。
- 内联样式
<body>
<div style="width: 200px; height: 200px;"></div>
</body>
直接在body中，在进行编写标签时，通过style属性进行样式的定义。
在对同一个标签使用以上三种插入样式方法进行样式的定义时，浏览器优先使用内联样式，其次是内部样式表，最后是外部样式表，但是以上三种插入样式的方式最后的到的样式优先级都高于标签本身具有的样式。值得注意的是，在实际开发中，外部样式表使用最多，应该最广，由于其具有较强的泛化性和灵活性；内联样式应用最少，由于其存在的不灵活性。
选择器
- 标签选择器
<style>
div{
width: 200px;
height: 200px;
}
</style>
<body>
<div></div>
</body>
使用规范为：标签名{属性：属性值；}
- id选择器
<style>
#box{
width: 200px;
height: 200px;
}
</style>
<body>
<div id="box"></div>
</body>
使用规范为：#id值{属性：属性值；}
在文档中，id值是不可重复的，因此样式也是唯一指定某一标签。
- 类选择器
<style>
.box{
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box"></div>
</body>
使用规范为：.class值{属性：属性值；}
在文档中，class值可以重复出现，表示一组一类，因此设置样式时就同时给多个标签确定样式。
- 伪类选择器
<style>
/* 设计到a的伪类有四个 link visited hover active */
a:link{
color: darkgreen;
}
a:visited{
color: darkkhaki;
}
a:hover{
color: orange;
}
a:active{
color: paleturquoise;
}
input:focus{
background-color: brown;
}
p::selection{
background-color: burlywood;
}
</style>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<a href="http://www.baidu12345.com">没访问过的链接</a>
<input type="text">
<p>我是一个测试文本</p>
</body>
使用规范为：标签：状态值{属性：属性值；}
伪类选择器用来表示元素的一种特殊状态，比如对访问的超链接，获取焦点的文本框进行设置;当需要为这些特殊状态的元素设置时就使用伪类选择器;链接当表示没访问过时使用:link设置样式; :visited 设置访问过的链接,只能设置color； :hover 表示鼠标移入时候的状态; :active 表示链接被激活的状态，点击的状态获取焦点样式; :focus在文本框点击之后，设置样式; ::selection 选中的元素 比如用鼠标选中文本之后的样式。
- 复合选择器 1、并集选择器
<style>
h3，#pi,.p1{
background-color: thistle;
}
</style>
<body>
<h3>dangdang</h3>
<p id="pi">xixixi</p>
<p class="p1">dangdang</p>
</body>
使用规范为：单选择器....(多个用逗号隔开){属性：属性值；}
单选择器之间使用逗号隔开，表示同时为多个选择器添加相同的样式。
2、交集选择器
<style>
span.p3{
background-color: red;
}
</style>
<body>
<p class="p3">dandgand</p>
<span class="p3">xuxuxuu</span>
</body>
使用规范为：单选择器....(多个){属性：属性值；} 单选择器之间不使用符号隔开，这多个单选择器应该是包含关系；用于当有多个相同名称单选择器时，通过这种方式精准的选择某个选择器设置样式。
3、后代选择器
<style>
/* 将会选择两个元素 */
div span{
background-color: red;
}
</style>
<body>
<div>
<span id="link">
<a href='#'>
<span>last child<span>
</span>
</div>
</body>
使用规范：祖先选择器 子孙代选择器{属性名：属性值；}
常常用来选择元素的后代，注意和子元素选择器区别，这里选择的是后代的所有元素，不一定只是亲儿子元素
4、子元素选择器
<style>
/* 将会只选择一个元素 亲儿子元素 */
div>span{
background-color: red;
}
</style>
<body>
<div>
<span id="link">
<a href='#'>
<span>last child<span>
</span>
</div>
</body>
使用规范：父亲选择器>亲儿子选择器{属性名：属性值；}
用于选择父元素的亲儿子元素，常用于后代元素与亲儿子元素有重名，但是只想选择亲儿子元素时候使用
- CSS3新增选择器 1、元素选择器
<style>
p[title]{
background-color: crimson;
}
/* 为属性值为具体多少的属性设置样式 */
p[title="我是提示符"]{
background-color: cyan;
}
/* 属性值以什么开头 */
p[title^="当"]{
background-color: darkgreen;
}
/* 属性值以什么结尾 */
p[title$="fu"]{
background-color: darkmagenta;
}
/* 属性值中含有指定内容元素 */
p[title*="qushi"]{
background-color: darksalmon;
}
</style>
<body>
<p title="我是提示符">我是一个段落</p>
<p>我是一个小小的段落</p>
<p title="当当">hahahh</p>
<p title="hahahhfu">hahahah</p>
<p title="vsvsqushidvs">qusvhiusvhso</p>
</body>
使用规范为:标签名[属性名（特殊符号）="属性值"]{属性:属性值；}
当没有特殊符号为属性名等于相应值时，就进行样式的设置；当为‘^=’时，表示设置以相应内容开头的样式；当为‘$=’时，表示设置以相应内容结束的样式；当为‘=’时，表示设置包含指定内容的样式。
2、伪元素选择器
<style>
div::before {
/* content是必须要写的 */
content: '我';
width: 30px;
height: 30px;
background-color: pink;
display: inline-block;
}
/* 伪元素选择器的优先级权重是1*/
div::after {
content: '小俊呀';
}
div::first-letter{
/* 匹配指定选择器的首字母或首汉字*/
}
div::first-line{
/* 匹配指定选择器的第一行*/
}
div::selection{
/* 匹配被选中的部分*/
}
</style>
<div>
伪元素选择器
</div>
使用规范:标签名::关键字（常见的有after、before等）{属性名：属性值；}
当关键字为after或者为before时，表示在对应的选择器后面或者前面添加一个新元素，因此属性里面必须包括content值，可以为空；由于此特性，常常用于解决浮动导致的父盒子高度塌陷问题
3、结构伪类选择器
<style>
/* 选择第一个孩子 */
ul li:first-child {
color: pink;
}
ul li:last-child {
color: yellowgreen;
}
/* 可以选择多个或者一个特点的子元素 括号里面可以是数字 表示选择第几个*/
ul li:nth-child(3) {
color: aquamarine;
}
/* 里面也可以是关键字 odd 或者 even 表示奇数和偶数元素 */
ul li:nth-child(even) {
background-color: green;
}
/* 可以是公式 nth-child(n) 这里面必须是n 不能是其他字母 从0开始计算
也可以是其他公式 例如 2n 2n+1 n+5(5个之后) -n+5（前5个）等等*/
ul li:nth-child(n) {
background-color: pink;
}
/* first-of-type last-of-type nth-of-type() 一样的使用*/
/* 区别是 当有其他标签时 nth-child 会把所有的子标签都排进去 先看n的多少 然后去匹配前面写的子元素名称 匹配不上就么法选中*/
/* 相反 nth-of-type() 先把符合子标签名字的所有标签进行排列 然后再看数字 也就是选择第几个孩子 */
</style>
<!-- 主要根据文档结构来选择器元素 常用于父级选择器里面选择子元素 -->
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
</ul>
使用规范:父元素 选择的子元素:关键字（first-child、last-child、nth-child()等） 结构伪类选择器常常用于比较大规模的获取子元素，例如列表隔行变色等，采用此类选择器，可以很好的选择出自己想要的子元素。值得注意的是另外一组关键字（first-of-type last-of-type nth-of-type()）用法一致，但这类标签只会选择符合规定的子元素进行排列，然后选择符合要求的元素，nth-child这一组会把子元素全部排列，在选择符合要求的元素。
背景样式
<style>
div{
width: 2000px;
height: 2000px;
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;
background-image: url(##);
background-repeat: no-repeat;
background-position: 200px 100px;
background-attachment: fixed;
/* 简写 */
background: pink url("##") no-repeat center fixed;
/* 背景半透明 */
background: rgba(0, 0, 0, 5);
}
</style>
<body>
<div>伪元素选择器</div>
</body>
背景英语单词对应background，因此，在css中，所有与背景有关的属性，都是以background开头。在代码前面的width与height属性在设置div的宽与长，设置之后再对背景样式的确定。
background-color属性，对背景颜色进行设置。在css中颜色的书写包括三种，第一种为直接使用颜色的英语单词；第二种是使用rgb(二进制值,二进制值,二进制值)，最后一种是#六位十六进制值；在实际开发中使用二进制值方式较为常用，因为使用吸管工具，可以直接提取对应颜色的二进制值，从而直接使用。background-image属性，对背景图片进行导入，属性值通过url(图片位置)进行设置。background-repeat属性，对导入的背景图片是否重复进行设置，其中包括三种选项：no-repeat（不重复）、repeat-x(往x方向重复)、repeat-y(往y方向重复)。background-position属性，对导入的背景图片放的位置进行设置，属性值可以是具体的纵向和横向的位置具体像素值，也可以用center、left、top确定位置。background-attachment属性，对导入的背景图片是相对定位还是绝对定位进行设置。属性值为fixed时，表示背景图片为绝对定位，不会随页面的变化而变化位置，为scroll时，为相对定位，图片会随着页面的变化而变化。background属性，为对背景设置的简写属性，后面依次写属性值，中间不用符号间隔。在设置背景颜色透明时，可以使用rgab(二进制，二进制，二进制，0-1)进行设置,最后一位参数表示透明程度，为0表示全透明，为1表示没有透明效果。
字体样式
<style>
.p1{
/* 字体系列，设置几个字体名称作为一种后备机制，浏览器不支持时尝试下一种 */
font-family: 'Courier New', Courier, monospace;
/* 设置字体大小 可以使用像素px 也可使用em，1em表示浏览器默认字体大小，通常是16px;也可使用%。表示浏览器默认字体的多少倍*/
font-size: 15px;
/* 字体样式 normal正常 italic斜体 oblique 倾斜的字体 */
font-style: normal;
/* 以小型大写字体或者正常字体显示文本 */
font-variant: small-caps;
/* 字体粗细 */
font-weight: 100;
font:bold small-caps 100 15px sans-serif
}
</style>
<body>
<p class="p1">字体样式</p>
</body>
font-family属性设置文字字体，可以同时设置三种字体，作为一种后备机制，在浏览器不支持时使用下一种。font-size属性设置文字的大小，有三种表示方式，分别是使用像素px；使用em，1em表示浏览器默认字体大小，通常为16px;使用%，设置字体为浏览器默认字体大小的多少百分之几。font-style属性设置文字风格，其中normal表示正常、italic表示斜体、oblique表示倾斜的字体。font-variant属性设置文字以正常的显示文字normal还是以小型大写字体small-cap显示文字。font-weight属性设置字体的粗细，可以使用bold等英语单词表示也可使用数字表示。font属性表示简写以上五种属性，其中字体大小和字体必须设置，不可省略，且字体大小放在倒数第二位置，字体放在最后。
文本样式
<style>
a{
/* 文本颜色 */
color: black;
/* 文本装饰 */
text-decoration: none;
/* 文本对齐方式 */
text-align: center;
/* 行高 */
line-height: normal;
/* 文本中元素字母控制 */
text-transform: capitalize;
/* 字母间距 */
letter-spacing: 1px;
/* 单词间距 */
word-spacing: 10px;
/* 缩进元素中文本首行 */
text-indent: 2em;
}
</style>
<body>
<a href="##">我是一个没有下划线的超链接哈</a>
</body>
color属性，对文本颜色进行设置，在css中颜色的书写包括三种，第一种为直接使用颜色的英语单词；第二种是使用rgb(二进制值,二进制值,二进制值) ，最后一种是#六位十六进制值；在实际开发中使用二进制值方式较为常用，因为使用吸管工具，可以直接提取对应颜色的二进制值，从而直接使用。text-decoration属性，对文本的装饰进行设置，常常设置为none，用于去除链接自带的装饰。除此之外也可自己通过overline、underline设置上划线、下划线等。text-align属性，设置文本对齐方式，分别可设center居中对齐、right右对齐、left左对齐、justify左右对齐。line-height属性，为设置文本行高，这个属性十分常用，常常设置行高与父元素高度相同实现文本垂直居中。text-transform属性，控制文本中字母，uppercase表示所有字母大小、lowercase表示所有字母小写，capitalize表示首字母大写。letter-spacing属性，表示字母间距，word-spacing表示单词或者中文字间距。text-indent属性，表示文本首行缩进字符大小，因此单位通常为em。
盒子模型
在页面中，各个元素都是包含在大大小小的盒子中，对这种‘盒子’进行了解并对其相关样式进行设置是很有必要的。如上图所示，盒子模型主要分为：
- Margin(外边距)，边框外的区域，是透明的；
- Border(边框)，围绕在内边距和内容外的边框，不是透明的；
- Padding(内边距)，内容周围区域，也是透明的，但是占位置；
- Conteny(内容)，内容区域，显示放置在里面的内容，例如图像、文本等； 在设置属性时，设置的width和height都是内容区域的宽高，但一个盒子在文档中占的空间包含了以上四项。因此盒子的总宽度=width + margin * 2 + padding * 2 + border * 2;盒子的总高度：=height + margin * 2+ padding * 2 + border*2。
边框（Border）
<style>
.box1{
/* 内容区大小 */
width: 100px;
height: 100px;
/* 边框的宽度 */
border-width: 5px;
/* 边框的颜色 */
border-color: pink;
/* 边框的样式 */
border-style: solid;
/* 简写属性 直接加三种属性值 没有顺序要求，没有添加就为默认，使用较多*/
border: pink solid 5px;
}
</style>
<div class="box1"></div>
border-width属性，对盒子模型的边框宽度进行设置，后面可跟px 或 em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin；属性后跟四个值为从上边框依次顺时针方向分别设置宽度；为三个值时，就是上边框、左右边框相同、下边框顺序设置宽度；为两个值上下边框、左右边框各一值进行设置，为一个值时，四边框宽度相同。border-color属性，对边框颜色进行设置。对文本颜色进行设置，在css中颜色的书写包括三种，第一种为直接使用颜色的英语单词；第二种是使用rgb(二进制值,二进制值,二进制值) ，最后一种是#六位十六进制值；在实际开发中使用二进制值方式较为常用，因为使用吸管工具，可以直接提取对应颜色的二进制值，从而直接使用。属性后面接的值的个数与上面的border-width相同，不同个数对应不同的设置方式。border-style属性，对边框的样式进行设置，属性值很多，例如常用的solid（实线）、dotted(虚线)、double（双边框）、none（无边框）等；属性后面接的值的个数与上面的border-width相同，不同个数对应不同的设置方式。单边的样式设置：border-top-width对顶部的边框宽度进行设置；border-top-color对顶部边框的颜色进行设置；border-top-style对顶部边框的样式进行设置；对于left bottom right进行设置，只需更改对应的方位即可，由于对单一方向的边框进行设置，因此后面属性值只跟一个。
轮廓（outline）
轮廓(outline)是存在于盒子边框外的一条线，起到突出元素的作用，CSS outline属性可以为轮廓设置样式、颜色、宽度等
<style>
div {
width: 200px;
height: 200px;
background-color: antiquewhite;
/* 轮廓的样式 */
outline-style: solid;
/* 轮廓的宽度 */
outline-width: 1px;
/* 轮廓的颜色 */
outline-color: green;
/* 轮廓离边框多少像素 */
outline-offset: 15px;
/* 简写属性 */
outline: 5px solid green;
}
</style>
<div>
轮廓样式
</div>
outline-style属性设置轮廓的样式，常见属性值包括soild(实线)、dotted(虚线)、double（双线）等outline-width属性设置轮廓的宽度outline-color属性设置轮廓的颜色，颜色值的设置与上面所提颜色设置相同outline-offset属性设置轮廓离边框的距离outline属性 用于简写轮廓样式，后面接轮廓的样式、宽度、颜色
填充（padding）外边距（margin）
对填充和外边距的样式设置，只能设置宽度，填充颜色默认和内容背景颜色相同，没有时为透明；外边距都为透明，只占位置。margin（外边距）和padding（内边距）都是简写属性，后面接1-4个宽度值具体设置方式与border-width相同。也可以分别对四边的填充和外边距进行单独设置宽度。
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* 对外边距四边设置宽度 */
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
/* 简写外边距的宽度设置 */
margin: 20px;
/* 对填充的四边分别设置宽度 */
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
/* 简写对四边填充宽度的设置 */
padding: 20px;
}
</style>
<div>
填充与外边距设置
</div>
说明：这里就不展开解释了，上面的代码与图很清晰。我们平常实际应用中，常使用简写形式，因此记住简写属性后面1-4个属性值分别对那些边进行属性的设置很重要。margin：20px auto,当外边距属性值为两个值时候，第一个值对应的是上下的外边距，第二个值为auto实现水平居中。后面会有部分对居中进行总结
