css是指层叠样式表（Cascading Style Sheets），样式定义如何显示html元素，样式通常又会存在于样式表中。
css优势：
如何用？
我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可
这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。
css语法分为2个部分：
1.选择器
2.声明
声明由属性和值组成，多个声明之间用分号分隔。
css注释：注释是代码之母
/*这是注释*/<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
P{
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>链接式 link标签
#html文件
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>#index.css文件
p {
color: green;
}导入式
了解即可。
index.css
@import url(other.css)注意：
@import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
1.id选择器：特定属性的元素（标签）
2.类选择器
<style>
.box{
width:200px;
height:200px;
background-color:yellow;
}
.active{
border-radius: 200px;
}
</style>
<div class='box active'></div>
<div class='box'></div>
<div class='box'></div>3.标签选择器
div{}
p{}
ul
ol
...1.后代选择器：中间是空格
div p{
color: red;
}2.子代选择器：中间是>号
dic>p{
color:red;
}3.组合选择器：中间用，连接
p,span{
color: green;
font-size: 15px;
padding: 0;
margin: 0;
}4.交集选择器:选择器1选择器2{}
div.active{
color: orange;
}5.如何重置网页样式？
html,body,p,ul,ol{
margin: 0; /*去除外边距*/
padding: 0; /*去除内边距*/
}
/*通配符选择器*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none; /*去除下划线*/
}
input,textarea{
border: none; /*去除默认边框*/
outline: none; /*去除外线*/
}1.对于a标签
2.爱恨准则：LoVe HAte
3.符号： 使用一个冒号
/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问后设置的属性*/
a:visited{
color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}1.根据属性，选择符合条件的标签
2.示例：
/*设置所有文本输入框的属性*/
input[type='text']{
background-color: red;
}
/*设置所有多选框的属性*/
input[type='checkbox']{
}
/*设置所有提交按钮的属性*/
input[type='submit']{
}通过伪元素添加的内容为行内元素
符号：使用两个冒号
/*设置段落第一个字的属性*/
p::first-letter{
color: red;
font-size: 20px;
font-weight: bold;
}
/*在段落开头添加内容*/
p::before{
content:'@';
}
/*解决浮动布局常用的一种方法*/
/*在段落结尾添加内容*/
p::after{
content:'$';
}
原文：https://www.cnblogs.com/hanfe1/p/11943957.html