css2样式表的使用

###css样式表--层叠样式表
1.内部样式表
      1)css语法
  选择器{
    属性1:属性值;
    属性2:属性值;
  }
    宽度width
    高度height
    背景颜色background-color
    字体颜色color
    #fff纯白,#000纯黑
  2)使用方法
    在head中引入style标签,在style标签内部书写css样式
2.外部样式表--结构与表现分离(开发用)
    1).在站点下的css文件夹中创建css文件
    2).创建关联--在head中引入link标签
    <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    rel="stylesheet"创建关联
3).css文件中最上方一段代码@charset "utf-8";(当存在编码格式乱码时,加一个)
    然后正常书写样式即可
3.内联样式--几乎不用
    ###样式表的优先级--就近原则
    内联样式>内部样式表和外部样式表
    A、内联样式表的优先级别最高
    B、内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。
    C、作用域:内联样式的作用域最小,只能应用于当前元素,其次是内部样式表,能应用于当前HTML文件,最后是外部样式表,能应用于所有链接的HTML文件。
###选择符(选择器)--选择页面中的元素
1.元素选择器(一般用于整体页面标签都要使用的情况下)
    div{}
2.id选择器
    <div id="id名"></div>
    id名有唯一性--身份证号
    命名规则:英文开头,可以带数字,_,-不允许用关键字
    用法:#id名{}
    最外层的大容器有一个id名
3.群组选择器
    ,隔开多个元素
    例如:#box,div,#content{}
4.类选择器--给元素起类名
    <div class="wrap"></div>
    命名规则:包含字母数字_-,字母开头,见名知意
    一个元素可以有多个类名,一个类名可以被多个元素使用
    用法:.wrap{}
    一个元素多个类名 中间用空格隔开
    <div class="类名1 类名2 类名3"></div>
5.子代选择器--IE6不识别
    >作为连接符,>前后一定是父子关系
    例如: .wrap>div
6.后代选择器
    空格作为连接符,前后是包含关系
7.通用选择器
    能匹配页面中所有的元素(一般每个网页都会清除内外边距)但是后来不会这么写,会具体到标签,后面再说
    *{
    margin:0;/*外边距*/
    padding:0;/*内边距*/
    }
8.伪类选择器
(方便记忆的顺序:love-hate )
 :link访问前的状态
:visited访问过后的状态
:hover鼠标移入状态*****重点
:active激活状态
###选择器权值
内联 1000
id选择器的权值是100
类选择器权值是10
元素选择器权值是1

猜你喜欢

转载自www.cnblogs.com/cxf1214/p/11273063.html
今日推荐