CSS权威指南学习记录(Cascading Style Sheet)

ToSchool
150 阅读14分钟

第一章

背景

早期的html标签都是有结构化和含义化的,能相对有含义的去描述文档中的各个部分.但是它们对于这些部分应该采用什么显示样式却不涉及.在之后的发展中,对于样式的需求开始越发提高,这就出现了一些容易设置样式但是缺少语义的标签(如:,).但是容易设置样式的标签用的多了,表示语义化的标签用得少了,使得文档的可用性降低.(以前的开发中,使用结构化的HTML标签意味着要放弃对于页面外观的很多控制.)

结构化和语义化标签的优势 (语义化:用正确的标签做正确的事情。)

  1. .搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO;
  2. 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
  3. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解;
  4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
  5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

CSS产生

为了让html更加专注于结构化和语义化,就将负责方式的那部分功能给单独提取出来了,这就产生了用于设置样式的CSS,但它的功能远远比在标签上设置样式强大.以前对于同类标签的相同样式是需要对每个标签都单独设置的,修改时也需要一项一项去找出来并修改.在使用了CSS之后可以将所有的样式代码集中放在一个位置,进行统一管理,更加方便修改.由于CSS的产生,以前主要用于设置页面样式而缺乏语义的标签也逐渐不再被使用,W3C已经逐渐废弃了这些标签.

简述块级元素和行内元素

  1. 块级元素独占一行
  2. 块级元素的默认宽度为auto,它等于父级元素的content部分的宽度
  3. 块级元素不能嵌套在行内元素中
  4. 行内元素一行可放置多个

link标签

作用:引入外部样式表

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

@import指令

作用:引入一个外部样式表

最常用的场景:在一个样式表中引入其他的样式表 (外部样式表不能包含任何html标签,所以不能使用标签)

 <style type="text/css">
        @import url("URL1");    //@import必须写在开头
        @import url("URL2");    //@import必须写在开头
 </style>

link 标签 与 @import指令的区别(面试)

1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解) link引入的样式权重大于@import引入的样式。

6.书写位置不同

css书写位置：

  • <标签名 style="css属性名:css属性值;css属性名:css属性值;"></标签名>

  • 内部样式表

  • 外部样式表

第二章

浏览器在读取选择器时,是从右往左的顺序.

CSS是由许多 规则 组成,每条规则又是由 选择器 与 声明块组成 ,声明块由一条或者多条声明 组成,声明 由CSS属性名 : CSS属性值 组成

类如: h1 {color : red ; background : pink}

选择器

  1. 元素选择器(标签选择器)

    元素选择器通常都是 HTML 元素

    html {
color: black;
}
h1 {
color: gray;
}

  2. 通配符选择器

    匹配所有元素

    * {
  color: red;
}

  3. 类选择器

  4. ID选择器

  5. 属性选择器

    选择具有某个特定属性的元素,而无论属性的值是什么.

    h1[class] {
color: silver;
}
a[href][title] {
font-weight: bold;
}

    选择那些某个属性为某个确定值的元素

    p[class="urgent warning"] {
font-weight: bold;
}

    基于属性值的一部分而不是整个值来选择元素

    类型描述
    [foo~="bar"]选择所有带有foo属性、且foo属性被空白分隔的单词列表中含有单词bar的元素。
    [foo*="bar"]选择所有带有foo属性、且foo属性值中含有子串bar的元素。
    [foo^="bar"]选择所有带有foo属性、且foo属性值以bar开头的元素。
    [foo$="bar"]选择所有带有foo属性、且foo属性值以bar结束的元素。
    `[foo="bar"]`选择所有带有foo属性、且foo属性值以bar开头后接一个短线（U+002D）或者属性值是bar的元素。

基础选择器的符合用法

  1. 后代选择器

  2. 子代选择器

  3. 并集选择器

    把相同的样式引用在多个元素上

    h2,
p {
color: gray;
}
h1,h2,h3,h4,h5,h6 {
color: gray;
background: white;
padding: 0.5em;
border: 1px solid black;
font-family: Charcoal, sans-serif;
}

  4. 兄弟选择器

    选择在同一个父级元素下紧跟着另一个元素的元素，组合器使用加号（+）

    h1 + p {
margin-top: 0;
}

    一般兄弟选择器:这个组合器允许选择同一个父元素下，跟随（不一定是紧跟随）在某个元素后面的所有元素，使用波浪线符号（~）。

