首页 > 代码库 > HTML/CSS从零开始-CSS基础(二)
HTML/CSS从零开始-CSS基础(二)
一、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 rel="stylesheet" type="text/css" href="http://www.mamicode.com/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内联样式（直接嵌入标签）
<标签 style="属性1:属性值1；属性2:属性值2；" >
三、优先级
1、内联最高，内部、外部就近原则
四、选择符
4.1类选择符
a、改变某个元素默认的样式
b、统一一类元素样式
如：
div{属性;属性值；}
p{属性;属性值；}
4.2id选择符(命名唯一)
a、在html中定义<div id="div1"></div>
b、 在css中用#div1{}
说明：适用于创建外围结构样式
4.3class选择符
a、在html中定义<div class="div1"></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样式定义的先后顺序。
HTML/CSS从零开始-CSS基础(二)