CSS简介
css：cascading style sheet的缩写，意为层叠样式表，主要是用于描述网页的表现形式（网页元素的大小、颜色）
CSS的语法规则
css的语法规则主要是三部分组成：选择器{属性1:属性1值…;}
1、选择器：用来选择要定义样式的网页中元素的东西
2、属性：表示网页中元素要定义什么样的类型属性（颜色、大小）
3、属性值：表示属性的显示值（网页中的显示效果）
选择器
要选择器为以下三种，css还提供了其他类型选择器，比如分组选择器，后代选择器…有兴趣去查文档了解
<!--id选择器：通过要定义样式元素的id属性值（唯一）来锁定要定义样式的元素，语法：#id属性值-->
<span id="idSel">id选择器</span>
<!--元素选择器：通过要定义样式元素的标签名来锁定要定义样式的元素，语法：元素-->
<span>元素选择器</span>
<!--类选择器：通过要定义样式元素的class属性值来所锁定要定义的元素，语法：.class属性值-->
<span class="classSel">类选择器</span>
id选择器
通过要定义样式元素的id属性值(唯一)来锁定要定义样式的元素，语法：#id属性值{}
#idSel{
color: red;
}
元素选择器
通过要定义样式元素的标签名来锁定要定义样式的元素，语法：元素{}
span{
font-family: cursive;
}
类选择器
通过要定义样式元素的class属性值来所锁定要定义的元素，语法：.class属性值{}
.classSel{
color: crimson;
}
选择器优先级
d选择器 > 类选择器 > 元素选择器
CSS注释
css的注释方法：/**/
/*.classSel{*/
/* color: crimson;*/
/*}*/
CSS常用设置样式
颜色
可以定义元素的颜色，color、background-color等属性可以设置颜色样式，常用设置颜色样式有以下6中方法：指定颜色可以通过使用预定义的颜色名称、RGB、HEX、HSL、RGBA、HSLA 值
颜色名称(常用)
颜色名称：比如red、green等颜色的具体名称来设置颜色，名称不区分大小写
<h1 style="color: red">颜色名称</h1>
RGB(常用)
RGB：是通过rgb()函数对三原色(red、green、blue)的强度来进行控制来实现不同颜色的设置
<h2 style="color: rgb(255,100,100)">rgb</h2>
RGBA(常用)
RGBA：在RGB上进行扩展，A代表设置颜色的透明度
<h4 style="color: rgba(100,255,0,100)">rgba</h4>
HEX(常用)
HEX：使用十六进制码以 #RRGGBB 或 #RGB（比如 #ff0000）的形式设置具体颜色，“#” 后跟 6 位或 3 位十六进制字符（0-9, A-F）
<h3 style="color: #ffa500">hex</h3>
HSL
HSL：通过 hsl(hue：色调、saturation：饱和度、lightness：亮度) 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色
<h5 style="color: hsl(0,50%,50%)">hsl</h5>
HSLA
HSLA：在hsl上进行扩展，A代表设置颜色的透明度
<h6 style="color: hsla(0, 100%, 50%, 0.5)">hsla</h6>
背景
背景主要是定义元素的背景效果，css中可以设置背景样式的常用属性有以下几种
background-color
background-color 为元素设置背景颜色-
<p style="background-color: blue">background-color属性</p>
background-image
background-image 用来为某个元素设置背景图像
<p style="background-image: url('../HTML/64960446_p0.jpg')">background-image属性</p>
background-size
background-size 属性用来设置背景图像的尺寸
<p style="background-image: url('../HTML/64960446_p0.jpg');background-size: contain;">background-size 属性</p>
字体
文本主要定义元素内文本的字符间距、对齐方式、缩进，常用的属性有以下几种
text-align
text-align 属性用来设置元素中文本的水平对齐方式
<p style="text-align: left">左对齐</p>
<p style="text-align: right">右对齐</p>
<p style="text-align: center">居中对齐</p>
text-decoration
text-decoration 属性用于设置或删除文本的装饰，最常用的做法就是使用 text-decoration 属性来删除标签的默认下划线
<p style="text-decoration: underline">带下划线文字</p>
<p style="text-decoration: overline">带上划线文字</p>
<p style="text-decoration: line-through">带贯穿线文字</p>
text-indent
text-indent 属性用来为元素中的文本添加首行缩进的效果
<p style="text-indent: 2em;direction: ltr;">text-indent 属性用来为元素中的文本添加首行缩进的效果，至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p>
<p style="text-indent: 2em;direction: rtl;">text-indent 属性用来为元素中的文本添加首行缩进的效果，至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p>
line-height
line-height 属性用来设置文本的行高
<p style="line-height: 200%">line-height 属性用来设置文本的行高</p>
边框
边框是围绕着元素内容和内边距的一条或多条线段，可以设置这些线段的样式、宽度和颜色，常见的边框属性是以下几种
border-style
border-style 属性用来设置元素中所有边框的样式
<p style="border-style:dotted">border-style 属性</p>
border-width
border-width 属性用来设置元素中所有边框的宽度
<p style="border-width: 2px 2px;border-style: solid">border-width 属性</p>
border
border 属性同时定义一下三个属性：border-width 用来设置边框的宽度；border-style 用来设置边框的样式；border-color 用来设置边框的颜色
<p style="border: 2px dotted red">border</p>
表格
设置表格的布局以及整体外观，常用属性以下几种
table-layout 属性用来设置表格布局时所用的布局算法
border-collapse 属性用来设置是否合并表格中相邻的边框
<table style="table-layout: auto;border-collapse: collapse;" border="2">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>11</td>
</tr>
</table>
列表
设置列表的布局以及整体外观，常用属性以下几种
list-style-type
list-style-type 属性可以设置列表中每个列表项前标记的样式
<ul style="list-style-type: circle">
<li>CSS链接</li>
<li>CSS边框</li>
<li>CSS表格</li>
</ul>
list-style-position
list-style-position 属性可以设置在何处放置列表项前的标记
<ol style="list-style-position: inside">
<li>CSS链接</li>
<li>CSS边框</li>
<li>CSS表格</li>
</ol>
list-style-image
list-style-image 属性可以将列表项前的标记替换为一个图像
<!--<ul style="list-style-image: url('../HTML/64960446_p0.jpg')">-->
<!-- <li>CSS链接</li>-->
<!-- <li>CSS边框</li>-->
<!-- <li>CSS表格</li>-->
<!--</ul>-->
总结
CSS是样式非常多，显示效果非常丰富，有兴趣可以查看w3school 在线教程手册试试看