一、CSS的语法规法：
主要部分构成：选择器 和 {一个或多个声明}
例：<style>
p { color: red;}
</style>
注：属性和属性值以“键值对”形式出现
属性和属性值之间用英文“：”分开
多个键值对间用英文 “；”分开
二、CSS代码风格
（一）、样式格式书写
1、紧凑格式：
例：h3 {color: deeppink;font-size: 20px;}
2、展开格式
例：h3 {
color: pink;
front-size: 20px;
}
(二) 、键值对全部用小写字母
（三）、空格规范
1、属性值前面，冒号后面，保留一个空格
2、选择器（标签）和大括号之间保留空格
三、CSS选择器
（一）标签选择器：选该标签的所有
（二）类选择器：单选择一个或几个标签
<style>
.red（任意名） {
color: red;
}
</style>
<div class="red"> </div>
注：样式点定义，结构类（class）调用，一个或多个，开发最常用等于
class等于的名字与上面的任意名相对应
不要用纯数字或英文命名
长名字用短横杠-分割
类选择器-多类名
例：<div class="red front20">亚瑟</div>
注：在标签中class属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
好处：把一些标签元素相同的放到同一类名里
（三）、id选择器
他可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
语法：
#id名{ 属性以： 属性值1；
...
}
例：把id为nav元素中的内容设置为红色
#nav{
color: red;
}
<div id="nav">猪猪 </div>
注，样式#定义，结构id调用，只能调用一次，别人切勿使用
(四）、通配符选择器
* {
属性1： 属性值1；
......
}
注：不需要调用，自动给所有的元素使用样式
特殊情况才使用，后面讲解使用场景
例:
* {
margin: 0;
padding: 0;
}
四、字体属性
（一）、字体系列
使用font-family属性定义
例：
p { front-family: "微软雅黑”；}
div {front-family: Arial,“Microsoft Yahei”,"微软雅黑";}
注：各个字体间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体加引号
尽量使用系统自带字体
一般放入body中<body> </body>
(二）、字体大小
使用font-size属性定义大小
例：
p {
front-size: 20px;
}
注：px（像素）大小是我们网页最常用的单位
谷歌浏览器默认文字大小16px
可以给body指定整体大小
标题标签需要单独指定大小
（三）、字体粗细
使用font-weight属性设置文字粗细
例：
p {
front-weight: bold;
}
属性值：
normal 默认值（不加粗）
bold定义粗体（加粗的）
100-900 400等同于normal，700等同于bold 注意这个数字后面不跟单位
（四）、文字样式
使用font-style属性设置文本风格
例：
p {
font-style：normal；
}
属性值
normal 默认值，浏览器会显示标准的字体样式 font-style：normal
italic 浏览器会显示斜体的字体样式
注：平时我们很少给文字加斜体，反而要给斜体标签（em ，i）改为不倾斜字体
（五）、字体复合属性
例：
body{
font： font-style font-weight font-size/line-height font-family；
}
注：不能随意换位置
必须保留font-size 和font-family
属性之间用空格隔开
五、文本属性
（一）、文本颜色
color属性用于定义文本的颜色
例：
div {
color： red；
}
（二）、对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
例：
div {
text-align： center；
}
属性值
left 左对齐
right 右对齐
center 居中对齐
（三）、装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等。
属性值
none 默认，没有装饰线（最常用）
underline 下划线 链接a自带下划线（常用）
overline 上划线 （几乎不用）
line-through 删除线（不常用）
重点记住 如何加下划线 和 如何删下划线
（四）、文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
例：
div {
text-indent10px
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
例：
p {
text-indent: 2em；
}
em 是一个相对单位，就是当前元素（font-size）1个文字的大小，则会按照父元素的1个文字大小。
（五）、行间距
line-height属性用于设置行间距的距离（行高）。可以控制文字行与行之间的距离
行间距 = 上间距 + 文字高度 + 下间距
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
