共计 2812 个字符，预计需要花费 8 分钟才能阅读完成。
一、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，normal
font-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)