CSS语法格式
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面示意图展示CSS代码结构：
CSS的书写样式
- 行内样式
<div class="top-content" style="background-color: rebeccapurple">
- 页内样式
<head>
<meta charset="UTF-8">
<title>PL百度</title>
<link href="imgs/css/index.css" rel="stylesheet">
//此处页内样式
<style>
div {
text-align: center;
}
</style>
</head>
- 外部样式
首先html中引用
<link href="imgs/css/index.css" rel="stylesheet">
然后单独写一个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 对应一个标签元素。
<div id="content"> </div>
//在 CSS 中id选择器以一个"#"号显示：
#content{
text-align: center;
/*background-color: aqua;*/
}
解释：为id为content的元素设置水平对齐样式
- 类选择器：找到指定标记为 class 的元素
<h1 class="center">
This heading will be center-aligned
</h1>
//在 CSS 中，类选择器以一个"."号显示：
.center {text-align: center}
//为类名为center的元素设置水平对齐样式
- 并列选择器：类似与逻辑计算符号并 “||”，并列条件满足其中一项即可
//选择器之间以“,”隔开
div, .high { color: red;}
//设置所有的div标签和.high(类为high)标签为红色
- 复合选择器：类似于逻辑计算符与 “&&”，同时满足复合条件
//相较于并列选择器，选择器之间没有用“，”隔开
div.high {color: red;}
//同时满足div和类名为high的标签设置为红色
- 属性选择器：找到对应属性的元素
<h2 title="Hello world">Hello world</h2>
//在CSS中，属性选择器以"[属性名]"显示
[title]
{
color:red;
}
//带有 title 属性的所有元素设置样式：
- 通配符选择器
* {color:red;}
//该选择器可以与任何元素匹配，为任何元素设置颜色为红色
- 后代选择器：又称为包含选择器，后代选择器可以选择作为某元素后代的元素，包括子元素，子孙元素等。
//父元素和子元素之间以空格“ ” 隔开
h1 em {color:red;}
// h1 元素后代的 em 元素的文本变为 红色
- 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
//h1元素后代的一级后代 strong 元素文本变为红色
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
//这个规则会把第一个 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中的标签元素大体被分为三种不同的类型：块级标签、内联标签（行内标签）和内联块级标签。
常用的块级标签有（独占一行，弄够随时设置宽度和高度）：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联标签有（多个行内标签同时显示在一行，宽高取决于内容）：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块级标签有（可同时显示在一行，能随时设置宽度和高度）：
<img>、<input>
修改标签的显示类型
display属性能够修改标签的显示类型，display有以下几个取值
-
none: 影藏标签 -
block: 让标签变为快级标签 -
inline: 让标签变为行内标签 -
inline-block: 让标签变为行内-块级标签
设置display属性可以主动改变标签元素的块级类型
a{display:block;}
CSS属性
从继承性可以分为可继承属性和不可继承属性
- 可继承属性：父标签的属性值会传递给子标签，一般是文字控制属性。
- 不可继承属性：父标签的属性值会传递给子标签，一般是区块控制属性。
熟悉CSS常见属性：传送门
字体属性: 字体属性的功能是设置页面字体的显示样式
font-family 设置使用的字体
font-style 设置字体的样式，是否斜体
font-variant 设置字体的大小写
font-weight 设置字体的粗细
font-size 设置字体的大小
颜色和背景属性:颜色和背景属性的功能是设置页面元素的颜色和背景颜色
color 设置元素前景色
background-color 设置元素背景色
background-imge 设置元素背景图案
background-repeat 设置背景图案的重复方式
background-attachmen 设置背景图案的滚动方式
background-position 设置背景图案的初始位置
文本属性:文本属性的功能是设置页面的显示效果
text-align 设置文本的对齐方式
text-indent 设置文本的首航缩进
line-height 设置文本的行高
a:link 设置链接未访问的状态
a:visited 设置链接访问过的的状态
a:hover 设置链接的鼠标激活状态
块属性:块属性是设置页面内快元素的显示效果
margin-top 设置顶边距
margin-right 设置右边距
padding-top 设置顶端填充距
padding-right 设置右侧填充距
边框属性:边框属性是设置页面内边框元素的显示效果
border-top-width 设置顶端边框宽度
border-right-width 设置右端边宽宽度
width 设置图文混排的宽度属性
height 设置图文混排的高度属性
项目符号和编号属性:设置页面内项目符号和编号元素的显示效果
display 设置是否现实符号
white-space 设置空白部分的处理方式
层属性: 设置页面内元素的定位方式
absolute 设置绝对定位
relative 设置相当定位
static 设置无特殊定位
盒子模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
CSS文件开头经常为了适配各个浏览器
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
box-sizing
以特定的方式定义匹配某个区域的特定元素，默认值为content-box
将 box-sizing 设置为"border-box"，可以把边框和内边距放入框中。
CSS布局
默认情况下，所有流都在标准流布局中，从上到下，从左边往右。
脱离标准流的方法有
-
float属性 -
position属性和left、right、top、bottom属性
任何一种类型的标签一旦脱离标准流，就会被强制转为行内-块级标签
float(浮动)
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
用float 属性控制
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
position
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
CSS position 属性
static:正常生成，从左往右，从上往下，默认。
relative:相对父元素和盒子模型定位，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute:元素框从文档流完全删除，并相对于其包含块定位。
fixed:相对于浏览器窗口进行定位。
一打理解position的例子
#tabbar-header{
width: 500px;
height: 30px;
background-color: #f7f7f7;
position: relative;
}
#tabbar-header ul{
width: 502px;
/*display: inline-block;*/
text-align: center;
line-height: 30px;
/*overflow: hidden;*/
position: absolute;
left: -1px;
right: 1px;
}
//tabbar-header为父元素设置相对定位 ， ul相对父元素进行绝对定位（设置左右固定值），子绝父相。
居中
水平居中
行内标签和行内-块级标签: 父元素中设置text-align：center;
块级标签居中方法： 在自身设置margin:0 auto;垂直居中
行内标签和行内-块级标签： 在父标签中设置line-height
块级标签：
position: absolute;
left:50%;
right:50%;
transform: translate(-50%, -50%);
