CSS笔记

作者: ImClive | 来源:发表于2019-08-27 17:54 被阅读0次

    派生选择器

    通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
    li strong {
    font-style: italic;
    font-weight: normal;
    }
    li下面的strong会有后面的属性

    id选择器

    id 选择器以 "#" 来定义。
    下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

    red {color:red;}

    green {color:green;}

    在现代布局中,id 选择器常常用于建立派生选择器。

    sidebar p {

    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
    

    即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

    sidebar p {

    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
    

    sidebar h2 {

    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }
    

    类选择器

    类选择器以一个点号显示:
    .center {text-align: center}

    和 id 一样,class 也可被用作派生选择器:

    .fancy td {
    color: #f60;
    background: #666;
    }

    元素也可以基于它们的类而被选择:

    td.fancy {
    color: #f60;
    background: #666;
    }
    class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)

    下面的例子为带有 title 属性的所有元素设置样式:
    [title]
    {
    color:red;
    }

    为 title="W3School" 的所有元素设置样式:
    [title=W3School]
    {
    border:5px solid blue;
    }

    为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
    [title~=hello] { color:red; }

    属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:
    input[type="text"]
    {
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
    font-family: Verdana, Arial;
    }

    input[type="button"]
    {
    width:120px;
    margin-left:35px;
    display:block;
    font-family: Verdana, Arial;
    }

    链接的四种状态:

    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻
    实例
    a:link {color:#FF0000;} /* 未被访问的链接 /
    a:visited {color:#00FF00;} /
    已被访问的链接 /
    a:hover {color:#FF00FF;} /
    鼠标指针移动到链接上 /
    a:active {color:#0000FF;} /
    正在被点击的链接 */

    当为链接的不同状态设置样式时,请按照以下次序规则:

    a:hover 必须位于 a:link 和 a:visited 之后
    a:active 必须位于 a:hover 之后

    CSS 定位机制

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

    z-index结合定位,将元素放置在另一元素之前或之后
    <html>
    <head>
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:1
    }
    </style>
    </head>
    <body>
    <h1>这是一个标题</h1>
    <img class="x" src="/i/eg_mouse.jpg" />
    <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
    </body>
    </html>

    相对定位

    在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

    box_relative {

    position: relative;
    left: 30px;
    top: 20px;
    }

    绝对定位

    绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

    box_relative {

    position: absolute;
    left: 30px;
    top: 20px;
    }

    相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
    因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    CSS 元素选择器

    最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
    如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

    在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
    “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

    选择器分组

    假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
    h2, p {color:gray;}

    通配符选择器

    CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
    例如,下面的规则可以使文档中的每个元素都为红色:

    • {color:red;}

    声明分组

    我们既可以对选择器进行分组,也可以对声明分组。
    h1 {font: 28px Verdana; color: white; background: black;}

    类选择器

    .important {color:red;}
    结合元素
    p.important {color:red;}

    CSS 多类选择器
    <p class="important warning">
    This paragraph is a very important warning.
    </p>
    .important {font-weight:bold;}
    .warning {font-style:italic;}
    .important.warning {background:silver;}

    CSS ID 选择器

    intro {font-weight:bold;}

    类选择器还是 ID 选择器?

    在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

    区别 1:只能在文档中使用一次
    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

    区别 2:不能使用 ID 词列表
    不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

    区别 3:ID 能包含更多含义
    类似于类,可以独立于元素来选择 ID。

    CSS 2 引入了属性选择器。

    属性选择器可以根据元素的属性及属性值来选择元素。

    把包含标题(title)的所有元素变为红色,可以写作:
    *[title] {color:red;}

    只对有 href 属性的锚(a 元素)应用样式:
    a[href] {color:red;}

    可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
    例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:
    a[href][title] {color:red;}

    子串匹配属性选择器

    类型 描述
    [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
    [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
    [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

    如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:
    a[href*="w3school.com.cn"] {color: red;}

    特定属性选择器

    *[lang|="en"] {color: red;}
    上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
    <p lang="en">Hello!</p>
    <p lang="en-us">Greetings!</p>
    <p lang="en-au">G'day!</p>
    <p lang="fr">Bonjour!</p>
    <p lang="cy-en">Jrooana!</p>

    CSS 选择器参考手册

    选择器 描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

    后代选择器(descendant selector)又称为包含选择器。

    后代选择器可以选择作为某元素后代的元素。

    根据上下文选择元素

    只对 h1 元素中的 em 元素应用样式,可以这样写:
    h1 em {color:red;}
    有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。

    子元素选择器

    不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)
    选择只作为 h1 元素子元素的 strong 元素,可以这样写:
    h1 > strong {color:red;}

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

    h1 + p {margin-top:50px;}

    相邻兄弟结合符还可以结合其他结合符:
    html > body table + ul {margin-top:20px;}
    这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

    锚伪类

    在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

    a:link {color: #FF0000} /* 未访问的链接 /
    a:visited {color: #00FF00} /
    已访问的链接 /
    a:hover {color: #FF00FF} /
    鼠标移动到链接上 /
    a:active {color: #0000FF} /
    选定的链接 */

    相关文章

      网友评论

        本文标题:CSS笔记

        本文链接:https://www.haomeiwen.com/subject/ahcyectx.html