概念：Cascading Style Sheets层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
优点
行内样式：在标签内使用style属性指定css代码
<div style=‘color:read‘;>hello css</div>
不推荐这种css样式，因为和font标签（已淘汰）作用一样了
<font color="red">hello css</font>
内部样式：在head标签内，定义style标签，里面写css代码
<head>
<style>
p{
color: blue;
font-size:50px ;
font-style: italic;
}
</style>
<title>Title</title>
</head>
外部样式：在head标签内，通过link标签导入外部的css资源文件。
a.css文件代码：
div{
color:green
}
html文件
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./a.css">
<title>Title</title>
</head>
<body>
<div>外部的样式</div>
</body>
</html>
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器：用于“查找”（或选取）要设置样式的 HTML 元素。
基础选择器
元素选择器：根据元素名称来选择 HTML 元素。
下面代码使得页面上的所有 <p> 标签的字体为红色，居中显示
p {
text-align: center;
color: red;
}
id选择器：使用 HTML 元素的 id 属性来选择特定元素。id属性具有唯一性，同一页面中相同的id只能出现一次。要选择具有特定 id 的元素，写一个井号＃，后跟该元素的 id，id名不能只是数字。
这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
#para1 {
text-align: center;
color: red;
}
类选择器：选择有特定 class 属性的 HTML 元素。类不唯一，可以为不同的元素设置相同的class属性，以便于统一添加样式。如需选择拥有特定 class 的元素，写一个句点‘.’字符，后面跟类名。
下面代码作用在所有带有 class="center" 的 HTML 元素上：
.center {
text-align: center;
color: red;
}
补充选择器
后代选择器 div p{}
子选择器 div > p{}
兄弟选择器
相邻选择器
组合选择器 div,p,span{}
属性选择器：input[type="password"]
伪类选择器，针对不同的状态：div:hover
相关的css属性
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color，这里别写成了font-color | 字体颜色 |
font-size的取值单位常用px（像素点），也有em（与默认字体大小的比值）、百分比等。
font-size:40px;
font-size:2.5em;
/*上面两种写法相同，默认大小是16px，所以2.5em就是40px。注意css的注释和html不一样*/
font-weight和font-size不一样，用来设置字体粗细。
注意：文本样式和字体样式不一样。字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。
文本样式属性
| 属性 | 说明 |
|---|---|
| text-indent:像素值 | 首行缩进 |
| text-align:left/right/center | 水平对齐 |
| text-decoration: underline下划线/line-through中划线/none去除划线，和<a>一起用 | 文本修饰 |
| text-transform: uppercase转大写/lowercase转小写/capitalize首字母大写 | |
| line-height: 像素值 | 行高 |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
如果要设置首行缩进两个中文字符，就将text-indent的像素值设置成font-size的两倍。
几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框。
边框样式需要设置3种：
| 属性 | 说明 |
|---|---|
| border-width: 像素值 | 边框的宽度 |
| border-style: none无样式/dashed虚线/solid实线 | 边框的外观 |
| border-color | 边框的颜色 |
其实一个元素有四个边，可以分别设置不同的样式。
设置下边框
border-bottom: 2px dashed blue;
图片大小：可以设置width、height属性
图片边框：和边框样式的设置方法一样
图片对齐：水平对齐用text-align。垂直对齐用vertical-align: top顶部对齐/bottom底部对齐/middle/baseline基线对齐，对齐的参考是图片周围的文字。
文字环绕：float: left图片在文字左边，float: right图片在文字右边
背景样式包括两个方面：背景颜色和背景图片。在Web1.0时代，都是使用background或者bgcolor这两个“HTML属性”（不是CSS属性）定义。不过在Web2.0时代，对于元素的背景样式，我们都是使用CSS属性来实现。
在CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性。
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图片地址 |
| background-repeat | 定义背景图片重复，例如横向重复、纵向重复 |
| background-position | 定义背景图片位置 |
| background-attachment | 定义背景图片固定 |
在CSS中颜色的取值方式有3种。
用图片做背景：必须要设置高和宽，否则默认是0px，显示不出来。
<style type="text/css">
div{
background-image: url(/code/css/haizei.png);
width: 250px;
height: 100px;
}
</style>
background-repeat属性可以定义图片的重复方式，有下面四个取值：
| 属性值 | 说明 |
|---|---|
| repeat | 在水平方向和垂直方向上同时平铺（默认值） |
| repeat-x | 只在水平方向（x轴）上平铺 |
| repeat-y | 只在垂直方向（y轴）上平铺 |
| no-repeat | 不平铺 |
background-position的取值：点击链接
（1）默认情况下：字体为蓝色，带有下划线。
（2）鼠标点击时：字体为红色，带有下划线。
（3）鼠标点击后：字体为紫色，带有下划线。
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。
超链接伪类
| 伪类 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。可以把四种样式记成“爱恨原则”，即“love hate”。
<style type="text/css">
a{text-decoration:none;} /*取消下划线*/
a:link{color:red;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
</style>
不过，在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。上述代码可以简化成：
<style type="text/css">
a{
text-decoration:none;
color:red; /*直接在这定义color就行了，用不着a:link*/
}
a:hover{color:yellow;}
</style>
所以在实际开发中，只要关注hover就行了。其实hover不仅可以用在<a>元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:white;
background-color: lightskyblue;
}
div:hover
{
background-color: hotpink;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html
还可以设置鼠标样式：绿色学习网
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。
盒子的组成：
width和height：
元素的宽度（width）和高度（height）是针对content而言的。很多初学者容易把padding也认为是内容区的一部分，这样理解是错的。只有块元素才可以设置width和height，行内元素是无法设置width和height的，比如div可以设置宽高，但是span没有办法设置宽高。而且如果块元素没有设置width，他会占据整行。
原文：https://www.cnblogs.com/yellowchives/p/15202757.html