CSS基础，盒子模型，选择器

- 简单概述
 - 引入方式
 - 三大特性
 - 元素显示模式
 - CSS常用属性

一、CSS基础

1.简单概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.引入方式

1)行内样式表：
是在元素标签内部的style属性中设定CSS样式（适合修改简单样式）。
2)内部样式表：
是写在html页面内部，是将所有CSS代码抽取出来放在<style>标签里。
3)外部样式表：
适合样式比较多的情况，需要将样式单独写到CSS文件中之后在引入html文件中。

3.三大特性

1)层叠性：
相同选择器给设置相同的样式，此时一个样式就会被另一个样式覆盖。层叠性主要解决样式冲突。
原则：就近原则，哪个样式离结构近就执行哪个样式。
2)继承性：
子标签会继承父标签的某些样式（test-，font，line-，这些开头的可以继承，以及color属性）
3)优先级：
当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。

4.元素显示模式

1)定义：
网页标签以什么方式进行显示。
2)分类:
a. 块级元素：
常见有：<div>、<p>、<h>、<ul>、<ol>、<li>等。
特点：独占一行；
宽度，外边距，以及内边距都可以控制；
宽度默认是容器的100%；
是一个容器及盒子，里面可以放块级元素和行内元素。
注意：文字类的元素不能放块级元素。
eg: <p>标签里面不能放<div>元素。
b. 行内元素：
常见有：<span>、<a>、<b>、<em>、<strong>等。
特点：一行可以有多个；
高，宽直接设置无效；
默认宽度是他本身内容的宽度；
行内元素只能容纳文本或其他行内元素。
注意：链接里面不能再放链接；
<a>标签里面可以放块元素。
c. 行内块元素：
常见有：<img>、<import>、<td>。
特点：和相邻行内元素在同一行上，但有空白空隙，一行可以显示多个；
默认宽度是他本身内容的宽度；
高度，行高，边距都可以控制。
3)元素模式转换：
(1)转为块元素：display:block；
(2)转为行内元素：diaplay:lnline；
(3)转为行内块元素：display:inline-block；

5.CSS常用属性

1)文本属性：
a. <color>
属性值表示形式：预定义的颜色；
十六进制；
RGB代码。
b. <text-align>
属性值：center，left，right。
c. <text-indent>
单位：px/em(以当前字体大小为基本单位)
d. <text-decoration>
属性值：none，underline，overline，line-through。
e. <line-height>
单行文字垂直居中：height=line-height;
2)字体属性：
a. <font-family>
注意：字体之间用英文","隔开；
字体最好用英文；
一般情况下，如果有空格隔开的多个单词组成的字体加引号。
b. <font-size>
注意：标题标签比较特殊，需要单独指定大小。
c. <font-weight>
属性值：normal(number:400)，bold(number:700)，bolder，lighter，number。
d. <font-style>
属性值：normal，italic (倾斜)。
e. 字体复合属性:font:ont-style font-weight font-size/line-height font-family
(必须按顺序写，且font-size，font-family必须有)
3)背景属性：
a. <background-color>
默认值：transparent。
b. <backgroud-image>
语法：backgroud-image: none(默认)/url(地址的路径);
c. <background-repeat>
语法：background-repeat: repeat(默认)/no-repeat/repeat-x/epeat-y;
d. <background-position>
语法：background-position: x y;
三种情况：参数都为方位名词，两个前后顺序无关；
(如果有一个值省略，则第二个值默认居中对齐)
参数都是精确单位，顺序确定；
参数是混合单位，第一个值是x坐标，第二个值是y坐标。
e. <background-attachment>
属性值：sroll(滚动)，fixed。
f.背景色半透明：
语法：background: rgba( , , ,0~1)
g. 背景复合属性：background: color image repeat attachment position
(不强制)

二、盒子模型

1.盒子模型组成

1)内容：
2)边框(border)：
属性值：border-width，border-style(dashed,dotted,solid)，border-color，border-collapse。
3)内边距(padding)：
a. 属性值：padding-left，padding-right，padding-top，padding-bottom。
b. 语法：

padding值的个数	代表的意义
padding:x;	1个值,上下左右内边距都为:x
padding:x y;	2个值,上下为x,左右为y
padding:x y z;	3个值,上为x,左右为y,下为z
padding:x y z r;	4个值,上为x,右为y,下为z,左为r

4)外边距(margin)：

a. 属性值：margin-left，margin-right，margin-top，margin-bottom。
b. 语法：

jichu

margin值的个数	代表的意义
margin:x;	1个值,上下左右内边距都为:x
margin:x y;	2个值,上下为x,左右为y
margin:x y z;	3个值,上为x,左右为y,下为z
margin:x y z r;	4个值,上为x,右为y,下为z,左为r

c. 应用：块级盒子水平居中对齐。

三、选择器

1.基础选择器

1)通配符选择器
语法：* {
}
2)标签选择器
语法：标签 {
}
3)类选择器
语法：.类名 {
}
在对应的标签里使用class属性，class="类名“。
4)id选择器
语法：#名字 {
}
在对应的标签里使用id属性，id="名字“。
注意：类选择器可以被多次调用，而id选择器只能调用一次。

2.复合选择器

1)后代选择器
语法：元素1 元素2 … {
}
2)子代选择器
语法：元素1>元素2 {
}
3)并集选择器
语法：元素1，元素2，元素3，…元素n {
}
4)伪类选择器
a. 链接伪类选择器
属性值： a:link
a:visited
a:hover
a:active
b. :focus伪类选择器
主要针对表单元素
语法：input:focus {
}