CSS权威指南 第一章CSS和Document 学习笔记

第一章 CSS和Document

1. elements 元素

Elements are the basis of document structure.

Elements and tags are not the same things. tags begin or end an element in source code, whereas elements are part of the DOM, the document model for displaying the page in the borwser.

-- MDN

1.1 Replaced and Nonreplaced Elements 置换元素和非置换元素

In CSS, elements generally take two forms: replaced and nonreplaced.

对CSS来说，元素通常有两种形式，置换元素和非置换元素。

1.1.1 Replaced Elements 置换元素

Replaced elements are those where the element’s content is replaced by something that is not directly represented by document content.

用来置换元素内容的部分不由文档内容直接表示。

例子：
比如说img元素：他的内容由文档之外的图像文件替换。

<img src = "demo.png"></img>

如果说img元素的src属性的值对应的路径正确，正好对应着一个图片叫demo.png。那么，在文档中就会显示该图片。如果说所指向的地址中的资源并不存在，那么浏览器中将不会有内容，或者是显示一个“broken image” placeholder。

这样的元素还有input，它可以替换为单选按钮，复选框或文本输入框。

1.1.2 Nonreplaced elements

The majority of HTML elements are nonreplaced elements. This means that their content is presented by the user agent (generally a browser) inside a box generated by the element itself.

HTML元素大部分是非置换元素，即元素的内容是由用户代理（通常是浏览器）在元素自身生成的框中显示。

  • 总结：可替换元素会被元素内的属性所影响。

1.2 Element Display Roles

另一种将元素分类的方式。通过元素的显示类型进行分类。

  • block 块级
  • inline 行内级

以上是两种最基本元素显示类型，实际上还有其他的比如说：

  • inline-block
  • table
  • inline-table
  • table-cell

1.2.1 Block-level elements 块级元素

Block-level elements generate an element box that (by default) fills its parent element’s content area and cannot have other elements at its sides.

块级元素（默认）生成一个能填满整个父级元素内容区域的框，并且旁边不能有其他元素。

最常见的块级元素：

  • div
  • p

一个特殊的元素——列表项

List items are a special case of block-level elements. In addition to behaving in a manner consistent with other block elements, they generate a marker—typically a bullet for unordered lists and a number for ordered lists—that is “attached” to the element box.

列表项目是一个特殊的块级元素。他的表现和其他普通的块级元素没有区别，此外还会在元素框旁边生成一个记号（无序列表通常是圆点，有序列表通常是数字。），除了多出了这个记号以外，其余的没有什么区别。

  • 列表会多生成一个标记盒子用来存放符号和数字。

1.2.2 inline-level elements 行内元素/内联元素

行内元素在一行文本内生成元素框，不打断所在行。

最常见的行内元素：

  • a
  • span

注意： 块级元素不能出现在行内元素中。虽然html不能这么写，但是可以通过css控制display来改变他们的显示方式。（display默认属性是inline）

有一说一虽然说是不可以，但是我试了一下，问题不大。

2. Bringing CSS and HTML Together 把CSS应用在HTML上

通过link标签链接的样式不是HTML文档的一部分，但是却供文档使用。我们将这样的样式称之为外部样式表（external stylesheet）。

  • link标签必须要放在head元素中。
  • 除了通过link标签还可以通过@import声明加载外部样式表。
    • 注意：通过@import声明必须放在所在样式表的开头。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 在head元素里面 -->
    <link rel="stylesheet" href="...">

    <style>
        /* 必须放在开头 */
        @import url(...);
    </style>
</head>

<body>
</body>

</html>

注意：外部样式表不能包含任何文档标记，只能有CSS规则和CSS注释。如果外部样式表中有标记的话，可能会导致部分或全部样式失效。

2.1.1 属性

<link rel="stylesheet" type="text/css" href="..." media="all">

