前言
是不是感觉使用HTML标签控制网页效果很麻烦呢，那就随小编来看看CSS吧。CSS能更加精准的控制网页效果，CSS是cascading style sheet的缩写，称为“层叠样式表”或“级联样式表”，由多种规则组成，通过浏览器解释执行，能够更加精确的控制页面元素、布局，还能够实现内容和表现的分离，使网站的风格趋向统一、维护更加容易。
1
知识点
一、CSS的基本语法
1.基本语法
`selector{property1:value1; property2:value2;…}
`
2.语法说明
1）.选择器：
选择器可以是HTML标记或属性的值或自定义的标识符。
2）.属性/属性值对：
“属性：属性值”必须一一对应，属性与属性值之间必须用“:”连接，每个属性/属性值用“;”分隔。
3）.属性：
CSS中属性名为两个或两个以上的单词组成时，单词之间用“-”连接。
实例：`p{
font-size: 10px;
background-color: blue;
}`
即是将HTML中的所有段落设置为“背景为蓝色，字体大小为10像素”。
上面的实例还可以写为：p{font-size: 10px;background-color: blue;}，小编建议写第一种哦，因为更加直观，便于更改 。
4）.复合属性：
在CSS中，部分属性可以表示多个属性值。
实例：`p{
font-size: 10px;
font-family: 宋体;
font-style: italic
}`
可直接用p{font: italic 10px 宋体}表示。
小提示：使用font复合属性时，应严格按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序。类似的复合属性还有border、margin、padding等。
5）.多个属性值：
在CSS中，部分属性可以设置多个属性值，用“,”分隔。
实例：p{font-family：”宋体”，”黑体”,”微软雅黑”}
即可用宋体、黑体、微软雅黑三种字体来设置段落中的字体效果，若系统中找不到宋体，就用黑体；若也找不到黑体，就用微软雅黑。
6）.标签合并：
当几个标签用到同一个属性且属性值相同时，便可合并标签。
实例：`h3{color:red}
p{color:red}`
可直接写为：h3,p{ color:red }
2
CSS的引用方法
1.行内样式
语法：<标记 style=”属性1: 属性值1; 属性2: 属性值2;…”>
实例：<p style=”font-size:10px;color:red;”>
即是定义段落文字为红色，大小为10像素。
2.内部样式
内部样式写在HTML的<head></head>中，使用<style></style>放置CSS规则。
语法：<style type=”text/css”>
选择器1{属性1: 属性值1; 属性2: 属性值2;…}
选择器2{属性1: 属性值1; 属性2: 属性值2;…}
…
选择器n{属性1: 属性值1; 属性2: 属性值2;…}
<style>
实例：`p{
font-size: 10px;
background-color: blue;
}
table{
border-with:2px;
border-style:soild
text-align:center
}
`
3.外部样式
外部样式表是将CSS写在以.css为后缀名的文件中，在需要用到该样式的网页中引用此文件，可供多个网页使用，从而实现整体风格统一。外部样式分为链入外部样式表和导入外部样式表。
1）.链入外部样式表
语法：<link type=”text/css”,rel=”stylesheet”,href=”out.css”>
type规定被链接文件的MIME类型，rel定义当前文件与被链接文件之间的关系，href定义被链接文件的位置。
2）.导入外部样式表
语法：<style type=”text/css”>
@import url(“外部样式表文件1名称”)；
@import url(“外部样式表文件2名称”)；
选择器1{属性1: 属性值1; 属性2: 属性值2;…}
选择器2{属性1: 属性值1; 属性2: 属性值2;…}
…
选择器n{属性1: 属性值1; 属性2: 属性值2;…}
<style>
导入样式表必须在style标记内开头的位置定义，可同时导入多个外部样式表，每条语句必须以“;”结束，必须书写“@import”。通常，导入外部样式写在最前面，内部样式写在后面。
3
结语
CSS的引用方法中，最常用的是链入外部样式表，一定要熟练掌握哦，通常不使用行内样式，因为太多的行内样式会使HTML文件非常混乱，是不是觉得CSS非常有趣呢，赶紧动手学起来吧！
文章来源:标梵互动(https://www.biaofun.com/)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。