一、CSS语法规范
css规则由两个主要部分组成：选择器以及一条或多条声明。
例：hl { color ： red ; font-size : 25 px ; }
选择器 属性 属性值 属性 属性值
1、选择器是用于指定css样式的HTML标签，花括号内是对该对象设置的基本样式。
2、属性和属性值以“键值对”的形式出现。
3、属性是对指定的对象设置样式属性。例如字体大小，文本颜色等。
4、属性和属性值之间用英文 ： 隔开。
二、CSS代码风格
以下不为强制规定：
1、样式格式书写
紧凑格式：h3{color：red；font-size：20px；}
展开格式：
h3{
color：red；
font-size：20px；
}
注：推荐使用展开格式。
2、样式大小写
大写：
H3 {
COLOR:RED;
}
小写：
h3{
color：red；
}
注：推荐使用小写。
3、空格规范
h3 {
color ： red ；
}
- 在属性值前、冒号后保留一个空格
- 选择器和大括号间保留一个空格
三、CSS基础选择器
作用： 根据不同需求把不同标签选出来。
以上css做2件事：1、找标签 2、改样式
选择器分类：基础选择器和复合选择器。
一、基础选择器
基础选择器是由单个选择器组成。
基础选择器包括：标签选择器、类选择器、id选择器以及通配符选择器。
1、标签选择器
标签选择器又称元素选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一样式。
语法规范：
标签名 {
属性1 ：属性值 ；
属性2 ：属性值 ；
.......
}
优点：快捷的为页面中某一类标签指定统一样式。
缺点：不能差异化设置。
2、类选择器
作用：差异化设置标签，单选一个或某几个标签。
语法规范：
. 类名 {
属性1 ：属性值 ；
}
例：
.red {
color ： red;
}
以构用class属性来调用
<div class=‘red’>红</div>
注：
- 类选择器用英文 . 进行标识。
- 可以理解为标签有名字。
- 长名称可以用中横线。
- 不用数字，中文命名。
- 命名有意义。
- 命名规范。
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多选择目的，这些类名都可以选出这个标签。
多类名的应用
<div class="red font20">类</div>
- 在class中写多个类名
- 多个类名之间用空格分开
- 这个标签可以分别具有这些类名样式
3、id选择器
id选择器可以为标有特定id的HTML元素指定特定样式。
HTML元素以id属性来设置id选择器，css中id选择器用“#”来定义。
语法：
#id名 {
属性1 ：属性值 ；
.......
}
注：id属性只能在每个HTML文档中出现一次。
id选择器与类选择器的区别
- 类选择器可以拥有多个名字
- id选择器名字唯一
- 最大不同为使用次数
- 类选择器最多用
4、通配符选择器
在css中通配符选择器用 * 定义 ，它表示选取页面中所有元素。
语法规范：
* {
属性1 ：属性 ；
.......
}
注：
1、通配符选择器无需调用
2、特殊情况才使用
四、字体属性
一、定义
CSS Fonts （字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。
二、字体系列
1、CSS 使用 font family属性定义文本的字体系列
2、举例：
p { font-family: 'Microsort YaHei/微软雅黑'; }
p { font-family: 'Courier New', Courier, monospace; }
/* 字体可以写中文也可以写英文，但我们更提倡英文的写法，兼容性更好 */
三、字体大小
1、CSS 使用 font-size 属性定义字体大小。
2、语法：
p { font-size: 20px; }
body { font-size: 18px; }
3、注意点
(1)、标题标签比较特殊，需要单独指定文字大小；
(2)、px（像素）大小是我们网页的最常用的单位；
(3)、谷歌浏览器默认的文字大小为16px；
(4)、不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不用默认大小；
(5)、可以给body指定整个页面字体的大小；
四、字体粗细
1、CSS 使用 font-weight 属性设置文本字体的粗细
2、语法：
p { font-weight: bold; }
3、常用属性值：
(1)、normal——默认值（不加粗的）；
(2)、bold——定义粗体（加粗的）；
(3)、100-900——400等同于normal,而700等同于bold,注意这个数字后面不跟单位；
4、注意点
(1)、学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗；
(2)、实际开发时，我们更喜欢用数字表示粗细；
五、文字样式
1、CSS使用font-style属性设置文本的风格
2、语法：
em { font-style: normal; }
3、属性值
(1)、normal——默认值，浏览器会显示标准的字体样式 font-style: normal；
(2)、italic——浏览器会显示斜体的字体样式；
4、注意点
平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜的字体。
五、文本属性
一、定义
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
二、文本颜色
1、属性
color属性用于定义文本的颜色
2、语法：
/* 三种方式: */
p {
color: green;
color: rgb(255, 174, 0);
color: #fffb00;
}
2、表示方法
1> 预定义的颜色值
属性值——red、green、blue等；
选色——记英语单词或者在默认列表里选；
2> 十六进制
属性值——#ff0000、#FF6600、#29D794等；
选色——双击即可选色；
3> RGB代码
属性值——rgb(255,0,0)或rgb（100%，0%，0%）/rgb（red，green，blue）等；
选色——将广标停在数字上面即可看到画布，进而选色；
3、注意
开发中常用十六进制。
三、对齐文本
1、属性
text-align属性用于设置元素内文本内容的水平对齐方式；
2、语法规范
div { text-align: center; }；
/* 本质是让盒子里面的文字水平居中对齐 */
3、属性值
left——水平左对齐（默认值）；
right——水平右对齐；
center——水平居中对齐；
四、装饰文本
1、属性
text-decoration属性规定添加到文本的修饰。可以给文本添加下下划线、删除线、上划线等；
2、语法规范
div { text-decoration: underline; }
3、属性值
none——默认，没有装饰线（最常用）；
underline——下划线，链接a自带下划线（常用）；
overline——上划线（几乎不用）；
line-through——删除线（不常用）；
4、注意
学会如何添加下划线，如何删除下划线，其余了解即可：
eg：a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333333;
}
五、文本缩进
1、属性
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进；
2、语法规范
1> 第一种
(1)、p { text-indent: 20px(属性值可以取负值); }；
(2)、精确单位；
(3)、通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值，单位是像素（px）；
2> 第二种
(1)、p { text-indent: 2em; }；
(2)、相对单位；
(3)、em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小；
六、行间距
1、属性
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离；
2、语法规范
(1)、p { line-height: 26px; }
(2)、注意
行间距包括上间距+文本高度+下间距
六、css的引入方式
css引入方式主要有三种，分别是行内样式、内嵌式、外链式。
1.行内样式
行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。
<div style="width: 100px; height: 100px; border: 1px solid black;">这是一个长宽都为100px的div</div>
2.内嵌式
内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div>这是一个长宽都为100px的div</div>
3.外链式
外链式是把css样式写入.css文件内，然后通过link标签链接。
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
<link rel="stylesheet" href="url">
<div>这是一个长宽都为100px的div</div>
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