我们来看下link中的相关属性。

  • rel：“relation”（关系）的简称。这里指定的关系是stylesheet。

  • type：该属性的值始终是text/css，说明link标签加载数据的类型。

    • 通过这种方式浏览器才知道加载的样式表是CSS样式表，然后确定如何加载数据。

  • href：他的值是样式表的URL。可以使绝对地址，也可以是相对地址。

    URL:

    统一资源定位符（英语：Uniform Resource Locator，缩写：URL；或称统一资源定位器、定位地址、URL地址[1]，俗称网页地址或简称网址）是因特网上标准的资源的地址（Address），如同在网络上的门牌。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址，现在它已经被万维网联盟编制为因特网标准RFC 1738。

    在互联网的历史上，统一资源定位符的发明是一个非常基础的步骤。统一资源定位符的语法是一般的，可扩展的，它使用美国信息交换标准代码的一部分来表示因特网的地址。统一资源定位符的开始，一般会标志着一个计算机网络所使用的网络协议。

    ——wiki

  • media：他的值是一个或者多个媒体描述符（media descriptor），指明媒体的类型和具有的功能。多个媒体描述符以逗号分开。

    <link rel="stylesheet" type="text/css" href="..." media="screen, projection">

  • title：不常用，使用不当会有错误。

    <link rel="stylesheet" href="test.css" title="base">

<link rel="stylesheet" href="test2.css" title="alternate">

    使用title时，浏览器只会渲染一个title。另一个title就不会渲染了。

    当我们不使用title的时候，就是永久样式表（persistent stylesheet）。始终用于显示文档。

2.1.2 候选样式表

候选样式表（alternate stylesheet），定义的方式是将rel属性值设置为alternate stylesheet。仅当用户自己选择，文档才会使用候选样式表进行渲染。

基于webkit的浏览器不支持选择候选样式表。

<link rel="stylesheet" href="test.css" title="base">

<link rel="alternate stylesheet" href="test2.css" title="alternate">

Firefox：

image-20201031152526209

safari/chrome：基于webkit所以没有这种东西。

  • 还能通过为不同的候选样式表设定相同的title值，把他们分组。

2.2 style元素

语法：

<style type="text/css"> </style>
  • type属性的正确值是text/css。
  • style元素也可以设置media和link是一样的。
  • 可以通过@import指令引入外部样式表。

在<style type="text/css"></style>标签里面的样式称为文档样式表（document stylesheet）或者是嵌入式样式表（embedded stylesheet）。

2.3 @import指令

语法：

@import url(sheet.css);

与link一样，web浏览器遇到@import指令时会加载外部样式表，并使用其中的样式渲染HTML文档。

@import指令也可以显示导入的样式表用于何种媒体。

@import url(sheet2.css) all;
@import url(sheet3.css) screen;

与link的区别：

  • 语法区别：长得不一样

  • 位置区别：@import必须放在style元素内部，而且必须放在其他CSS规则前面。

    body {

    background-color: pink;

}

@import url(test2.css);

    浏览器不会渲染test2.css的样式。

    firefox报错：

    image-20201031155450795

    据说IE不会忽略。

  • 使用@import加载的外部样式表都会使用，无法使用候选样式表。

使用场景：

当一个外部样式表需要用到另一个外部样式表的样式时。

为什么不用link： 因为在样式表中不能包含任何文档标记。也就是不能用link

在样式表中包含了文档标记，浏览器报错：

image-20201031160453135

2.4 HTTP链接

不常用。

目前不太懂，以后做了解。

2.5 行内样式

如果说只给元素使用少量样式，可以使用行内样式。使用HTML元素的style属性设置行内元素。

<span>
      <div style="color: green;">12</div>
</span>

  • 除了body元素之外的标签（比如说head和title），所有的HTML标签都能设置style属性。

  • 不能再style属性中使用@import指令。

    报错：

    image-20201031162203836

一般我们不使用style属性。

3. 样式表中的内容

