一、 CSS和文档_css中不能出现标记。-CSDN博客

本文链接：https://blog.csdn.net/weixin_43117777/article/details/116332141

1.1web样式简介

1994年，正值web开始广泛流行起来，css 的第一个提案发布了。草案制定的速度很快，到1996年年末，css1完成了。此后刚组建的css工作组开始着手制定css2，而各浏览器则互相协作，努力实现css1。而且早期实现有些先天不足，例不同浏览器对盒模型(box model)的实现之间的差异尤其为人话病。这些问题直接响到css的名声，幸好一些聪明人提出了变通方法，让浏览器的行为保持一致。几年之间，css逐渐流行起来。

在此之前，css2规范于1998年年初定案。随后，css工作组立即投身css3的制定工作，以及css2的修订工作（制定css2.1）。与以往不同的是，css3由多个（理论上）独立的模块构成，而不是单独一个臃肿的规范。

CSS3分成多个模块的根本原因是各模块可以独立演进，尤其是重要的(或受众广的)模块可以按照 W3C的规划向前推进，而不必受其他模块拖累。事实证明,这样做是对的。截至2012年年初，有三个CSS3模块（CSs Color Level 3、CSS Namespaces和Selectors Level 3）变成了全力推荐状态，而有七个模块处于候选状态，还有七个模块处在在不同的草案状态。如果采用以前的机制，要等其他部分完成才能在一份完成的规范中发布颜色、选择符和命名空间的新条款。得益于模块化，我们无需再等待。

但是，这样做也有缺点，即“css3规范”不能涵盖一切。世界上不再有这种叫法，也不可能再有。

1.2 元素

元素(element)是文档结构的根基。HTML中常用的元素有p、table、span、a和div等。文档中的每个元素都对文档的表现起一定的作用。

1.2.1 置换元素和非置换元素

css依赖元素，但并非每个元素都以同样的方式创建。例如，图像和段落是不同类型的元素,span和div也不同。对css来说，元素通常有两种形式：置换元素和非置换元素。

置换元素

置换元素(replaced element)指用来置换元素内容的部分不由文档内容直接表示。在HTML中，最常见的置换元素要数img, 它的内容由文档之外的图像文件替换。其实，通过下面这个简单的例子可以看出，img元素没有内容:
<img STC- “howdy.gif” >
这段标记只包含一个元素名和一个属性。如不指向外部内容(这里通过src属性指定一个图像)，这个元素什么也表示不了。如果指向的图像文件存在，文档会把那个图像显示出来;否则，浏览器什么也不显示，或者显示“图像损坏”占位图。input元素类似，根据类型的不同，会替换成单选按钮、复选框或文本输人框。

置换元素

HTML元素大部分是非置换元素(nonreplaced element)，即元素的内容由用户代理(通常是浏览器)在元素自身生成的框中显示。例如，hi there 是非置换元素，用户代理会显示“hi there”文本。段落、标题、单元格、列表，以及HTML中其他几乎所有元素都是非置换元素。

1.2.2元素的显示方式

除了置换元素和非置换元素之外，CSS还把元素分成块级和行内两种基本类型。除此之外，还有其他显示，不过这两种是最常见的。

块级元素

块级元素(默认)生成一个填满父级元素内容区域的框，旁边不能有其他元素。也就是说，块级元素在元素框的前后都 ** “断行” ** 。HTML中常见的块级元素时p和div。置换元素都可以是块级元素，但往往都不是。
别
列表项目是一种特种特珠的块级元素。它的表现他块级元素没有区别，此外还会在元素框旁生成一个记号（无序列表通常是园点，有序列表通常是数字）。除了多出的这个记号以，列表项目与其他块级元素之间没有任何区别。

行内元素

行内元素在一行文本内生成元素框，不打断所在的行。HTML中最常见的行内元素是a。此外还有strong和em。这类元素不在自身所在元素框的前后“断行”，因此可以出现在另一个元素的内容中，且不影响所在的元素。

注意，HTML中的块级元素和行内元素虽然有诸多共同点，但是它们之间有个重要的区别:在HTML中，块级元素不能出现在行内元素中。但是css并不限制它们的显示方式，相互之间可以嵌套。

现在我们只关注block和inline。看下述标记:

	<body>
		<p>This 15 a paragraph wdith <em>an inline element</em> within it.</p>
	</body>

这里有两个块级元素(body和p) 及一个行内元素 (em) 。根据HTML规范，em可以放在p里，而反过来却不行。一般地， HTMIL层次结构要求，行内元素可以放在块级元素中，反之则不行。

与此不同，css 没有这种限制。在不改变标记的前提下，我们可以像下面这样改变它们的显示方式:

	p {display; inline;}
	em {display: block;}

会导致行内框中出现一个块级框。这完全是有效的，不违背任何CSS规则。然而，如在HTML中调换元素之间的嵌套关系，就会出问题:

不管通过css如何改变显示方式，这都不是有效的的HTML。

1.3.1 link标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="text.html" href="sheets1.css" media="all">
    <style>
        @import url(sheet2.css);
    </style>
</head>
<body>
    
</body>
</html>

为了正确加载外部样式表，link标签必须放在head元素中，不能放在其他元素中。当 web 浏览器遇到 link 标签时，会查找加载指定的样式表，使用样式表中的样式渲染HTML文档。还通过 @import 声明加载了另一个外部样式表 sheet2.css 。 @import 声明必须放在所在样式表的开头，此外别无限制。

