CSS语法格式
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面示意图展示CSS代码结构：
CSS的书写样式
- 行内样式
- 页内样式
PL百度
//此处页内样式
- 外部样式
首先html中引用
然后单独写一个CSS文件，类似这样
*{
padding:0;
margin:0;
}
a{
color: black;
}
body{
background: url("../psb (3)1.jpeg");
background-size: auto;
}
/*头部*/
#header{
/*右对齐*/
text-align: right;
/*margin: 15px 0;*/
height: 42px;
background-color: rgba(0,0,0,0.2);
line-height: 42px;
}
CSS选择器
选择器的作用：选择对应的标签，为之添加样式。
选择器分类
- 标签选择器 ：根据标签名（tag）找到标签
a {
color: black;
}
//解释：设置`a`标签颜色为黑色样式
- id选择器：找到指定标记为 id 的元素，一般一个 id 对应一个标签元素。
//在 CSS 中id选择器以一个"#"号显示：
#content{
text-align: center;
/*background-color: aqua;*/
}
解释：为id为content的元素设置水平对齐样式
- 类选择器：找到指定标记为 class 的元素
This heading will be center-aligned
//在 CSS 中，类选择器以一个"."号显示：
.center {text-align: center}
//为类名为center的元素设置水平对齐样式
- 并列选择器：类似与逻辑计算符号并 “||”，并列条件满足其中一项即可
//选择器之间以“,”隔开
div, .high { color: red;}
//设置所有的div标签和.high(类为high)标签为红色
- 复合选择器：类似于逻辑计算符与 “&&”，同时满足复合条件
//相较于并列选择器，选择器之间没有用“，”隔开
div.high {color: red;}
//同时满足div和类名为high的标签设置为红色
- 属性选择器：找到对应属性的元素
Hello world
//在CSS中，属性选择器以"[属性名]"显示
[title]
{
color:red;
}
//带有 title 属性的所有元素设置样式：
- 通配符选择器
* {color:red;}
//该选择器可以与任何元素匹配，为任何元素设置颜色为红色
- 后代选择器：又称为包含选择器，后代选择器可以选择作为某元素后代的元素，包括子元素，子孙元素等。
//父元素和子元素之间以空格“ ” 隔开
h1 em {color:red;}
// h1 元素后代的 em 元素的文本变为 红色
- 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
//h1元素后代的一级后代 strong 元素文本变为红色
This is very very important.
This is really very important.
//这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
- 相邻兄弟选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
//相邻兄弟元素间用“+”号连接
h1 + p {margin-top:50px;}
//选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”
- 伪类
常用的伪类有：:focus和:hover
:focus：向拥有键盘输入焦点的元素添加样式。
:hover：当鼠标悬浮在元素上方时，像元素添加样式。
input:focus{
/*去除外线条*/
outline：none;
}
//当输入框要输入时候（即键盘获得焦点时候），去除外线条
多种选择器组合使用，可以快速定位到HTML中我们需要的元素
html > body table + ul {margin-top:20px;}
//这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
#tabbar-header ul li.selected {
background-color: white;
border-bottom: 0;
/*左右线条*/
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
color: orange;
}
//这个解释为：id为tabbar-header元素中，后代为ul标签中选择后代li标签中类名为selected的所有元素。
CSS样式遵循的规律：
相同类型的选择器遵循:
就近原则;
叠加原则
不同类型的选择器遵循：
选择器的针对性越强，它的优先级就越高。
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
!important > 内联 > id > 类 > 标签|伪类|属性选择 > 伪元素 > 通配符> 继承
CSS中HTML标签类型
在CSS中，html中的标签元素大体被分为三种不同的类型：块级标签、内联标签（行内标签）和内联块级标签。
常用的块级标签有（独占一行，弄够随时设置宽度和高度）：
、、
...、、、、、、 、