zoukankan      html  css  js  c++  java
  • CSS选择器、层叠相关的基础知识

    CSS是Cascading Style Sheets的英文缩写,即层叠样式表。CSS2.1是W3C于2007年发布,现在推荐使用的。CSS3现在还处于开发中,有部分浏览器的新版本支持。

    1. CSS 概述

    1. 解决内容与表现分离的问题。
    2. 实现网页风格的统一,并且容易修改。
    3. 外部样式表可以极大提高工作效率。
    4. 使用CSS可以减少网页的代码量,因为它可以缓存到本地。
    5. CSS是大小写不敏感的,在CSS语法中推荐使用小写。
    6. 多个样式定义可层叠为一。

    2. 关于层叠

    一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权。

    1. 浏览器缺省设置
    2. 外部样式表
    3. 内部样式表(位于<head>标签内部)
    4. 内联样式(在HTML元素内部)

    关于外部样式表、内部样式表、内联样式的差别,请参考:CSS的引用方式(引用外部样式表、内部样式表、内联样式表)

    3. 关于选择器

    3.1 标签选择器

    比如p标签选择器(代表所有的段落都使用这个CSS样式):

    td {
        font-size:14px;
        width:120px;
    }

    3.2 id选择器

    id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。id属性只能在每个 HTML 文档中出现一次。

    #note {
        font-size:14px;
        width:120px;
    }

    3.3 类选择器

    就是在名字前增加了一个“.”,class选择符在一个页面中可以出现多次。

    div.note {
        font-size:14px;
    }
    .dream {
        font-size:14px;
    }

    3.4 群组选择器

    你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。

    h1,h2,h3,h4,h5,h6 {
        color: green;
    }

    3.5 后代选择器

    通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

    strong {
        color: red;
    }
    h2 {
        color: red;
    }
    h2 strong {
        color: blue;
    }

    下面是它施加影响的HTML:

    <p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
    <h2>This subhead is also red.</h2>
    <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

    3.6 属性选择器

    下面的例子为带有 title 属性的所有元素设置样式:

    [title] { color:red; } 

    3.7 属性和值选择器

    下面的例子为 title="HelloWorld" 的所有元素设置样式:

    [title=HelloWorld] { border:5px solid blue; }

    4. 示范

    <p>CSS基本知识之标签选择器</p>
    <p id="sampleid">CSS基本知识之id选择器</p>
    <p class="sampleclass">CSS基本知识之类选择器</p>
    <p class="sampleclass sampleclass2">CSS基本知识之类选择符,出现两个类选择器。它们的效果是重叠的。</p>

  • 相关阅读:
    2006: [NOI2010]超级钢琴
    3640: JC的小苹果
    2005: [Noi2010]能量采集
    金蝶云星空修改密码策略的SQL脚本
    关于 springboot 过滤器中使用@Autowired 为空 以及 使用 @Value 无法读取yml配置的问题解决
    CAS .NET Client 循环重定向的解决办法
    K/3 Cloud SSO配置
    K/3 Cloud SSO配置答疑
    K/3 Cloud 元数据表
    AngularJS select中ngOptions用法详解【转】
  • 原文地址:https://www.cnblogs.com/nayitian/p/3284618.html
Copyright © 2011-2022 走看看