CSS简介
CSS分为两部分——CSS选择器和CSS属性。
格式
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>
注意点
style标签中的type属性可以不用写, 默认就是type=“text/css”
设置样式时必须按照固定的格式来设置。key: value；其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
CSS常见属性
文字属性
（1）font-style
作用: 规定文字样式
格式: font-style: italic;
取值:
normal ： 正常的， 默认就是正常的
italic : 倾斜的
（2）font-weight
作用: 规定文字粗细
格式: font-weight: bold;
取值:
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
（3）font-size
作用: 规定文字大小
格式: font-size: 30px;
取值: px(像素 pixel)
（4）font-family
作用: 规定文字字体
格式: font-family:“楷体”;
取值: 各种字体名称
注意点：
如果取值是中文， 需要用双引号或者单引号括起来
设置的字体必须是用户电脑里面已经安装的字体
给字体设置备选方案
格式:font-family:“字体1”, “备选方案1”, …;
如果想给中文和英文分别单独设置字体, 怎么办?
中文字体里面都包含了英文，英文字体里面都没有包含中文。可以设置备选方案，英文字体在前，中文字体在后。
（5）文字属性缩写
格式：font: style weight size family;
font:italic bold 10px "楷体";
1
文本属性
（1）text-decoration
作用: 给文本添加装饰
格式: text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
（2）text-align
作用: 设置文本水平对齐方式
格式: text-align: center;
取值:
left 左
right 右
center 中
（3）text-indent
作用: 设置文本缩进
格式: text-indent: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
颜色属性
作用: 通过color属性来修改文字颜色
格式: color: 值;
取值
英文单词
rgb
格式: rgb(0,0,0)
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
rgba
格式：rgba(255,0,0,0.2)
a代表透明度, 取值是0-1, 取值越小就越透明
十六进制
格式：#FFEE00
十六进制中是通过每两位表示一个颜色，#FFEE00 FF表示R EE表示G 00表示B
十六进制缩写
格式：#FFEE00 == #FE0
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
如果两位相同的数字不是属于同一个颜色的, 不能简写，如#122334
CSS选择器
标签选择器
（1）作用
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
（2）格式
标签名称{
属性:值;
}
(3)注意点
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中
<style>
p{
color: red;
}
h1{
color: blue;
}
</style>
<p>我是段落</p>
<h1>我是标题</h1>
id选择器
（1）作用
根据指定的id名称找到对应的标签, 然后设置属性
（2）格式
#id名称{
属性:值;
}
（3）注意点
在同一个界面中id的名称是不可以重复的
id的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的
<style>
#identity1{
color: red;
}
</style>
<p id="identity4">必成高富帅</p>
类选择器
（1）作用
根据指定的类名称找到对应的标签, 然后设置属性
（2）格式
.类名{
属性:值;
}
（3）注意点
在同一个界面中class的名称是可以重复的
类名的命名规范和id名称的命名规范一样
在HTML中每个标签可以同时绑定多个类名
<style>
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style>
<p class="para1 para2">我是段落</p>
后代选择器
（1）作用
找到指定标签的所有特定的后代标签, 设置属性
（2）格式：先找到所有叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有叫做"标签名称2"的标签, 设置属性
标签名称1 标签名称2{
属性:值;
}
（3）注意点
后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
<style>
div ul li p{
color: red;
}
</style>
<div>
<ul>
<li>
<p>我是段落</p> <!--选中-->
</li>
<li>
<p>我是段落</p> <!--选中-->
</li>
</ul>
</div>
子元素选择器
（1）作用
找到指定标签中所有特定的直接子元素, 然后设置属性
（2）格式：先找到所有叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素叫做"标签名称2"的元素
标签名称1>标签名称2{
属性:值;
}
（3）注意点
子元素选择器之间需要用>符号连接, 并且不能有空格
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
<style>
#identity>p{
color: blue;
}
</style>
<div id="identity">
<p>我是段落</p> <!--选中-->
<p>我是段落</p> <!--选中-->
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
交集选择器
（1）作用
给所有选择器选中的标签中, 相交的那部分标签设置属性
（2）格式
选择器1选择器2{
属性: 值;
}
（3）注意点
选择器和选择器之间没有任何的连接符号
交集选择器仅仅作为了解, 企业开发中用的并不多
<style>
.para1#identity{
color: blue;
}
</style>
<p class="para1" id="identity">我是段落</p>
盒子模型：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
二、边框颜色
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
border-color
四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000;
上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00;
上、右、下、左边框颜色： #369、#000、#f00、#00f border-color:#369 #000 #f00 #00f
预习后自我感受：节省时间 ，可以编写一次CSS，然后在多个HTML页面中通过外部引入多次重复使用。2、页面加载速度更快 ：通过使用CSS，只需要编写一个标记的CSS规则。3、易于维护 ：如果要进行全局更改，则只需更改样式。
