<1>css语法规范（初步）
css规则由两个主要的部分构成：选择器以及一条或多条声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验css语法规范</title>
<style>
/* 选择器 {样式属性: 属性值;} */
p{
color:crimson;
font-size:100px;
}
</style>
</head>
<body>
<p>嘿嘿嘿</p>
</body>
</html>
-选择器是用于指定css样式的html标签，花括号内是该对象设置的具体样式。
-属性与属性值以键值对的形式出现。
-属性是对指定的对象设置的样式属性，例如字体大小，字体颜色等。
-属性和属性值之间用英文" : "分开。
-多个“键值对”之间用英文" ; "区分。
<2>css代码风格
2.1 样式格式书写
1.紧凑格式
h3 { color: red; font-size: 20px;}2.展开格式
h3 {
color: red;
font-size: 20px;
}推荐第二种，更加直观。
在属性值起那么，冒号后面保留一个空格；选择器和大括号中间保留一个空格。
<3>css选择器
3.1 选择器的作用
ans：用于选择标签
3.2 选择器的分类
选择器分为基础选择器和复合选择器两个大类。
-基础选择器是由单个选择器组成的。
-基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
3.2.1 标签选择器
是指html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。
作用
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。
3.2.2 类选择器（最常用）
如果想要差异化选择不同的标签，单独选一个或者某一个标签，可以使用类选择器。
类选择器在html中以class属性表示，在css中，类选择器以一个点" . "号显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验css语法规范</title>
<style>
/* 选择器 {样式属性: 属性值;} */
.red {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<p class="red">嘿嘿嘿</p>
<p>嘿嘿嘿</p>
</body>
</html>
-长名称或词组可以用中横线来为选择器命名，如“p-red”。
-不要使用纯数字、中文等命名，尽量使用英文字母表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
background-color: red;
}
.green{
background-color: green;
}
.blue {
background-color: blue;
width: 5px;
height: 5px;
}
.yellow {
background-color: yellow;
width: 5px;
height: 5px;
}
</style>
</head>
<body>
<table border="1" width="5" height="15" cellpadding="10" cellspacing="0">
<tr class="red"><td></td></tr>
<tr class="green"><td></td></tr>
<tr class="red"><td></td></tr>
</table>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td class="blue"></td>
<td class="yellow"></td>
<td class="blue"></td>
</tr>
</table>
</body>
</html>
我们也可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。
但是这些类名必须用空格分开。
3.2.3 id选择器
id选择器可以为标有特定id的html元素指定特定的样式。
html元素以id属性来设置id选择器，css中id选择器以“#”来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验css语法规范</title>
<style>
/* 选择器 {样式属性: 属性值;} */
#yellow
{
color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<p id="yellow">嘿嘿嘿</p>
<p>嘿嘿嘿</p>
</body>
</html>
注意
id属性只能在每个html文档中只能调用一次并且不可重复，但是class可以多次出现并可以重复。
3.2.4 通配符选择器
在css中，通配符选择器使用" * "定义，它表示选取页面中所有元素（标签）。
语法
* {
属性1： 属性值1;
...
}-通配符选择器不需要调用，自动给所有元素使用样式。
-特殊情况才使用
<4>css字体属性
css Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
4.1字体系列
css使用font-family属性定义文本的字体系列
-各种字体之间必须使用英文状态下的逗号隔开。
-一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
-尽量使用系统默认的自带字体，保证在任何用户的浏览器中都能正确显示。
4.2字体大小
css使用font-size属性定义字体大小。
-px（像素）大小是网页最常用的单位。
-谷歌浏览器默认字体大小是16px。
-不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
-可以给body指定整个页面文字的大小。
4.3字体粗细
cs使用font-weight属性设置字体的粗细。
-normal 正常字体
-bold 粗体 <strong></strong>有同样的效果
-bolder 特粗体
-lighter 细体
-number 自定义100|200|300|400|500（400=normal；700=bold）
4.4文字样式
css使用font-style属性设置文本风格。
-norma 默认值，浏览器会显示标准的字体样式。
-italic 浏览器会显示斜体的字体样式。<em></em>标签有同样的效果
4.5 font复合属性写法
简写方式（顺序不能错）：
font: font-style font-weight font-size/line-height font-family;
例如：font: italic 700 16px 'Microsoft yahei';
注意：
不需要设置的属性可以忽略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。