HTML/CSS从零开始-CSS基础(二) - beata_yy_H5之家 - 中国HTML5教程资源分享第一站

一、css定义

(cascading style sheets) 层叠样式表

表现标准语言，对网页信息显示进行控制

二、css的建立 2.1内部建立

（建立在head里用标签<style>）语法：
      <head>
      <style type="text/css">
      div{widtn:300px;height:300px;border:1px solid red;}
      </style>
      说明：(1)div是选择符，{}是声明，width/height是属性,300px是属性值
            (2)border是属性，它有三个属性值，1px边框宽度，red边框颜色，
            solid实线(dotted 点状线/dashed 虚线/double 双线 )；

2.2外部建立（新建css文件）

     (1)新建css文件，然后在<head>写入<link type="text/css" href="css文件的路径"/>
     (2)新建css文件，在<head>里写入<style>@import url(css路径)</style>

说明：import与link区别?
a、本质区别
link属于html标签 import是css提供的方式
b、加载顺序
link 同步加载；import先加载结构，在加载样式
c、兼容差别
@import适用2.1;link无限制
d、使用doc(document object model) 文本对象模型
用JavaScript控制doc只用link
@import不是doc（document object model）控制

2.3内联样式（直接嵌入标签）

<标签 >

三、优先级

1、内联最高，内部、外部就近原则

四、选择符 4.1类选择符

a、改变某个元素默认的样式
b、统一一类元素样式
如：
div{属性;属性值；}
p{属性;属性值；}

4.2id选择符(命名唯一)

a、在html中定义<div></div>
b、在css中用#div1{}
说明：适用于创建外围结构样式

4.3class选择符

a、在html中定义<div></div>
b、在css中用.div1{}

4.4通配符

*{属性：属性值;}
*{margin:0;padding:0;} //重置样式

4.5群组选择符

语法：选择符1 选择符2{属性:属性值;} 选择符1/2使用统一样式

4.6包含选择符

选择符1 选择符2{属性：属性值;}
说明：选择符1（父级）在结构上包含选择符2（子级）；

4.7伪类选择器

（css已定义选择器，不能自定义选择器名）

语法：
     a:link{属性：属性值；}超链接的初始状态
     a:visited{属性：属性值；}超链接被访问的状态
     a:hover{属性：属性值；}鼠标悬停在超链接上的状态
     a:action{属性：属性值；}超链接的b被激活的状态，鼠标按下的状态

常用语法：a{color:blue;}
          a:hover{color:red;}

4.8伪对象（？？）

{margin-before:;}
{margin-before:;}
{font-weight:bold;}

五、权重

类型选择符 0001
class选择符0010
id选择符   0100
内联样式   1000
包含选择符所有选择符之后
伪类选择符 0010
伪元素选择符 0010
继承样式    0000 //ul{color:red;}=ul li{color:red;}
子选择符    0000
说明：相同权重选择符，样式遵循就近原则，哪个选择符最后定义就是用哪个样式，顺序是根据css样式定义的先后顺序。