CSS（字体、背景）

1、CSS:层叠样式表，用来美化网页的。做到结构(HTML)和表现(CSS)分离

2、基本语法：由三部分组成：选择器、属性、属性值

选择器{
	属性：属性值;
	}

3、CSS的四种引用方式
(1)行间样式(嵌入式样式)：直接在标签上书写样式
(2)内部样式：在文件的内部书写样式
(3)外部样式：先创建一个css文件，再用link标签引入这个文件
(4)导入外部样式：先创建一个css文件，在style标签中用import导入这个样式文件。
区别：行间样式只能用于当前标签；内部样式只能用于当前文件；外部样式可以被多个HTML文件引用
在实际项目开发中，最好使用外部样式，外部样式分为link引入和import引入，这两种方式的区别：
（1）link是HTML标签，除了加载css外还可以定义rss等其他事务；@import属于css范畴，只能加载css
（2）link引用css时，在页面载入同时加载；@import需要页面完全载入以后加载
（3）link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本浏览器不支持。
（4）link支持使用JavaScript控制DOM去改变样式；而@import不支持。

4、css选择器
（1）* ：匹配html中所有元素(注：*的性能差，因为它要匹配所有元素，在开发时不建议使用)
（2）标签选择器：用来匹配对应标签
（3）类选择器：用来选择匹配class命名的标签
（4）ID选择器：用来选择用id命名的标签
（5）派出选择器：根据上下文来确定选择的标签
（6）伪类选择器

5、选择器分组
让多个选择器(元素)具有相同的样式，一般用于设置公共样式。使用逗号将需要分组的的选择器分开，被分组的选择器就可以分享相同的声明

h1,h2,h3{font-size:12px;}

6、选择器的继承
子元素可以继承父元素的样式，反之不可以

7、优先级
外部样式<内部样式<内联样式

8、样式权重
!important(10000)>内联样式(1000)>id选择器(100)>类、伪类选择器(10)>标签选择器(1)

9、css字体

font-size：字号
	px：固定值尺寸像素
	%：基于父对象字体百分比取值

font-family:字体
	微软雅黑
	宋体
	...
可以用逗号隔开多个字体，按优先顺序排列，如果字体包含空格，要用引号包裹
	
font-style：文字样式
	normal：默认值，正常字体
	italic：斜体
	oblique：没有斜体变量的字体，用此

font-weight：加粗
	normal：默认值，正常的字体
	bold：粗体
	bolder：比bold粗
	lighter：比normal细
	100-900：定义由粗到细的字符，400等同于normal

line-height：行高
	normal：默认值，默认行高
	px：指定行高为长度像素
	数字：指定行高为字体大小的倍数

color：颜色
	颜色的单词
	rgb()：三个值，为红绿蓝
	十六进制：#开头

text-decoration：文字修饰
	normal：正常字体
	underline：下划线
	overline：上划线
	line-through：贯穿线
	
text-align：文本对齐方式
	left：默认左对齐
	right：右对齐
	center：居中

text-transform：字母大小写
	capitalize：将每个单词首字母大写
	uppercase：全部大写
	lowercase：全部小写
	none：常规

text-indent：文本缩进
	px：缩进几个像素
	%：按百分比缩进
	em：缩进几个文字

Tip：
	font复合属性：
		font:font-stylr font-variant font-weight font-size/line-height font-family
	注意：
	1）属性值的位置顺序
	2）除了font-size和font-family之外，其他任何一个属性值都可以省略
	3）font-variant：noraml

10、css背景

background-color:背景色
	transparent：默认值，背景色透明
	color：指定颜色
	
background-image：背景图
	none：默认值，无背景图
	url：使用绝对或相对url地址指定背景图像

background-repeat：设置对象的背景图像铺排方式
	repeat：默认值，背景图像在纵向和横向平铺
	no-repeat：背景图像不平铺
	repeat-x：背景图像仅在横向平铺
	repeat-y：背景图像仅在纵向平铺

background-position：设置对象的背景图像位置
	{x-number|top|center|bottpom}{y-number|left|center|right}
	x轴、y轴。其铺排方式为no-repeat。
	如果只带一个参数，默认y轴为50%

background-attachment：设置对象的背景图像滚动位置
	scroll：默认值。背景图像会随着页面其余部分的滚动而移动
	fixed：当页面的其余部分滚动时，背景图像不会移动

background：设置背景图的复合写法
background:color image repeat attachment position

11、css伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用的伪类选择器：
（1）a标签的伪类：
：link未访问状态
：visited已被访问状态
：hover鼠标悬停状态
：active用户激活
（2）：focus表单获得焦点时触发样式
（3）：first-child / ：last-child / ：nth-child（number）

12、属性选择器
[属性名]：包含有指定属性名的元素（常用）
[属性名=值]：属性名的值为指定值的元素（常用）
[属性名~=值]：属性名的值包含指定的元素
[属性名^=值]：属性名的值以指定值开头的元素
[属性名$=值]：属性名的值以指定值的结尾的元素

    <style>
      div.content[title]{
        font-weight: bold;
      }
      input[name=user]{
        background-color: blue;
      }
      div[class~=box]{
          background-color: blue;
      }
    style>

13、关系选择器
（1）空格：后代选择器
（2）>：只选择儿子元素
（3）+：兄弟选择器

14、css伪元素
用于向某些选择器设置特殊效果
css伪类和伪元素的区别：
css引入伪类和为元素是为了格式化文档树以外的信息。也就是用来修饰不在文档树中的部分。
伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的。
它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式，比如，通过：before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

（1）:before/:after/:first-letter/:first-line :前面可以是1个冒号也可以是双冒号
::selection/::palceholder/::backdrop : 前面只能是双冒号