百度前端技术学院 第三天学习总结（CSS文本、选择器）（1）

CSS学习, 百度前端技术学院 本文总阅读量次

补充：HTML知识

title 属性
  • 规定关于元素的额外信息。
  • 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
  • 提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
p标签的嵌套
  • 内联元素可以嵌套内联元素，块级元素可以嵌套部分块级元素并也能嵌套内联元素，但内联元素不能嵌套块级元素。块级元素为block，内联元素为inline，拥有“inline”特性的同时又拥有“block”的特性称为replace元素。
  • 在**<p>元素中是不能嵌套<div>元素**的，在<p>标签还没结束时，遇到下一个块级元素就会自动结束。

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)，样式表中的样式定义如何显示 HTML 元素，存储在 CSS 文件中的外部样式表可以极大提高工作效率。

CSS是如何工作的

解释1(来自MDN)

（具体可以参考这个链接有实际的转换例子）
1. 浏览器加载HTML
2. 浏览器将HTML转换为DOM
3. 浏览器获取HTML文档链接的大多数资源以及CSS（在此过程只呢个稍后会处理JS）
4. 浏览器解析提取的CSS，并根据选择器类型分到不同的“存储桶”，例如元素，类，ID等。根据找到的选择器，它确定应将哪些规则应用于DOM中的哪些节点，并根据需要向其附加样式（此中间步骤称为渲染树）。
5. 将渲染树放置在规则应用到其后应出现的结构中。（放在合适的HTML元素中）
6. 页面的视觉显示在屏幕上显示（此阶段称为绘画）。

解释2（比较好理解）

参考(里面有详细的图片解释)

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局，以计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上。
补充：DOM

DOM具有树状结构。标记语言中的每个元素，属性和一段文本都成为树结构中的DOM节点。

CSS的基本语法是怎样的

参考图

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
  • 选择器通常是您需要改变样式的** HTML 元素**。
  • 每条声明由一个属性和一个值组成。
  • 多条声明中间用分号隔开。
    1
    2
    3
    4
    选择器 {
        属性:值; 
        属性:值;
    }
  • 注意：如果值为若干单词，则要给值加引号：
    1
    p {font-family: "sans serif";}

CSS选择器是什么概念

  • 选择器通常是您需要改变样式的HTML 元素。

简单选择器

id 选择器

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

类选择器
  • 以一个点号显示
    1
    .center {text-align: center}
  • 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。
    1
    2
    3
    4
    5
    6
    7
    <h1 class="center">
    This heading will be center-aligned
    </h1>

    <p class="center">
    This paragraph will also be center-aligned.
    </p>
  • 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
类型（标签名/元素）选择器
1
2
3
4
5
6
7
8
9
10
11
span {
    background-color: yellow;
}

strong {
    color: rebeccapurple;
}

em {
    color: rebeccapurple;
}
通用选择器

用星号（*）表示，并选择文档中的所有内容

1
2
3
* {
    margin: 0;
}

属性选择器

属性选择器
  • 语法[属性名]{css样式}
  • 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
  • 注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
  • 下面的例子为带有 title 属性的所有元素设置样式：
    1
    2
    3
    4
    [title]
    {
    color:red;
    }
属性和值选择器
  • 下面的例子为 title=”W3School” 的所有元素设置样式：
    1
    2
    3
    4
    [title=W3School]
    {
    border:5px solid blue;
    }
属性和值选择器 - 多个值
  • 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于HTML中由空格分隔的属性值：（比如：HTML中属性值为”hello world”或”student hello”）
    1
    [title~=hello] { color:red; }
  • 下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于HTML中由连字符分隔的属性值：(比如：HTML中属性值为”en-us”或者”en”)
    1
    [lang|=en] { color:red; }
  • [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
  • [attribute^=value] 匹配属性值以指定值开头的每个元素。
  • [attribute$=value] 匹配属性值以指定值结尾的每个元素。
  • [attribute*=value] 匹配属性值中包含指定值的每个元素。
扩展
  • 设置表单的样式的例子
  • 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
CSS学习, 百度前端技术学院