CSS简介
CSS即层叠样式表(Cascading Style Sheets)它主要用于设置HTML标签中的属性样式。它能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS语法
CSS规则由两个主要的部分构成：选择器以及一条或多条声明，即：
选择器{属性:值; 属性:值;…. }
请注意：
将所有声明放到{ }中 每条声明由三部分组成——属性:值 声明以;结束
CSS属性
CSS常见属性及其举例请参见下图
在网页中常需处理文字的字体，故在此对font属性作较为详细的描述。
现将这些属性的特点和用法整理如下：
关于font-family
在CSS中有三种表示方式标识同一个字体即：汉字和英文以及Unicode编码。比如很常用的宋体就可以用：宋体和SimSun以及\5B8B\4F53这三者来标识。
所以，共有三种方式设置font-family
第一种：使用汉字，例如font-family: 微软雅黑; 第二种：使用英文，例如font-family: SimSun; 第三种：使用Unicode编码，例如font-family: “\96B6\4E66”
为规范开发，推荐使用Unicode编码设置font-family的方式。但是有时候会出现这么一种情况：虽然对文字设置了字体但是在某些设备上却没有效果。这是因为这些设备上没有与之对应的字体库，所以就显示不出其对应的文字效果。为了避免类似情况的发生可以为font-family设置多个字体，例如：
font-family: “宋体”,”SimSun”,”\96B6\4E66”;
关于font-weight
font-weight的取值方式有三种
第一种：设置数字(100-900)，例如font-weight: 500; 第二种：设置为bold，例如font-weight: bold; 第三种：设置为normal，例如font-weight: normal;
为规范开发，在设置文字加粗显示时推荐使用font-weight:700;
关于font-style
font-style的取值方式有两种
第一种：文字斜体显示，例如font-style: italic; 第二种：文字正常显示，例如font-style: normal;
在CSS中我们还可以通过属性连写的方式同时为文本设置几种效果。
font: font-style font-weight font-size/line-height font-family
比如：
font: italic 400 50px 宋体;
在使用属性连写的时候请注意
第一点：font属性联写必须要有font-size和font-family 第二点：font-size和font-family的顺序不能颠倒
CSS选择器
CSS常见选择器的分类:
基础选择器
标签选择器 类选择器 id选择器 通配符选择器 复合选择器
标签指定式选择器 后代选择器 并集选择器
CSS的内嵌式写法
<head>
<style type="text/css">
/*此处为CSS代码*/
</style>
</head>
在该写法中，可以将CSS样式定义在
标签中
嗯哼，在对CSS有了基本的了解之后我们开始深入的学习，先从选择器开始。
标签选择器
标签选择器的语法格式如下所示：
选择器{属性:值; 属性:值;…. }
先来看一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
p{
font-size: 23px;
color: red;
width: 650px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<p>欢迎访问我的博客</p>
<br>
<p>谷哥的小弟</p>
<br>
<p>https://blog.csdn.net/lfdfhl</p>
</body>
</html>
效果如图所示:
在此示例中使用CSS给该网页中的所有p标签设置了样式。
类选择器
在刚才使用的标签选择器的过程中我们发现：它会将所有的某种标签全部设置为统一的CSS样式。但是有时候只需要设置某种标签中的任意几个，此时标签选择器就不再适用了，而应该使用类选择器。
类选择器的语法格式如下所示：
.自定义的选择器名称{属性:值; 属性:值;…. }
类选择器的使用方式如下所示：
通过标签的class属性调用类样式，例如
先来看一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.testselector{
font-size: 23px;
color: red;
width: 650px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<p>欢迎访问我的博客</p>
<br>
<p class="testselector">谷哥的小弟</p>
<br>
<p class="testselector">https://blog.csdn.net/lfdfhl</p>
</body>
</html>
效果如图所示:
在此示例中先定义了一个类选择器testselector，然后在
中使用了该选择器。多个标签可以同时调用一个类选择器，一个标签可以调用多个类选择器。
ID选择器
ID选择器和类选择器非常类似。
ID选择器的语法格式如下所示：
#自定义的选择器名称{属性:值; 属性:值;…. }
类选择器的使用方式如下所示：
通过标签的id属性调用类样式，例如
请看示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<style type="text/css">
#testselector{
font-size: 23px;
color: red;
width: 650px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<p>欢迎访问我的博客</p>
<br>
<p id="testselector">谷哥的小弟</p>
<br>
<p id="testselector">https://blog.csdn.net/lfdfhl</p>
</body>
</html>
运行后效果和上例一样。与类选择器不同的是：一个标签只能调用一个ID选择器。虽然多个标签可以使用同一ID选择器，但是不建议这么做，因为在前端开发中在大部分情况下id属性是结合JS使用的。所以，在实际开发中极少采用ID选择器而多用类选择器。
通配符选择器
通配符选择器非常的简单，它会将页面中所有的标签都设置成统一的样式。
通配符选择器的语法格式如下所示：
*{属性:值; 属性:值;…. }
请看示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title>
<style type="text/css">
*{
font-size: 23px;
color: red;
width: 650px;
height: 30px;
}
</style>
</head>
<body>
<p>欢迎访问我的博客</p>
<p>谷哥的小弟</p>
<p>https://blog.csdn.net/lfdfhl</p>
</body>
</html>
