1. CSS1.0
19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
2. CSS2.0（添加div等）
1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
3. CSS2.1（添加了浮动，定位等）
2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。
4. CSS3（添加了圆角，阴影，动画等）
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。
CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。
div {
background-color: blue;
color: rebeccapurple;
font-family: "agency fb";
}
/* 这里就是注释 */
1.行内式
行内样式将样式定义在具体html元素的style属性中。行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。
<p style="color:red;font-size:50px;">这是一段文本</p>
2.嵌入式
嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套
<style>
h1{
color: red;
}
</style>
3.引用式
在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达至更好的重用效果。
<link rel="stylesheet" href="css/style.css">
注意：CSS的优先级为就近原则
通用选择器
选择所有 *
* {
......
}
元素选择器
选择指定标签
元素名称 {
......
}
id选择器
选择设置过指定id属性值的元素 #
#id属性值 {
......
}
类选择器
选择设置过指定class属性值的元素
.class属性值 {
......
}
分组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔
选择器1,选择器2, ...{
......
}
CSS样式的优先级，是根据选择器的权重来决定的，常见的权重如下，权重越大，优先级越高
通用选择器：0
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
后代选择器
用于选择指定元素后的所有元素（要在指定标签内部），以空格分隔
选择器1 选择器2 {
......
}
子代选择器
用于选择指定标签元素的所有同级第一代子元素（要在指定标签内部），以大于号分隔
选择器1 > 选择器2 {
......
}
相邻兄弟选择器
可选择紧接在所选元素后的同级元素，以加号分隔
选择器1 + 选择器2 {
......
}
普通兄弟选择器
选择紧接在所选元素后的所有同级元素，以波浪线分隔
选择器1 ~ 选择器2 {
......
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 */
.food li {
color: red;
}
/* 子代选择器 */
.food > li {
color: blue;
}
/* 相邻兄弟选择器 */
.d + p {
color: blueviolet;
}
/* 普通兄弟选择器 */
#l ~ li {
color: forestgreen;
}
</style>
</head>
<body>
<h3>食物</h3>
<ul class="food">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<li>蔬菜</li>
<ul>
<li>黄瓜</li>
<li>花菜</li>
<li>白菜</li>
</ul>
</ul>
<p>相邻兄弟选择器1</p>
<div class="d">
<p>相邻兄弟选择器2</p>
</div>
<div>
<p>相邻兄弟选择器3</p>
</div>
<div class="d">
<p>相邻兄弟选择器4</p>
</div>
<p>相邻兄弟选择器5</p>
<div>
普通兄弟选择器
<ul>
<li>java</li>
<li id="l">html</li>
<li>css</li>
<li>js</li>
<ul>
<li>linux</li>
<li>c++</li>
</ul>
</ul>
</div>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul的第一个子元素 */
ul li:first-child {
background-color: red;
}
/* ul的最后一个子元素 */
ul li:last-child {
background-color: blue;
}
/*
选择当前p元素的父元素的第一个子元素，并且是当前元素才生效
*/
p:nth-child(1) {
background-color: chartreuse;
}
/* 选中当前p元素的父元素下的第二个p元素，并且是当前元素才生效 */
p:nth-of-type(2) {
background-color: #9648ff;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
效果：
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #45ff64;
text-decoration: none;
line-height: 50px;
text-align: center;
}
/* 选择有id属性的a标签 */
/*a[id]{*/
/* background-color: yellow;*/
/*}*/
/* 选择id属性值为first的a标签 */
/*a[id="first"]{*/
/* background-color: yellow;*/
/*}*/
/* 选择class属性值含有link的a标签,只要能截取出link这个词就行 */
/*a[class *= "link"]{*/
/* background-color: yellow;*/
/*}*/
/* 选择class属性值含有独立的单词link的a标签 */
/*a[class ~= "link"]{*/
/* background-color: yellow;*/
/*}*/
/* 选择href属性值以http开头的a标签 */
/*a[href ^= "http"]{*/
/* background-color: yellow;*/
/*}*/
/* 选择href属性值以http独立唯一单词开头的a标签 */
/*a[href |= "http"]{*/
/* background-color: yellow;*/
/*}*/
/* 选择href属性值以com结尾的a标签 */
a[href$="com"]{
background-color: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" title="百度链接" class="first link" id="first">1</a>
<a href="https://www.jingdong.com" class="link link" >2</a>
<a href="ab.doc" class="link item" target="_blank" >3</a>
<a href="xxx.pdf" class="llllllllllinnkkkkk" >4</a>
<a href="http" class="linkitem" >5</a>
<a href="http http" class="link end" >6</a>
</p>
</body>
</html>
效果：
原因：
文本字体，该属性设置文本的字体。 font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体， 所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。
注意：
1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：
body {
font-family: "arial black";
}
2）多个字体系列是用一个逗号分隔指明
p{
font-family: 微软雅黑,黑体,"agency fb";
}
字体大小
body {
font-size: 50px; /*字体大小50px*/
}
#span1 {
font-size: 25px; /*字体大小25px*/
}
字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
1）normal：文本正常显示；
2）italic：文本斜体显示；
3）oblique：文本倾斜显示，oblique是将文字强制倾斜。
说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常 用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜
字体加粗，该属性设置文本的粗细。
100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。
说明一点：页面中想要突出显示的字体一般用span标签包含，然后修改样式
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*font-style: italic;*/
/*font-weight: bold;*/
/*font-size: 20px;*/
/*font-family: 楷体;*/
/* 可以使用font一次性设置 */
font:italic bold 20px "Arial Black",楷体;
}
</style>
</head>
<body>
<h1>沉入绿影，品茶心</h1>
<p>
喜欢茶，有一种茶有个极其风雅的名字，叫飘雪。飘雪是茉莉花茶。我不敢用这种茶叶沏茶，因为是会失眠的。茶有千好，只是吃茶的坏处只有一项，就是吃多了会失眠。失眠是让人苦恼的事情。这就是吃茶的唯一的坏处。
</p>
<p>
没有茶的日子是荒芜的。寂静的影，在灯下阅读的喜悦，一壶清茶是必须的装饰。茶用味道说话，它在述说，不管你听不听得懂。茶若浓了，是悲伤;茶若淡了，是欢喜。淡到没有味时，茶就陷入沉思，不再说话。
</p>
<p>
Are you learning another language? Maybe you‘re trying to get to grips with it for work or study, or maybe you‘re trying to master it just for the fun of it? Language learning is nothing new, of course, but technology has made it easier than ever to grasp.
</p>
</body>
</html>
效果：
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
/* 最后一个参数是透明的，取值0~1 */
h3 {
color:rgba(255,0,0,0.5);
}
设置文本对齐方式：
body {
text-align:center;
}
h3 {
text-decoration:underline;
}
/* 2em就代表缩进两个字 */
p.ident2 {
text-indent: 2em;
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 初始颜色 */
a{
color: blue;
text-decoration: none;
display: block;
}
/* 鼠标悬停时的状态 */
a:hover{
color: darkorange;
font-size: 40px;
}
/* text-shadow: 阴影颜色 水平延伸距离 垂直延伸距离 阴影模糊值
水平距离和垂直距离可以为负，对应一个平面直角坐标系的坐标轴上的值
*/
.price {
text-shadow: red 10px 10px 2px;
}
</style>
</head>
<body>
<p>
<img src="img/a.jpg" >
</p>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="#">作者: 杨冠宝</a>
</p>
<p >
<a class="price" href="#">￥99</a>
</p>
</body>
</html>
效果：
设置元素的背景颜色
body{
background-color: white;
}
设置背景图像
body{
background-image: url("img/a.jpg");
}
设置背景图像以何种方式铺展
body{
background-image: url("img/a.jpg");
background-repeat: repeat-y;
}
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
例子：
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border、padding、margin三个属性构成了盒子模型。
设置所有的边框属性。
1）可同时设置边框的宽度、样式、颜色
table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
2）使用border-width、border-style、border-color单独设置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
3）border-collapse
table {
border-collapse : collapse;
}
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
p.margin {
margin: 2px 4px 3px 4px;
}
单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
说明：
设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：
td {
padding:15px;
}
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right （同上）
默认按照上右下左的顺序设定 （同上）
注意：元素的大小= margin + border + padding + 内容宽度
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 0 100px 0 0;
}
.div2{
width: 100px;
height: 50px;
border: 2px solid red;
margin: 30px;
border-radius: 50px 50px 0 0;
}
/* 图片的大小为50x50 */
img {
border-radius: 25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<img src="img/a.jpg" >
</body>
</html>
效果：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 60px;
margin: 0 auto;
}
img{
border-radius: 25px;
box-shadow: 10px 10px 80px 2px red;
}
</style>
</head>
<body>
<div>
<img src="img/a.jpg" >
</div>
</body>
</html>
效果：
display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
| 值 | 描述 |
|---|---|
| none | 此元素不会显示 |
| inline | 此元素将会显示为行内元素，元素前后没有换行符 |
| inline-block | 行内块级元素，既是是行内元素，也是块级元素 |
| block | 此元素将会显示为块级元素，元素前会带有换行符 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
块级元素
</div>
<span>行内元素</span>
</body>
</html>
效果：
float的属性值有none、left、right。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="father">
<div class="layer1"><img src="img/1.jpg" ></div>
<div class="layer2"><img src="img/2.jpg" ></div>
<div class="layer3">为用户甄选海量的高清美图，用更流畅、更快捷、更精准的搜索体验，带你去发现</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
.father{
border: 2px solid black;
}
.layer1 {
border: 1px solid black;
float: left;
}
.layer2 {
border: 1px solid black;
float: left;
}
.layer3 {
border: 1px solid black;
float: left;
}
效果：
与display对比：
clear
/*
clear: right;右侧不允许有浮动元素
clear: left;左侧不允许有浮动元素
clear: both;两侧不允许有浮动元素
clear: none;
*/
解决方法：
1、为父级元素设一个足够大的高度
.father{
border: 2px solid black;
height: 500px;
}
2、在父级div中最后添加一个空div
/* 空div的class值为clear */
.clear{
margin: 0;
padding: 0;
clear: both;
}
3、overflow
/* 没有设置高度，高度由块内元素决定 */
.father{
border: 2px solid black;
overflow: hidden;
}
4、父类添加一个伪类：after
.father:after{
content: "";
display: block;
clear: both;
}
小结:
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
浮动元素后面增加空div
简单，代码中尽量避免空div
overflow
简单，下拉的一些场景避免使用
父类添加一个伪类:after_(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
margin: 0 auto;
}
a {
display: block;
width: 100px;
height: 100px;
background-color: fuchsia;
text-align: center;
line-height: 100px;
text-decoration: none;
color: white;
}
#box a:hover{
background-color: blue;
}
.a2,.a4{
position: relative;
left: 200px;
bottom: 100px;
}
.a5{
position: relative;
left: 100px;
bottom: 300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
效果：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid red;
}
.d1 {
background-color: #45ff64;
position: absolute;
left: 10px;
}
.d2 {
background-color: fuchsia;
}
.d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="father">
<div class="d1">段落一</div>
<div class="d2">段落二</div>
<div class="d3">段落三</div>
</div>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /* 绝对定位相对于浏览器 */
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) { /* 固定定位 */
width: 50px;
height: 50px;
position: fixed;
background-color: #8187ff;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
效果：
与绝对定位对比：
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
属性值
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="img/bg.png" ></li>
<li class="text">心花怒放</li>
<li class="bg"></li>
<li>主演：黄渤 徐峥</li>
<li>时间：2014-09-30</li>
</ul>
</div>
</body>
</html>
#content{
margin: 0;
padding: 0;
width: 300px;
overflow: hidden;
border: 2px solid red;
font-size: 12px;
line-height: 25px;
text-align: center;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/* 父级元素确定相对定位 */
ul{
position: relative;
}
.text,.bg {
/* 确定绝对定位，相对于ul */
position: absolute;
width: 300px;
height: 25px;
bottom: 56px;
}
.text{
z-index: 999;
}
.bg{
background-color: #8187ff;
/* 设置透明度 0~1 */
opacity: 0.8;
}
效果：
原文：https://www.cnblogs.com/javaconner/p/14881360.html