1、CSS介绍
CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不只能够静态地修饰网页，还能够配合各类脚本语言动态地对网页各元素进行格式化。css
CSS 可以对网页中元素位置的排版进行像素级精确控制，支持几乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力。python
2、CSS语法
2.1CSS实例
每一个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每一个声明以后用分号结束。浏览器
2.2注释
/*注释*/
3、CSS的几种引入方式
3.1行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。字体
<p style="color: red">Hello world.</p>
3.2内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式以下：spa
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.3外部样式
外部样式就是将css写在一个单独的文件中，而后在页面进行引入便可。推荐使用此方式。code
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4、CSS选择器
4.1基本选择器
4.1.1 标签选择器
标签名{
color: "red";
}
4.1.2 ID选择器
#ID名 {
color: "red";
}
4.1.3 类选择器
.类名{
color: "red";
}
标签 .类名{
color: "red";
}
注意：样式类名不要用数字开头(有的浏览器不支持)。标签中的class属性若是有多个，要用空客分隔。对象
4.1.4通用选择器
* {
color: "red";
}
4.2组合选择器
4.2.1 后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
4.2.2 儿子选择器
/*选择全部父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
4.2.3 毗邻选择器
/*选择全部紧接着<div>元素以后的<p>元素*/
div+p {
margin: 5px;
}
4.2.4 兄弟选择器
/*给同级标签，全部相同类名的标签*/
标签名~ .类名{
color: red;
}
4.3 属性选择器
/*用于选取带有指定属性的元素。*/
p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到全部title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到全部title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到全部title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
不怎么经常使用的属性选择器
4.4分组和嵌套
4.4.1分组
当多个元素的样式相同的时候，咱们没有必要重复的为每个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。blog
div, p {
color: red;
}
4.4.2嵌套
多种选择器能够混合起来使用，好比：.c1类内部全部p标签设置字体颜色为红色。继承
.c1 p {
color: red;
}
4.5 伪类选择器
/* 未访问的连接 */
a:link {
color: #FF0000
}
/* 鼠标移动到连接上 */
a:hover {
color: #FF00FF
}
/* 选定的连接 */
a:active {
color: #0000FF
}
/* 已访问的连接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
4.6 伪元素选择器
4.6.1 first-letter
经常使用的给首字母设置特殊样式：字符串
p:first-letter {
font-size: 48px; color: red;
}
4.6.2 before
在每一个<p>元素以前插入内容
p:before { content:"*"; color:red; }
4.6.3 after
在每一个<p>元素以后插入内容
p:after { content:"[?]"; color:blue; }
before和after多用于清除浮动。
4.7 选择器的优先级
4.7.1CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它容许样式不只能够应用于某个特定的元素，还能够应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上全部标签都会继承body的字体颜色。然而CSS继承性的权重是很是低的，是比普通元素的权重还要低的0。
咱们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p { color: green; }
此外，继承是CSS重要的一部分，咱们甚至不用去考虑它为何可以这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
4.7.2选择器的优先级
咱们上面学了不少的选择器，也就是说在一个HTML页面中有不少种方式找到一个元素而且为其设置样式，那浏览器根据什么来决定应该应用哪一个样式呢？
实际上是按照不一样选择器的权重来决定的，具体的选择器权重计算方式以下图：
除此以外还能够经过添加 !important方式来强制让样式生效，但并不推荐使用。由于若是过多的使用!important会使样式文件混乱不易维护。
万不得已能够使用!important