• css选择器,样式表导入


    css笔记
    1.选择器(selecter)共9种
    a.类型选择器 p{},body{}
    b.后代选择器 p h1{}
    c.ID选择 #idname{}
    d.类选择 .classname{}
    e.通用选择 *{} 页面上所有元素应用样式,利用此可以删除每个元素上默认
    浏览器的填充和空白边。可以用来对特定元素的所有后代应用样式,或跳过一级后代
    f.伪类选择 a:link{}
    g.高级选择器 IE6及更低版本不支持,避免在对于站点功能重要的使用高级选择器。
    1.子选择器和相邻同胞选择器
    子选择器选择元素的直接后代 #nav>li{}
    相邻同胞选择器 h1+p{}
    2.属性选择器 elemnent[attribute]选择出具有attribute的elements元素
    example1:.intro{border-style:solid;}
    [class="intro"]{border-style:dotted;}
    example2:a[rel~="friend"]{}
    <a href="" rel="friend met colleague">john Hicks</a>
    h.层叠和特殊性
    (1)层叠给每个规则分配一个重要度(作者对重要,用户其次,浏览器或用户代理最后)
    通过!important提高重要度
    重要度次序:
    1标为!important 的用户样式
    2标为!important 的作者样式
    3作者样式
    4用户样式
    5浏览器/用户代理应用的样式
    再根据特殊性决定规则次序。
    (2)特殊性
    特殊性四个成分等级:a、b、c、d
    如果样式是行内样式a=1;
    b=ID选择器总数
    c=类、伪类和属性选择器数量;
    d=类型选择器和伪元素选择器的数量;
    如:#wrapper.datePosted{} 特殊性:0,1,1,0 以10为基数的值为1110
    应用:form{20em;} 一般样式
    form#search{10em;} 特殊样式覆盖

    i.继承
    子元素继承父元素样式
    2.对文档应用样式
    外部样式表附着到网页上有两种方法,
    a.链接(可链接基本样式表供所有浏览器使用)<link href="css/basic.css" rel="stylesheet" type="text/css">
    b.导入(老式浏览器不支持,导入高级复杂样式)<style type="text/css">
    <!--
    @important url("/css/basic.css");
    -->
    </style>
    3.在样式表中导入样式
    @important url(/css/layout.css);
    作用:降低(X)HTML文档的复杂性
    注意:避免两层以上的导入

    在程序媛的路上,越走越用劲儿:)
  • 相关阅读:
    10-3 集合之Set
    【Angular】排序
    【Mongous】
    【验证码】
    爬虫
    【DOM】
    年月日
    【Mocha】
    【Test】
    洛谷——P1823 音乐会的等待
  • 原文地址:https://www.cnblogs.com/AliceX-J/p/4574829.html
Copyright © 2020-2023  润新知