在HTML中如果设置标签的样式需要为每个HTML元素单独设置，当HTML元素很多时，会定义了一些重复的样式属性，并且要逐个修改是十分麻烦的。
CSS功能：将HTML页面的内容与样式分离，清晰、高效。
CSS：层叠样式表，把HTML元素的样式收集然后写到一起。
优势：
CSS语法可以分为两个部分：1、选择器；2、声明。
声明由属性和值组成，多个声明之间用分号隔开。
CSS的注释格式是 /**/
p{ /*属性 ：值*/
font-size: 12px;
color: #000;
background-color: aqua;
}
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: #000;
font-size: 20px;
}
</style>
</head>
行内样式是在标签的style属性中设定CSS样式。可以设置多个样式，用分号隔开。
<p style="font-size: 20px;color:#000">
</p>
在html的<head>标签中设置引入。
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url(‘./index.css‘);
</style>
</head>
在CSS中使用@import url()也是可以导入别的CSS。
链接式和导入式的差别：
选择器定义：一个HTML页面中有很多的元素，不同的元素可能会有不同的样式，一些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以设置样式了，选择器为CSS样式指定一个作用范围。
通过标签名来选择元素。
特点：标签选择器可以选择所有的标签元素
<head>
<meta charset="UTF-8">
<title>css的标签选择器</title>
<!--内嵌样式-->
<style type="text/css">
/* 标签选择器 */
p{
color: #000;
font-size: 10px;
}
span{
color: #000;
}
</style>
</head>
通过元素的ID值选择元素。通过“#”来选中id。
id选择器注意事项：
<head>
<meta charset="UTF-8">
<title>css的id选择器</title>
<!--内嵌样式-->
<style type="text/css">
#s1{
color: #000;
}
#s2{
font-size: 30px;
}
</style>
</head>
<a class=""></a>
<head>
<meta charset="UTF-8">
<title>css的类选择器</title>
<style type="text/css">
body{
color:#000;
font-size: 10px;
}
/* 类选择器 */
.title_color{
color:green;
}
</style>
</head>
类选择器的注意事项：
/*通用选择器，一般不用, 星号表示选择所有的标签*/
*{
color:#000；
}
尽量使用class选择器，少用id选择器，id一般使用在js上，js是通过id获取标签的。
因为HTML的元素可以嵌套，所以可以从某个元素的后代查找特定的元素，并设置样式，在html中元素嵌套是常见的，所以后代选择器也是比较常用的一种选择器。
div div a{
font-size:10px;
}
用>连接，仅用于子元素。明确指定就是container当前的div下的p标签。
.container> p{
font-size: 10px
}
由两个选择器连接构成，选择的是他们的交集，两个选择器之间不能有空格
<style type="text/css">
/*交集选择器*/
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background-color: yellow;
}
</style>
最终效果是h3内容，字体大小为30px，字体为红色，300px的宽度背景颜色为黄色。
也叫组合选择器
a,h1{
color: #000;
font-size: 10px;
text-decoration: none;
}
这里的属性不是html自带的属性，是自定义的属性。通常在表单控件中使用的比较频繁。
拥有f属性的label标签会设置成红色，大小20px
label[f]{
color: red;
font-size: 20px;
}
label[f="username"]{
color: yellow;
}
设置label标签中的f属性以k开头的元素变大
label[f^="username"]{
color: yellow;
}
以什么结尾只要将^替换成$，设置成包含字母k的元素，只要改成*即可
label[f*="username"]{
color: yellow;
}
input[type="text"]{
background-color: #000;
}
伪类用于向某些选择器添加特殊的效果。
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: red;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #000;
}
鼠标点击瞬间的样式：
a:active {
color: #000;
}
input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #000;
}
三种伪元素选择器：first-letter、before、after。其中after是运用最多的伪元素选择器。
用于为文本的首字母设置特殊样式。
/* 设置第一个首字母的样式 */
p:first-letter{
color: red;
font-size: 30px;
}
用于在元素的内容前面插入新内容。使用此伪元素选择器一定要结合content属性。
/* 在...之前添加内容，很少用 */
p:before{
content: "an";
}
用于在元素的内容后面插入新内容。同样，使用此伪元素选择器一定要结合content属性。
/* 在...之后添加内容，使用非常频繁，通常与后面讲到的布局有很多关联(清除浮动) */
p:after{
content: "&";
color: red;
font-size: 40px;
}
有一些属性是可以继承下来的：color、font-、text-、line- 都属于文本元素；
除了上面这四种属性可以继承，其他属性是不能继承的，像一些盒子元素，定位的元素（浮动、绝对定位、固定定位）不能继承。比如backgroud-color是不能继承的，继承也是多层的，不仅可以继承父亲的也可以继承爷爷的。
选择器的权重规则来决定的。谁的权重大，浏览器就会显示谁的属性
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
.c1{
font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;
}
.c1{
/*font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;*/
font-size:14px; 默认字体大小为16px.
}
color:red;
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url(‘1.png‘) no-repeat right top;
原文：https://www.cnblogs.com/journeyer-xsh/p/13438900.html