外部样式表中包含什么呢？是一系列规则，这里的规则存储在单独的文件中。注意，样式表中不能有HTML或其他标记语言，只能包含样式规则。

h1{
            color: red;
        }
        h2{
            color: maroon;
            background: white;
        }
        h3{
            color: white;
            background: black;
            font: medium Helvetica;
        }

仅此而已，没有 HTML 标签或注释，只有一些简单的样式声明。外部样式表保存为纯文本文件，扩展名通常是.css，例如 sheet1.css。

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

文件扩展名不是必须的，但是如果文件名不以 .css 结尾，即使在 link 元素中把 type 属性的值设为 text/css ，有些旧的浏览器也不会将其识别为包含样式的文件。其实，如果文件名不以 .css 结尾，有些web服务器不会以 text/css 格式伺服文件。不过，修改服务器的配置文件往往便能解决这个问题。

属性

link 标签余下的内容，即那些属性和值比较容易理解。 rel 是 “relation” （关系）的简称，这里指定的关系是 stylesheet 。type 属性的值始终为 text/css ，说明通过 link 标签加载的数据类型。这样 web 浏览器才知道加载的样式表是 css 样式表，然后确定如何处理加载的数据。以后可能会出现其他样式表语言，因此最好声明使用的是那种语言。

接下来时 href 属性，他的值是样式表的 URL ，可以是绝对地址，也可以是相对地址。

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

像下面这样链接针对屏幕媒体和投影媒体的样式表。

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

1.3.2 style 元素

style 元素也是一种引入样式表的方式，直接写在文档中。

	<style type="text/css"> ... <style>

style 元素应该始终设定 type 属性。对 css 文档来说，正确的值应该是 “text/css”，这与 link 元素是一样的。

style 元素始终以

开始和结束 style 之间的样式称为文档样式表 (document stylesheet) 或嵌入样式表（embedded stylesheet ，因为这种样式表内嵌在文档中），也可通过 @import 指令引入外部样式表。

1.3.3 @import 指令

下面来看可以出现在 style 标签中的内容。首先是链接的外部样式表中也有的 @import 指令：

@import url(sheet2.css)

与 link 一样，web 浏览器遇到 @import 指令时会加载外部样式表，使用其中的样式渲染 HTML 文档。二者之间的唯一的主要区别在于句法和指令的位置。可以看出，@import 指令在 style 元素内部，而且必须放在其他 css规则前面，否则不会起作用。比如下面例子：

<style type="text/css">
	@import url(style.css);	/*import 放在开头*/
	h1{color:gray}

与 link 一样，一个文档中可以有多个 @import 语句。然而，不同的是， @import 指令导入的每个样式表都会使用，无法指定候选样式表。对下面的代码来说：

@import url(sheet2.css)
@import url(blueworld.css)
@import url(zany.css)

三个外部样式表都会加载，而且其中的所有样式都会用于显示文档。

与 link 类似，@import 指令也可以显示导入的样式表应用于何种媒体。方法是在样式表的 URL 后面提供媒体描述符。

@import url(sheet.css) all;
@import url(blueworld.css) screen;
@import yrl(zany.css) projection,print;

如果一个外部样式表需要用到另一个外部样式表中的样式，@import 指令的作用就体现出来了。我们知道，外部样式表不能包含任何文档标记，也就是不能使用 link 元素，但是可以使用 @import 指令。因此，外部样式表中可能包含下述内容：

@import url(http:example.org/libbrary/layout.css)
@import url(basic-text.css);
@import url(printer.css) print;
body{
	color:red
}
h1{
color:blue
}

@import 指令写在样式表的开头。css 要求样式表中的 @import 指令必须在所有样式规则前面。遵守规范的用户代理会忽略放在样式规则（例如 body {color:red;}）后面的 @import指令。 *

1.3.5 行内样式

除了 body 元素之外的标签（如head 或 title），所有 HTML 标签都能设定 style 属性。

style 属性的值只能是样式规则花括号之间的那一部分。

样式表中的内容

由于历史原因, style 元素中可以有HTML 注释。

<style>
        <!--
            h1{
                color: maroon;
            }
            body{
                background: yellow;
            }
        -->
    </style>

1.4.2 规则的结构

一个规则由两个基本部分构成：选择符(selector) 和声明块 (declaration block)。声明块由一个或多个声明组成，而一个声明包含一个属性（property）和对应的值 (value)。一个样式表由一系列规则构成。
在这里插入图片描述
选择符定义文档中的那部分受影响。

声明块由一个或多个声明组成。

1.4.3 厂商前缀

有时你会发现，css 中有些内容的前面有个标注，如何 -o-border-image。这叫厂商前缀（vender perfix），浏览器厂商通过它标记实验性或专属（或二者兼具）的属性，值或其他内容。截止 2016 年年末，市面上有不少厂商前缀。

前缀	厂商
-epud-	国际数字出版论坛制定的ePub格式
-moz-	基于 Mozilla 的浏览器（如firefox）
-ms-	微软 Internet Explorer
-o-	基于 Opera的浏览器
-webkit-	基于 Webkit的浏览器（如Safari 和 Chrome）

厂商前缀的一般格式是一个英文破折号、一个标注和一个英文破折号。不过也有少量前缀不会才有这个格式，开头没有破折号。

厂商前缀出现的目的是浏览器厂商为了测试新特性，这么做能保证兼容性。

截止 2016 年年末，厂商前缀的使用趋势有所减慢，因为新版浏览器逐渐删除了对带前缀的属性和值的支持。