一、CSS介绍和语法
二、CSS引入方式
三、基本选择器
四、高级选择器
五、伪类选择器
六、伪元素选择器
1?? CSS介绍和语法
1、 CSS的介绍
（1）为什么需要CSS？
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，
并且修改的时候需要逐个修改，费心费力。而此时CSS就出现了。
CSS的出现解决了以下问题：
首先，将HTML页面的内容与样式的分离；其次，提高了Web开发的效率。
（2）什么是CSS？
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
（3）CSS的优势
一是内容与表现分离；二事网页的表现统一，容易修改；三是丰富的样式，使页面布局更加灵活；
四是减少网页的代码；五是运用独立页面的CSS，有利于网页被搜索引擎收录。
（4）如何使用CSS？
通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中
通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该
文件中的样式规则渲染HTML文件。
2、CSS语法
（1）CSS基础语法
CSS语法分为两部分：
选择器和声明
声明由属性和值组成，多个声明之间用分号隔开。
语法： ???选择器｛ ???????????声明1； ???????????声明2； ???????????声明3； ??｝ ?例如： ???????????h2{ ???????????????color:green; ???????????????font-size:20px; ???????????} ???（2）代码注释
方法：/*代码注释写在这里*/
2?? CSS引入方式
网页中引入CSS样式有三种：
???1、内联样式 ???2、行内样式表 ???3、外部样式表 ???????①链入式 ???????②导入式
（1）内嵌方式
style 标签
???例如： ???<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css的引入方式1</title>
<!--CSS引入的方式一--> ???<style> ???????h2{ ??????????color:green; ????/*这是注释*/ ???????????font-size: 20px; ???????} ???</style></head><body> ???<div> ???????<h2>这是二号标题</h2> ???</div></body></html>
（2）行内样式
示例如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css的引入方式2</title></head><body> ???<div> ???????<p style="font-size: 30px;color:red">这是一个段落标签</p> ???</div></body></html>
（3）外联样式表--链接式
link 标签
例如：index.css为css样式表文件
index.css文件如下
p{
color:pink;
font-size:30px;
}
然后在HTML文件中通过link标签引入，语法：index.css"/>
示例如下：
<!DOCTYPE html> ???<html lang="en"> ???<head> ???????<meta charset="UTF-8"> ???????<title>css_1</title> ???????<link rel="stylesheet" type="text/css" href="index.css"> ???</head> ???<body> ???????<div> ???????????<p >这是一个段落标签</p> ???????</div> ???</body> ???</html>
（4）外联样式表--@import url()方式 导入式
同样导入index.css
语法如下：
<style> ??????????@import url(index.css); ??????</style> 注意：@import url() 必须写在文件最开始的位置
示例如下：
<!DOCTYPE html> ???????<html lang="en"> ???????<head> ???????????<meta charset="UTF-8"> ???????????<title>css_1</title> ???????????<style> ???????????????@import "index.css"; ???????????</style> ???????</head> ???????<body> ???????????<div> ???????????????<p >这是一个段落标签</p> ???????????</div> ???????</body> ???????</html>
链接式与导入式的区别：
????1、<link/>标签属于XHTML,@import是属性css2.1 ????2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示 ????3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中 ????4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
前端开发之CSS篇一
原文地址：https://www.cnblogs.com/schut/p/9279054.html