一、CSS
是什么？有什么作用？
HTML
》》页面的结构》》人的面部
CSS
》》美化页面》》给人化妆
2
、
CSS
：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
给一个人的面部化妆：画口红、画眼影、打粉底
HTML
标签 样式
1
样式
2
样式
3
CSS
通常称为
CSS
样式或层叠样式表，主要用于设置
HTML
页面中的文本内容（字
体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、以及版面的布
局等外观显示样式
CSS
可以使
HTML
页面更好看，
CSS+DIV
布局更加灵活，更容易绘制出用户需要的
结构
3
、
CSS
作用：修饰
HTML
页面，更丰富多彩地展示超文本信息
二、
CSS
入门案例
1
、创建一个
HTML
文件
2
、在
HTML
上创建一个字体标签
3
、字体标签中新增一个
style
属性，并修改
style
属性值
三、为什么使用
CSS
替代
HTML
属性设置样式
因为
HTML
属性在单独使用时有一定的局限性，所以要配合
CSS
样式代码才可以展示
更为丰富的效果
四、
CSS
的代码规范
1
、放置规范
（
1
）在
<style>
标签内容体中书写
CSS
样式的代码
<style>
标签放置在
<head>
标签之中
2
、格式规范
选择器名称
{
属性名
:
属性值
;
属性名
:
属性值
;......}、
あ街燈下き的回憶:
选择器：即指定
CSS
样式作用在哪些
HTML
标签上
3
、代码规范：
属性名和属性值之间是键值对关系
属性名和属性值之间用
:
连接，最后
;
结尾
例如：
font-size: 120px;
如果一个属性名有多个值，多个值用空格隔开
例如：
border: 5px solid red;
CSS
注释：
/*
注释内容
*/
等同于
Java
的多行注释
五、
CSS
选择器
1
、基本选择器
（
1
）元素选择器
HTML
标签又叫
HTML
元素
元素选择器：即以
HTML
标签名作为选择器名称
作用：选择
CSS
样式代码，作用于对应标签名的标签上
格式：标签名
{/*CSS
样式代码
*/}
适用范围：适用于将相同样式作用在多个同名标签上
（
2
）
id
选择器
每个
HTML
标签都有一个
id
属性，
id
的属性值必须在本页面是唯一的
id
选择器：即以
HTML
的
id
的属性值作为选择器名称
作用：选择
CSS
样式代码，作用于某个规定
id
值的
HTML
标签上
格式：
#id
值
{/*CSS
样式代码
*/}
适用范围：适用于将样式作用于具有某个
id
的标签上（更有针对性）
注意：必须手动保证
id
值在本页面唯一（如果不唯一，会具有共同样式，但
JS
会出问题）
（
3
）类选择器
每个
HTML
标签都有一个
class
属性，
class
属性值即为类名
类选择器：即以
HTML
的类名（
class
属性值）作为选择器名称
作用：选择
CSS
样式代码作用于对应类名的
HTML
标签上
格式：
.
类名
{/*CSS
样式代码
*/}
适用范围：适用于将样式一次作用在相同类名的标签上（即使标签名不同也
可以）
2
、基本选择器的组合方式
层级关系（后代选择器）
标签和标签之间有层级关系，例如
<html>
标签的子标签为
<body>
标签
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样
式作用于某些标签上
格式：选择器
1
选择器
2 ......{/*CSS
样式代码
*/}
表示选择器
1
下边的选择器
2......
六、边框属性
所有的
HTML
标签都有边框，默认边框不可见
border
设置边框的样式
