CSS基础知识（暂时完结）
前言：从本篇开始记录css的一些基础知识，但不会涉及css3，以后会单独学习记录。
1 .CSS简介
html只关注了内容的语义，但并没有注意具体布局的美化以及样式，如果用html去设置的话，就会显得十分臃
肿，这时候就需要css来进行设置了。
CSS是层叠样式表的简称，有时候我们也会称之为css样式表或者级联样式表
css和html即超文本标记语言相同，也是一种标记语言。
css主要用来设置html页面中文字内容，图片外形，以及版面的布局，外观设置。
故css可以使我们的页面更简单
1.1css语法规范
css由选择器以及一条或者多条声明组成
选择器是用于选定具体的样式改变对象
利用一条或者多条声明对选定的对象进行更改
使用方式： 选择器 {样式}
见下列代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
color: aquamarine;
font-size: 12px;
}
/*用color更改颜色
font-size为字体大小，px为像素，既把文字修改为十二像素
*/
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
其中<style>标签中的p为选择器中的标签选择器，后面花括号中的内容为样式
其中color和font-size为属性，后面的是属性值，所以属性和属性值以键值对的形式出现
1.2选择器分类
选择器分为: 基础选择器 、符合选择器。两大类
其中基础选择器又分为：标签选择器、类选择器、id选择器、速配符选择器。
1.2.1 标签选择器
定义：以html的标签名作为选择器
故可以选择一种标签，改变该标签的所有元素的样式，具体的应用见上文的代码。
1.2.2 类选择器
作用：不同于标签选择器一次性修改所有该标签的元素，如果我们只想对特定的一个或几个元素进行修改，可以
使用类选择器
使用：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
.tes {
color: aquamarine;
font-size: 12px;
}
/*用color更改颜色
font-size为字体大小，px为像素，既把文字修改为十二像素
*/
</style>
</head>
<body>
<p class="tes">这是一个段落</p>
</body>
</html>
给与标签<p>一个类名 tes
然后在<style>中使用class选择器，在类名前加 . 便可更改该类下元素的样式
在本例子中就为 .tes
利用类选择器可以一次性更改拥有该类名的所有元素，故不同的元素可以拥有相同的类名。
开发最长用的也就是类选择器
注意：
不能使用标签名作为类名
长类名可以用短横线分割
不要使用纯数字或者中文等命名。
要遵守web的开发命名规范
1.2.2 类选择器-多类名
定义：我们可以给一个标签指定多个类名。从而达到更多的选择目的。这些类名都可以选出这个标签
使用：
<div class ="a b">
</div>
此时的这个元素就有了两个类名，a和b
但需要注意。多个类名中间必须用空格分开
1.2.3 id 选择器
作用：id选择器类似于类选择器，通过给标签元素一个唯一的id实现调用
实现：
定义过程:
<div id="tes">
一个div
</div>
调用过程：
<style>
#tes {
/*在此处对样式进行修改*/
}
</style
注意：
一个元素只能有一个唯一的id
不同元素的id不能相同
1.2.4 通配符选择器
定义：在css中，通配符选择器使用* 来定义，它表示选取页面中所有的元素
实现：
<style>
* { //这是一个通配置符选择器，可以对所有元素进行更改
}
</style>
需要注意的是，利用通配符选择器进行全局更改时，会跳过存在被其他选择器更改过的元素，也就是说对于一个元
素，如果先前已经使用其他选择器对一定的属性进行修改，那么通配符选择器中更改相同的属性将无效将对改元素
无效，既通配符选择器的优先级较低。
1.3 css字体属性
1.3.1 字体类型
css使用 font-family属性定义文本的字体类型
例如
p {
font-family= "宋体"; //把页面中所有的<p>标签的内容字体改成宋体
}
对于字体格式的要求，见：此文档
我们可以给文档设置多个字体，例如：
font-family : "宋体","微软雅黑"
不同字体间要用逗号隔开，在实际应用过程中，会首先使用放在最前面的字体，当最前面的字体库不存在时，会向
后检测，使用第二个字体，依次类推，当所有你选定的字体库都不存在时，则会按照浏览器默认的字体去显示。
1.3.2 字体大小
css使用 font-size属性定义字体大小 ,属性值是像素值。
P{
font-size = 30px;
}
在实际更改中，往往使用标签选择器body对全局元素更改大小。
但是标题标签比较特殊，需要单独指定文字大小，整体的字体大小改变改动不了标题的文字大小。
当然使用通配符选择器可以更改。
注意: 谷歌浏览器默认的文字大小为16px。
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不去使用默认大小
可以用body指定整个页面文字的大小
1.3.3 字体粗细
css中使用font-weight属性设置文本字体的粗细
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100到900 | 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。不能小于100也不能大于900且必须是整数 |
| inherit | 规定应该从父元素继承字体的粗细。 |
p {
font-size =300;
}
1.3.4 文字样式
css使用font-style属性决定字体样式
属性值： normal 默认值，标准字体样式
italic 斜体，浏览器会显示斜体样式。
p{
font-style =italic;
}
在实际开发中很少使用斜体，往往是让斜体变为正常。
1.3.5 复合属性
可以把控制字体样式的属性综合来写，减少代码量。
但必须按照font-style font-weight font-size/line-height font-family的顺序给予属性值，不能更换顺序，并且各个
属性间使用空格隔开
不需要设置的属性可以省略（取默认值）但必须保留 font-size和font-family属性，否则font属性将不起作用。
body{
/*font:font-style font-weight font-size/line-height font-family;*/
font:italic 700 16px "Microsoft yahei";
}
1.4 文本属性
1.4.1 文本颜色
使用color来修改文本颜色
p {
color: pink;
}
属性值可以是预定义好的颜色值，也可以使用十六进制表示颜色
比如 red=#ff0000
也可以使用rgb的格式改变颜色
rgb(200,0,0)rgb是红绿蓝的缩写
在开发过程中使用最多的是16进制
1.4.2 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
属性值可以是：
left 左对齐（默认值）
right右对齐
center 居中对齐
p{
text-align : center;
}
1.4.3 装饰文本
text-decoration 属性规定添加到文本的修饰 可以给文本添加下划线 删除线 上划线等
属性值有:
none 默认 没有装饰线
underline 下划线 一般链接自带下划线
overline 上划线 不常用
line-through 删除线 不常用
p {
text-decoration: underline;
}
我们实际开发中最常用的便是下划线。
1.4.5 文本缩进
我们使用text-indent 属性来指定文本的第一行的缩进，（只会缩进首行）通常是将段落的首行进行缩进
该属性的属性值是缩进的像素数量,属性值可以取负的像素数，代表向左侧突出多少像素。
实现：
p {
text-indent: 20px;
}
也可以这样应用：
p{
text-indent: 2em;
}
em是当前文字的像素大小，2em就是缩进两个当前文字大小的距离。
1.4.6 行间距
定义line-height 属性用于设置行间的距离，可以控制文字行与行之间的距离
行间距分为上间距，文本高度，下间距。由于文本高度由行高控制，所以我们更改行间距本质上更改的只是
上间距和下间距。例如，当你设置行间距为50，若文本高度为16，则上间距和下间距的像素为(50-16)/2
p {
line-height :30px;
}
1.5 css的引入方式
按照css样式的位置或引入的方式不同，css可分为三大类
1 行内样式表(行内式)
2 内部样式表(嵌入式）
3 外部样式表(连接式)
1.5.1 内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的css代码抽取出来，单独放在一个<style>中
我们先前使用的都是内部样式表。
注意：
1 <style>标签理论上可以放在html中的任何地方，但我们习惯于放在
以该方式可以使得代码结构清晰，也最常用
1.5.2 行内样式表
将css代码化为标签内部的style属性值，适用于修改简单的样式
实现：
<div style= "color: red; font-size: 12px"></div>
当我们修改样式比较简单时，使用行内样式表来做
该样式只能控制当前的样式，并没有实现结构与样式相分离，所以使用较少。
1.5.3 外部样式表
实际开发都是使用外部样式表，用于处理样式较多的情况，实现html和Css分离。
具体操作为：
1 新建一个css文件，将样式写在这个css文件中.
2 然后在使用时通过<link>标签在html文件中引用这个Css文件即可
具体实现：
<link rel="stylesheet" href="文件路径">
将其写在head中
1.6 Emmet语法
作用： Emmet语法前身是Zen coding 它使用缩写来提高html/css的编写速度。
1.6.1 快速生成HTML结构语法
1 生成标签a成多个相同标签 加上就可以了，比如div3然后按tab就可以快速生成3个div标签
2 如果想要生成多个相同标签 加上*就可以了，比如div*3然后按tab就可以快速生成3个div标签
3 如果有嵌套关系可以用> 例如 div>a然后按tab就行
4 如果有并列同级关系的标签时，用+就可以了 例如 div+p.
5 如果生成带有类名或者id名的，直接写#或者.然后按table就可以 默认生成的是div,如果想要使用其他标签，前面加入约束即可，例如：p.id p#ab
6 如果想要一次性生成的多个标签类名有顺序，可以使用$ 例如： .demo$*5 $符号是自增符号，从1开始，每多生成一次加一
7 如果想要在快速生成标签时默认有内容，则需要吧内容放在{ }中即可，例如 div{这是一个div}然后按tab键即可
1.6.2 快速生成css语法
只需要打出首字母然后按tab键即可，例如，如果我想打text-anlig: center; 只需要打 tac然后按tab就可以
输入w100按table后变为 width：100px;
1.7 复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
复合选择器可以更准确，更高效的选择目标元素
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等。
1.7.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签卸载后
面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
实现：
ol li {
color： red;
}
该样式的意思便为将ol标签内部的li标签内容全部改成红色
即用法为： 外层元素 内层元素 {样式修改}
最终选择的是内层元素。
这个内层元素不一定在外层元素内的第一层，可以是嵌套了很多层的元素，只要存在嵌套，或者说是包含关系，都
可以控制。
如果想要更精细的控制，比如这种情况：
<div>
<ol>
<li>样式控制
<a></a>
</li>
<a></a>
</ol>
</div>
我们只想控制li 标签内嵌套的a标签，不想控制外部的那个a 标签
我们的选择器就要这样写：div ol li a { 样式内容}
如果我们直接写 div a {}
则会对div内部的所有 a标签进行修改。
一层一层的找下去，直到找到需要控制的a标签。
既可实现对其的精细控制
注意： 任意的标签选择器都可以这样用，不一定是标签选择器。
例如 可以这样写：
.id li {
样式控制内容
}
这是一个id选择器与标签选择器的组合。
关于该选择器元素的选择： 元素1 元素2 .......元素n 并没有什么要求，元素1也不一定要在最外层，只是把所有元
素1中的含有的所有元素2选中罢了 多次选择也一样，不一定要含有依次向下层级关系，只要复合嵌套关系即可。
1.7.2 子选择器
子元素选择器（子选择器）只能选择作为某元素最近一级的子元素，既选择亲儿子。
既只能选择直接嵌套在该标签内，没有重复嵌套的该元素。
具体的用法是 元素1 > 元素2 >元素n{ 样式控制}
相邻两个元素间必须为父子关系。
以上面的情况为例子
此时选择器若写 ol > a {样式控制}
则选中的则是直接包含在ol标签中，没有再次嵌套的那个a
同样，子选择器不一定只包含标签选择器，还可以使用类选择器和id选择器哦。
1.7.3 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
具体用法为， 元素1 ，元素2，元素3，......元素n {样式控制}
既一次性选择多个标签更改相同的样式
实现：
div ,
p {
样式控制
}
同样也可以由其它基础选择器构成并集选择器。
注意：约定的语法规范，并集选择器偏向于竖着写。
1.7.4 伪类选择器
伪类选择器用于添加特殊效果，比如给链接添加特殊效果，或者选择第一个，第n个元素，伪类选择器书写的最大
特点就是用冒号表示。
比较常见的伪类选择器有链接伪类，结构伪类，表单伪类等。
1.7.4.1 链接伪类
链接伪类有以下几种:
1 a:link 选择所有未被访问的链接
2 a:visited 选择所有已经被访问的链接
3 a:hover 选择鼠标指针位于其上的链接
4 a:active 选择活动链接（鼠标按下未弹起的链接）
具体应用：
a:link {
color: red;
}
该内容是把未曾访问的链接改为红色。
但这部分存在两个问题
第一个问题：由于浏览器缓存原因，你之前若是访问过该链接中的网站，则会判断你已经访问过，所以此时的
a:link因此无法控制该样式，需要清除浏览器缓存后才能正常。
第二个问题：由于a:visited伪类可能会暴露用户浏览信息记录，攻击者可能会据此判断用户曾经访问过的网站，造
成不必要的损失，因此浏览器决定限制a:visited的功能，所以我们无法使用下划线来判断某链接是否是被点击过
的，但可以用颜色去区分
具体部分见此博客
至于a:active 控制的是我们点击链接未松开，既链接处于活动状态时的样式
注意事项：
1 为了确保生效，请按照 link visited hover active 既LVHA的顺序来写链接伪类
因为a标签在浏览器中有默认样式，所以我们实际工作中都需要给链接单独指定样式。
直接使用body标签选择器是无法修改链接的
1.7.4.2 focus伪类选择器
focus伪类选择器用于选择获取焦点的表单元素。
既光标所在正在输入的<input>元素
具体使用如下：
input:focus{
样式控制，例如
background-color：yellow;
}
1.8 css的元素显示模式
1.8.1 什么是元素显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面
元素显示模式就是元素标签以什么方式进行显示
html分为块元素和行内元素两种，例如div标签属于块元素，span标签属于行内元素，所以div只能一个放一行，
span可以一行放很多个，故如果想要一行放很多个就用行内元素，想要一行放一个就用块元素。
1.8.2 块元素
常见的块元素有<h1>到<h6> <p> <div> <ul> <ol> <li>
块级元素的特点：
1 自己独占一行
2 高度，宽度，外边距以及内边距都可以自己控制
3 宽度默认是容器（父级宽度的百分之百 ，但高度不是，即会宽度会充满整个父级，如果父级是body标签则宽度
为从左到右的全部
4 块元素具有容器特点，里面可以放行内或块级元素。
注意：文字类的元素内不能嵌套块级元素，例如<p>标签内部不能继续嵌套<div> <p>等块级元素。
1.8.3 行内元素
行内元素有 <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>等，行内元素也可以被称作内联元
素。
行内元素的特点：
1 相邻行内元素在一行上，一行可以显示多个
2 高，宽直接设置是无效的，文本多大该元素就多大。
3 默认宽度是它本身内容的宽度
4 行内元素只能容纳文本或者其他行内元素。
注意：
链接里不能再放链接
特殊情况链接<a> 里面可以放块级元素，但是给<a>转换一下块级模式最安全。
1.8.4 行内块元素
再行内元素中有几个特殊的标签，例如<ing/> <ubput/> <td>,这些行内元素被称作行内块元素。
行内块元素的特点:
1 和相邻行内元素在一行上。但是他们存在空白间隙，一行可以显示多个。
2 默认宽度就是它本身内容的宽度（行内元素特点）
3 高度，行高，外边距都可以控制（块元素特点）
