首页 > 代码库 > 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基础(二)