伪类选择器(根据某种条件或者状态选中页面中的元素并应用响应样式)

  1. 链接伪类(只应用于链接)

    • a:link ：表示未访问过的链接
    • a:visited ：表示访问过的链接，只能设置颜色相关声明
    • :target (通过该选择器可以模拟CSS样式的选项卡 )

  2. 动态伪类(根据元素的所处的用户动作而应用)

    • :hover ：鼠标移入的
    • :active ：正在点击的
    • :focus(用于表单控件)

  3. 伪类选择器:root选择文档的根元素(在 HTML 文档中，可以直接选择html元素，不需要使用:root伪类。)

  4. 使用伪类:empty，可以选择任何没有子节点的元素——没有任何类型的子元素：包含文本节点，包括文字和空白。（注释既不会被当成内容，也不会被当成空白）

  5. CSS3 引入了否定伪类：not（）

    ：not（）的工作方式是将其附加到元素上，然后在括号中填充一个简单的选择器。

    这简单的选择器是：类型选择器，通用选择器，属性选择器，类选择器，ID 选择器或伪类。

  6. 伪元素选择器（伪元素将虚构元素插入文档中以实现某些效果）

    伪元素采用双冒号语法;

    伪元素必须放置在它们出现的选择器的最末端。

    ::first-letter 伪元素设置所有非内联元素（非行类元素）的第一个字母。

    ::first-line 可用于影响元素中文本的第一行。

    ::first-letter 和::first-line 伪元素当前只能应用于块显示元素（例如标题或段落），而不能应用于行内元素（例如超链接）

    :: before 和:: after 在元素内部的前面或者后面插入生成的内容并设置其样式。

  7. 唯一子元素 :only-child 选出那些元素中只有一个子元素的元素中的子元素

    选中所有由超链接元素包装的图像

    a[href] img:only-child {     // 与a[href]>img：onlychild不同
border: 2px solid black;
}

a[href] img：only-child 匹配所有符合条件的图像，该图像是唯一子元素，但不代表是祖先元素的子元素，可以是后代元素。想要被选中，该图像元素必须是其直接父级的唯一子元素，并且是链接的后代，但是该父级本身可以是该链接的后代。

    注意点：

    1. 唯一子元素伪类总是应用于子元素，而不应用于父元素；
    2. 在后代选择器中使用:only-child 时，不用严格列出元素之间的父子关系

  8. UI 状态伪类 (表单控件状态)

    类型描述
    :enabled指向那些允许输入的 UI 元素（例如表单中的 input）
    :disabled指向那些不允许输入的 UI 元素（例如表单中被禁止输入的 input）
    :checked指向已经被选中的单选或复选框，无论是文档自身选中的还是用户点击选中的
    :indeterminate指向没有被选中的单选或复选框，这个状态仅能通过 js 来设置，不用由用户来触发
    :default指向被默认选中的单选、复选框或下拉框
    :valid指向用户输入合法数据的元素
    :invalid指向用户输入不合法数据的元素
    :in-range指向用户输入的数据在指定大小范围内的元素
    :out-ofrange指向用户输入的数据不在指定大小范围内的元素
    :required指向要求用户必须输入数据的元素
    :optional指向不强制要求用户必须输入数据的元素
    :read-write指向可编辑元素
    :read-only指向只读元素

  9. 结构性伪类（在子元素找）

:nth-child(n)

:first-child 用于选择作为其他元素的第一个子元素的元素。

:last-child 用于选择作为其他元素的最后一个子元素的元素。

选择器名:nth-child(n)：该类型的选择器如果冒号的前面没有空格而是直接跟着选择器，那么等价于：先找出所有有子元素的父元素，然后在这些父元素的内部找出第 n 个子元素，再判断这个子元素是不是冒号前面指定的那类标签元素，不是就无法匹配到。是，就对选中的子元素使用对应css样式。

等价于：先找出第几个子元素，如果该子元素是冒号前面指定的那类元素，则应用css样式。

<ul>
    <p>asd</p>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

ul :first-child {
    background-color: #afc;
} //选中ul下面的第一个子元素，不论该子元素是什么标签

ul li:first-child {
    background-color: #afc;
}  //这种情况无法选中任何元素，因为ul的第一个子元素不是li，而是p

ul li:nth-child(1) {
    background-color: #afc;
}  //这种情况无法选中任何元素，因为ul的第一个子元素不是li，而是p

ul :nth-child(1) {
    background-color: #afc;
} //选中ul下面的第一个子元素，不论该子元素是什么标签

li:nth-child(1)  //选中所有元素的子元素中的第一个，且第一个必须是li标签才可以。而不管li标签是div或者ul等下面的子元素。

正方向范围

li:nth-child(n+6)

选中从第6个开始的子元素

负方向范围

:nth-child(-n+9)

选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素

前后限制范围

:nth-child(n+4):nth-child(-n+8)

选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素

奇数、偶数位

:nth-child(odd)

:nth-child(even)

隔选择子元素

:nth-child(3n+1),

选择1,4,7,10

