Css基础

CSS介绍

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

CSS基础语法

css语法说明

每个CSS样式由两部分组成，即选择符和声明，而声名又分为属性和属性值两部分；
属性需放在花括号中，属性与属性值用冒号隔开，每条声明用分号结束；
当一个声名中有多个属性和属性值时，属性和属性不分先后顺序；
在书写样式的过程中，空格、换行等操作不影响显示；
例如：idv{200px; height:200px; background:red;}

样式的建立和使用方法

内部样式表、外部样式表和内联样式表

内部样式表(嵌套到页面中)
语法：

<style type="text/css">
    css语句
</style>

注：使用style标记创建样式时，最好将该标记写在内；

外部样式表
外部样式表的两种方式
a.外部样式表的创建
b.外部样式表的导入

方法一:
语法:
说明：使用link元素导入外部样式表时，需要将该元素写在文档头部，即内；
rel：用于定义文档关联，表示关联样式表； type：定义文档类型；

方法二：
语法：

说明：@和import之间没有空格，url和小括号之间也没有空格；括号内加双引号，结尾必须以分号结束；

link和import的区别
(1)来源不同：link属于html标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性，@import只能加载CSS；
(2)加载顺序：当一个网页在加载时(就是被浏览者浏览的时候)，link引入的CSS会与html内容同时被加载，而@import引用的CSS会等到html内容全部加载完成再加载；这就导致页面在一开始加载时丢失样式，内容混乱；
(3)兼容性：@import时CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上版本的浏览器才能识别，而link标签没有这个问题；
(4)dom控制样式：当使用JavaScript控制dom去改变样式时，只能使用link标签来引用CSS，因为@import不支持dom的样式控制方法；

内联样式表(表行间样式，内行样式，嵌入式样式)
语法：<标签 style="属性:属性值;属性:属性值;"></标签>
例如：

样式表的优先级
内联样式表在页面中优先级高于内部样式表和外部样式表;外部样式表和内部样式表的优先级取决于两者在页面中书写的先后顺序；

CSS选择器(选择符)

选择符的定义：
选择符表示要定义的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
常用的选择符有十多种类型，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。

元素选择符/类型选择符/标签选择符(element选择器)

语法：元素名称{属性:属性值;}
类型选择符是根据html语言中的标记来直接定义

说明：
a.元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符；例如body、div、p、img、strong、span等。
b.所有的页面元素都可以作为选择符；
用法：
(1)如果想改变某个元素的默认样式时，可以使用类型选择符；(如：改变一个p段落样式)
(2)当想要统一文档某个元素的显示效果时，可以使用类型选择符；(改变文档所有p段落样式)

id选择器

语法：#id名{属性:属性值;}
说明：
(1)当我们使用id选择符时，应该为每个元素定义一个id属性；如：

(2)id选择器的语法格式是"#"加上自定义的id名；如：#box{300px;height:500px;}
(3)取名时要取英文名，不能取关键字：(所有的标记和属性都是关键字)
(4)一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
(5)最大的用处：创建网页的外部结构

class选择器

语法：.class名{属性:属性值;}
说明：
当我们使用类型选择符时，应该先为每一个元素定义一个类名称，类选择符的语法格式如：

用法：
class选择符更适合定义一种类型样式；

群组选择器

语法：选择符1,选择符2,选择符3....{属性:属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用","分隔的方式，合并为一组
实例：.top,#nav,p{100px;}

包含选择器

语法：选择符1(父) 选择符2(子){属性:属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1包含所有选择符2；
实例：div ul li{height:25px;}

通配符

语法：{属性:属性值;}
说明：通配选择符的写法是"",其含义是所有元素
用法：常用来重置样式

伪类选择器

a:link{color:red;} 未访问的连接状态
a:visited{color:green;} 已访问的连接状态
a:hover{color:blue;} 鼠标滑过时的连接状态
a:avtive{color:yellow;} 鼠标点击时的连接状态
说明：
(1)当这四类超链接伪类选择符联合使用时，应注意他们的顺序，正常的顺序为：a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
(2)为了简化代码，可以把伪类选择符中相同的声名提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标划过变化颜色。

常用于超链接

转载符的权重

css中用四位数表示权重，权重的表达法方式如：0,0,0,0
类型选择符的权重为0001 a p div span form ... 1
class选择符的权重为0010 .class 10
id选择符的权重为0100 # 100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为1000
注：如果权重相同时，则执行后写的样式；

html与css的注释

html的注释
css的注释/--注释的内容--/