会有一些CSS样式，也会有一些@import声明

我们来看下什么东西是不能出现在样式表中：

3.1 标记

样式表中不能有标记（前面已经有错误示范了）

注意：

HTML注释标记可以存在于样式表，由于历史原因，style元素中可以有HTML注释。

emm，书上说的可以，我试了下，发现是不可以的。

image-20201031163353332

3.2 规则结构

fg1-7

3.3 厂商前缀

浏览器厂商通过它标记实验性或专属（或二者兼具）的属性、值或者其他内容。

常用的厂商前缀：

Prefix Vendor
-epub- International Digital Publishing Forum ePub format
-moz- Mozilla-based browsers (e.g., Firefox)
-ms- Microsoft Internet Explorer
-o- Opera-based browsers
-webkit- Webkit-based browsers (e.g., safari and Chrome)

现在一般不会使用厂商前缀。

3.4 处理空白

一般来说，CSS对待空白的方式和HTML差不多：解析时，连续的空白会合并成一个空。

  • 有一些地方必须使用空白。最常见的是使用空白分隔值中的多个关键字。多个关键字必须要用空白分开。

    border: 1px solid red;

3.5 CSS注释

语法：

/* 这是一个注释 */

/*
也可以换行的。
是真的！
*/

  • 注释不能够嵌套使用。

    注意：临时注释掉已经包含注释的一大段规则时候容易导致注释嵌套。

  • 浏览器引擎渲染是会直接忽略注释。

    对于CSS解析器来说，CSS注释相当于根本没有出现过。因此注释甚至可以放在规则内部，声明内部。

4. 媒体查询

通过媒体查询（media query）定义浏览器在何种媒体环境中使用指定的样式表。

4.1 用法

媒体查询在以下几个地方使用：

  • link元素的media属性。
  • style元素的media属性。
  • @import声明的媒体描述部分。
  • @media声明的媒体描述部分。
<link rel="stylesheet" href="xxx" media="screen, print">

<style media="screnn, print"></style>

@import url(xxx) screen, print;

@media screen, print{...}

媒体查询可以是简单的媒体类型，也可以是复杂的媒体类型和特性组合。

4.2 简单的媒体查询

假设我们需要在投影环境（例如：幻灯片）中使用一些不同的样式。

h1 {
  color: maroon;
}

@media projection {
  
  body {
    background: yellow;
  } 
  
}

在投影媒体中body元素会有一个黄色的背景。

4.3 媒体类型

媒体类型就是指明不同媒体的标注：

all

​ 用于所有展示媒体

print

​ 为有视力的用户打印文档时使用，也在预览打印效果时使用。

screen

​ 在媒体屏幕（比如电脑）上展示文档时使用。

  • 你也可以混合使用，比如说@media screen, print{...}

4.4 媒体描述符

有点懵比。

5. 特性查询

特性查询 使用CSS的at规则 @supports 创建。它给予web开发者一种测试浏览器是否有对某个确定特性的支持，而后提供基于测试结果生效的CSS的方法。在此指南中你将学习如何使用特性查询实现渐进式增强。

——MDN

  @supports (color: black){
            body {
                color: black;
            }
            h1 {
                color: purple;
            }

            h2 {
                color: navy;
            }
        }

代码意思：如果说浏览器（代理）能够识别并处理color: black这样的属性组合，那么就会应用这段样式，否则就会跳过这段样式。如果用户代理不支持@supports，样式也会被跳过。

特性查询是渐进增强样式的完美方式

@supports (display: grid) {

       section#main {
            display: grid;
        }

        /* 去掉旧布局的样式 */
        /* 格栅布局的样式 */
}
  • 支持格栅布局的浏览器会覆盖原来的页面布局。通过格栅布局实现新的布局。

后面的内容涉及和媒体查询相结合的内容。以后再看。

posted @ 2020-11-04 15:20  方阿森  阅读(141)  评论(0)    收藏  举报