:nth-of-type(n) ：先找出不同层级中的同类型的标签，然后在已经选出的这些标签中找第 n 个元素，对它应用样式。

:first-of-type 另一个元素中选择一个元素类型的第一个,这允许在给定元素内选择第一个表之类的操作，不管它前面的元素是什么。

:last-of-type ：在另一个元素中选择一个元素类型的最后一个。 这允许在给定元素内选择第一个表之类的操作，不管它前面的元素是什么。

<body>
  <div id="wrap">
    <p>one</p>
    <div>我是div</div>
    <p>two</p>
    <p>three</p>
    <p>four</p>
  </div>
  <p>qwe</p>
  <p>zxc</p>
  <p>tyu</p>
</body>


<style>
    p:nth-of-type(3) {
      background: red;    //选出了 three 和 tyu 所对应的p标签
    }

    #wrap p:nth-child(3) {
      background: yellow;  //选出了two所对应的p标签
    }
  </style>

结构伪类例子

<section>
	<p>一号</p>
	<div>二号</div>
	<div>三号</div>
</section>

section div:nth-child(1){声明块}：选不出任何元素
section div:nth-of-type(1){声明块}：选出二号元素

第三章

“继承”

继承是一种机制，通过这种机制，某些样式不仅应用于指定的元素，还应用于它的后代元素。

HTML 中的向上传播规则有一个例外:应用于“body”元素的背景样式可以传递给“HTML”元素，后者是文档的根元素，因此定义了它的画布。只有当“body”元素有一个定义好的背景，而 html 元素没有时，才会发生这种情况。

继承的声明完全谈不上特异性，特异性低于通配符选择器。

“特异性”

对于每个规则，用户代理评估选择器的特异性，并将其附加到规则中的每个声明，特异性值将被赋给它的所有相关声明。当一个元素有两个或多个相互冲突的属性声明时，具有最高特异性的属性声明将胜出。

选择器的特异性由选择器本身的组件决定。特异性值可以表达为四个部分，像这样:' 0,0,0,0 '。

  • 对于选择器中给定的每个 ID 属性值，添加' 0,1,0,0 '。 //注意 ID 选择器和以' ID '属性为目标的属性选择器

  • 对于选择器中给出的每个类属性值、属性选择或伪类，添加' 0,0,1,0 '。

  • 对于选择器中给出的每个元素和伪元素，添加' 0,0,0,1 '。

  • 组合子和通用选择器对特异性没有任何贡献,添加'0,0,0,0'。

  • 对于继承的特异性是没有特异性。

  • 第一个零是为内联样式声明保留的，它胜过任何其他声明的特殊性。

  • !important重要的总是在声明的结尾，分号的前面。

    所有的!重要的声明被分组在一起，而具体的冲突在该组内相对解决。类似地，所有不重要的声明都放在一起考虑，不重要的组中的任何冲突都使用特殊性来解决。因此，在重要的和不重要的声明冲突的任何情况下，重要的声明“总是”获胜。

“层叠”

当两个同样特殊的规则应用于相同的元素。

  1. 查找包含与给定元素匹配的选择器的所有规则。

  2. 按显式权重对应用于给定元素的所有声明排序。那些规则写着‘!重要的比不重要的更重要。

  3. 按来源对应用于给定元素的所有声明进行排序。有三个基本的来源:作者、读者和用户代理。通常情况下，作者的风格胜过读者的风格。”!重要的“读者风格比任何其他风格都强，包括”!重要的作者风格。author 和 reader 样式都会覆盖用户代理的默认样式。

    1. 读者重要声明
    2. 作者重要声明
    3. 正常的作者声明
    4. 读者正常的声明
    5. 用户代理声明

  4. 根据“特异性”对应用于给定元素的所有声明进行排序。特异性高的元素比特异性低的元素具有更高的权重。

  5. 如果两个规则具有完全相同的显式权重、来源和特性，则样式表中稍后出现的规则胜出。

第四章

CSS属性值

  1. 值为关键字
    • inherit 关键词使元素上该属性的值继承其父元素响应属性的值。换句话来说，在继承没有发生的情况下，它会强行进行属性继承。
    • initial 关键词可以将属性的值恢复成初始值，某种程度上可以说它“重置”了该值。
    • unset 关键词是inherit和initial的通用替代。如果一个属性是继承的，unset的效果跟inherit关键词的效果相同，如果一个属性不是继承的，unset的效果则跟initial关键词的效果相同。
    • all（一个CSS属性名,指代全部属性，除direction、Unicode-bidi。）,它只能接受全局关键词。 // #example {all: inherit;}
  2. 值为字符串
    • 字符串值是用单引号或双引号引起来的任意字符序列
  3. 值为URL
    • 绝对地址
    • 相对地址
  4. 数字与百分比
avatar
文章
阅读
粉丝