原文: http://blog.gqylpy.com/gqy/254 " 目录 一、介绍 二、语法 三、引入方式 1. 行内样式 2. 嵌入式 3. 外部样式 四、选择器 1. 基本选择器 2.组合选择器 3.属性选择器 4.不常用选择器 5. 分组和
原文: http://blog.gqylpy.com/gqy/254
"
目录
一、介绍
二、语法
三、引入方式
1. 行内样式
2. 嵌入式
3. 外部样式
四、选择器
1. 基本选择器
2. 组合选择器
3. 属性选择器
4. 不常用选择器
5. 分组和嵌套
6. 伪类选择器
7. 伪元素选择器
8. 选择器优先级
一、介绍
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素.
当浏览器读到一个样式表时，便会按照这个样式表来对文档进行格式化（渲染）
优点：内容样式分离，便于团队开发；样式可复用，提高开发效率；页面精确控制，实现精美、简化复杂的页面；更利于搜索引擎的搜索；结构更加突出；
二、语法
CSS样式由两部分组成：选择器: 声明; 声明又包括属性和属性值，每个声明之后用分号结束。
三、引入方式
1. 行内样式
行内式是在标记的style属性中设定CSS样式，立即生效，无须引用. 不推荐大规模使用
2. 嵌入式
嵌入式时将CSS样式集中写在网页的head标签内的style标签中，如下：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta charset="UTF-8">
-
<title>CSS
</title>
-
<style>
-
/*class标记前加"."*/
-
.class_sign {
color: red}
-
/*id标记前加"#"*/
-
#id_sign {
color: green}
-
</style>
-
</head>
-
<body>
-
<div class="class_sign">Hello world
</div>
-
<div id="id_sign">Hello world
</div>
-
</body>
-
</html>
3. 外部样式
写在单独的样式文件中，可对整个网站的所有网页有效，通过链接的方式引入，链接语法：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta charset="UTF-8">
-
<title>CSS
</title>
-
<!--引入css文件样式，自动匹配标签-->
-
<link rel="stylesheet" href="style.css" />
-
</head>
-
<body>
-
<div class="class_sign">Hello world
</div>
-
<div id="id_sign">Hello world
</div>
-
</body>
-
</html>
四、选择器
1. 基本选择器
- 元素选择器
 - ID选择器
 - 类选择器
样式类名不要以数字开头（有些浏览器不识别）
标签中的class属性如果有多个，可用空格分隔. - 通用选择器
2. 组合选择器
- 后代选择器
 - 儿子选择器
 - 毗邻选择器
 - 弟弟选择器
3. 属性选择器
4. 不常用选择器
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS
</title>
-
<!--不常用选择器-->
-
<style>
-
/*选择所有带有type属性且其值以cir开头的元素*/
-
[type^="cir"] {
-
color: red;
-
}
-
/*选择所有带有type属性且其值以are结尾的元素*/
-
[type$="are"] {
-
color: blue;
-
}
-
/*选择所有带有type属性且其值包含(字符串包含)is的元素*/
-
[type*="is"] {
-
color: green;
-
}
-
/*选择所有带有class属性且其值包含(多个值中包含)tag1的元素*/
-
[class~="tag1"] {
-
color: orchid;
-
}
-
</style>
-
</head>
-
<body>
-
<ul type="circle disc">
<li>我是带有type属性且其值以cir开头的元素
</li>
</ul>
-
<ul type="square">
<li>我是带有type属性且其值以are结尾的元素
</li>
</ul>
-
<ul type="disc">
<li>我是带有type属性且其值包含(字符串包含)is的元素
</li>
</ul>
-
<div class="tag1 tag2">
<p>我是带有class属性且其值包含(多个值中包含)tag1的元素
</p>
</div>
-
</body>
-
</html>
5. 分组和嵌套
- 分组
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS
</title>
-
<!--分组选择器-->
-
<style>
-
/*（将div标签和span标签统一设置字体为红色）*/
-
div,
-
span {
-
color: red;
-
}
-
</style>
-
</head>
-
<body>
-
<div>我是div标签
</div>
-
<span>我是span标签
</span>
-
</div>
-
</body>
-
</html>
- 嵌套
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS
</title>
-
<!--嵌套选择器-->
-
<style>
-
/*（将类为tag的内部的所有p标签设置字体为蓝色）*/
-
.tag
p {
-
color: blue;
-
}
-
/*（将id为tag的内部的所有span标签设置字体为绿色）*/
-
#tag
span {
-
color: green;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="tag" id="tag">
-
<p>我是p标签
</p>
-
<span>我是span标签
</span>
-
</div>
-
</body>
-
</html>
6. 伪类选择器
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<title>CSS
</title>
-
<!--伪类选择器-->
-
<style>
-
/*未访问的链接颜色*/
-
a
:link {
-
color:
#F00;
-
}
-
/*已访问的链接颜色*/
-
a
:visited {
-
color:
#0F0;
-
}
-
/*鼠标移动到链接上时的颜色*/
-
a
:hover {
-
color:
#F0F;
-
}
-
/*鼠标点击链接时的颜色*/
-
a
:active {
-
color:
#00F;
-
}
-
/*input输入框获取焦点时的样式*/
-
input
:focus {
-
outline: none;
-
background-color:
#EEE;
-
color:
#00F;
-
}
-
/*（伪类选择器还可应用于更多标签，如select标签）*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN
</a>
-
<a href="http://css.doyoe.com" target="_blank">CSS参考手册
</a>
-
</div>
-
<div>
-
<label>
<input type="text" placeholder="我是input输入框">
</label>
-
</div>
-
</body>
-
</html>
7. 伪元素选择器
- first-letter
 - before
 - after
before与after多用于清除浮动.
8. 选择器优先级
#. CSS继承：
- 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的.
- 继承是一种机制，它允许的样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
（例如一个body标签定义的字体颜色值也会应用到body标签内的所有标签） - CSS继承性的权重是非常低的，其优先级为0，比普通元素的优先级还要低.
（也就是说：只要给后代设置样式，就可覆盖掉祖先定义的样式） - 继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但是CSS继承也是有限制的.
（比如border, margin, padding, bacckground等就不能被继承）
#. 选择器的优先级：
上面说明了很多种的选择器，也就是说在一个HTML页面中可以通过很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
此外，还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。
除非万不得已，否则不要使用：
"