目录
一、css的语法规范
二、css的基础选择器
（一）基础选择器总结
（二）标签选择器
（三）类选择器
（四）id选择器
（五）通配符选择器
三、CSS字体属性
（一）字体属性总结
（二）font-family设置字体
（三）font-size设置字号(字体大小)
（四）font-weight设置字体的粗细
（五）font-style设置文字样式
（六）字体属性复合写法
四、CSS文本属性
（一）文本属性总结
（二）color定义文本的颜色
（三）text-align文本内容的水平对齐方式
（四）text-decoration装饰文本
（五）text-indent设置首行文本的缩进
（六）line-height设置行间距
五、css的引入方式
（一）内部样式表（嵌入式）
（二）行内样式表（行内式）
（三）外部样式表（链接式）
一、css的语法规范
选择器是用于指定css样式的HTML标签，花括号里面是对于该对象设置的具体样式属性和值之间采用“键值对”形式出现，用“：”隔开声明之间用“；”隔开123二、css的基础选择器
（一）基础选择器总结
（二）标签选择器
用HTML的标签名作为选择器，按照标签名称分类，为页面某一类标签指定统一的css样式。
标签名 {
属性1： 属性值1;
属性2： 属性值2;
属性3： 属性值3;
...
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;}</style></head><body><p>我真美</p><p>我真帅</p><div>我真白</div></body></html>
（三）类选择器
单独选择一个或几个标签。样式点（.）定义，结构类（class）调用,一个或多个，开发最常用
类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)长名称或词组可以使用中横线来为选择器命名。不要纯数字、中文、标签名等命名， 尽量使用英文字母来表示。多类名选择器：各个类名中间用空格隔开。<div class="red font20">林晓</div>.类名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<pclass=“类名”></p>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}</style></head><body><ul><li class="red">倩女幽魂</li><li class="red">倚天屠龙记</li><li>天龙八部</li><li>康熙王朝</li></ul><div class="red">这都是我喜欢的书</div></body></html>
类命名规则：
头：header 内容：content/container尾：footer导航：nav 侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar
标志：logo 广告：banner页面主体：main热点：hot 新闻：news 下载：download
子导航：subnav菜单：menu 子菜单：submenu搜索：search 友情链接：friendlink
页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list
提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service
注册：regsiter 状态：status 投票：vote 合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer
导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu
标题: title 摘要: summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search
功能区：shop 标题：title加入：joinus 状态：status 按钮：btn 滚动：scroll
标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon
注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download
投票：vote 合作伙伴：partner 友情链接：link 版权：copyright\
（四）id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式；样式#定义，结构id调用。只能调用一次，别人切勿使用
#id名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<pid="id名"></p>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#pink {color: pink;}</style></head><body><div id="pink">刘德华</div></body></html>
（五）通配符选择器
通配符使用*定义，它表示选取页面中所有元素(标签)。
* {
属性1：属性值1;
....
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style></head><body><div">刘德华</div><div>张曼玉</div><div>黎明</div><h1>这些都是大明星</h1></body></html>
三、CSS字体属性
（一）字体属性总结
（二）font-family设置字体
各种字体之间必须使用英文状态下的逗号隔开一般情况下，如果有空格隔开的多个单词组成的字体，加引号电脑会从默认以第一个字体显示，如果没有则往下走div {
font-family: Arial,"Microsoft Yahe","微软雅黑";
}
（三）font-size设置字号(字体大小)
p {
font-size: 20px;
}
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小(标题标签单独设置大小)
（四）font-weight设置字体的粗细
更喜欢用数字表示粗细p {
font-weight: normal | bold | bolder | lighter |number;
}
（五）font-style设置文字样式
平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体p {
font-style: normal;
}
（六）字体属性复合写法
<style>/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */div {法1：font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft yahei';/法2：/* 复合属性：简写的方式 节约代码*//* 顺序：font-style font-weight font-size/line-height font-family */font: italic 700 16px 'Microsoft yahei';}</style>
使用font属性时，必须按照文字样式 文字粗细 文字大小 文字字体的顺序书写，不能更换顺序，并且各个属性间以空格隔开不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则 font 属性将不起作用
四、CSS文本属性
（一）文本属性总结
（二）color定义文本的颜色
实际工作中，用16进制的写法是最多的<style>
div {
/* color: red; */
/* color: #ff0000; */
color: rgb(255, 0, 0);
}
</style>
（三）text-align文本内容的水平对齐方式
相当于html<tabel>中的align对齐属性(表格对齐)。
div {
text-align:center;
}
（四）text-decoration装饰文本
可以给文本添加下划线，删除线，上划线等
div {
text-decoration: underline;
}
重点：记住如何添加下划线，如何删除下划线，其余了解即可。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{text-decoration: none;}</style></head><body><a href="#">百度一下</a></body></html>
（五）text-indent设置首行文本的缩进
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
em是一个相对单位，就是当前元素(font-size)1个文字的大小
如果当前元素没有设置大小，则会按照父元素的一个文字大小
（六）line-height设置行间距
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7--8像素左右就可以了。
p {
line-height: 26px;
}
行高 = 上间距+ 文本高度 + 下间距。上间距和下间距总是相等的，因此文字看上去是垂直居中的。可以通过FSCcapture进行测量。
行高与高度的三种关系
如果 行高 等 高度 文字会 垂直居中
如果行高 大于 高度 文字会 偏下
如果行高小于高度 文字会 偏上
/*line-height 要设置在font属性下面，否则无效，例如：*/height:80px;text-align:center;font:normalbold30px"宋体";line-height:80px;
可以使用display:flex;布局方式让文字水平垂直居中
display:flex;align-items:center;/*侧轴对齐方式*/justify-content:center;/*主轴对齐方式*/
五、css的引入方式
（一）内部样式表（嵌入式）
也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
缺点:没有彻底分离结构与样式
<head><style type="text/CSS">选择器（选择的标签） { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}</style></head>
（二）行内样式表（行内式）
通过标签的style属性来设置元素的样式
style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>例如：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
（三）外部样式表（链接式）
新建一个或多个以.css为扩展名的外部样式表文件，将所有的样式放在其中通过link标签将外部样式表文件链接到HTML文档中<linkrel="stylesheet"href="css文件路径">index.css文件：div{color:red; font-size:20px;}
<link rel="stylesheet" href="index.css">
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
