CSS权威指南学习笔记系列(1)CSS和文档

时间 2019-12-07

标签 css 权威指南学习笔记系列文档栏目 CSS 繁體版

原文原文链接

题外话：
HTML是一种结构化语言，而CSS是它的补充；这是一种样式语言。CSS是前端三板斧之一，所以学习CSS很重要。而我仍是菜鸟，因此须要增强学习CSS。这个是我学习CSS权威指南的笔记，若有不对，请谅解和指出。谢谢你们。
正文：css

第一章 CSS和文档

1.CSS，称为层叠样式表。使用CSS的理由有：a.易于使用，样式表能大大减小Web创做人员的工做量；b.在多个页面上使用样式，能够建立一个样式表，而后把这个样式表应用到多个页面；c.层叠，CSS还规定了冲突规则；这些规则统称层叠；d.缩减文件大小，它有助于尽量地缩减文档大小，以便加快下载；e.为未来准备。html

2.元素前端

元素是文档结构的基础，文档中的每一个元素都对文档的表现起必定做用。在CSS中，至少在CSS2.1中，这意味着每一个元素生成一个框(box，也称为盒。通俗的说，就是包装盒)，其中包含元素的内容。浏览器

3.替换和非替换元素学习

在CSS中，元素一般有两个形式：替换和非替换。this

替换元素（replaced element）：指用来替换元素的内容部分并不是由文档内容直接表示，(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素每每没有实际的内容，便是一个空元素，例如： <img src=”howdy.jpg” /> <input type="submit" name="submit" value="提交" />浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。url

非替换元素（noreplaced element）：大多数HTML和XHTML元素都是替换元素，这意味着，其内容由浏览器在元素自己生成的框中显示。例如，<span>hi this is noreplaced element</span>就是个非替换元素，文本“hi this is noreplaced element”将由浏览器显示。段落p、标题<h1>到<h6>、表单元格<table></table>和列表<ul><ol>和XHTML的几乎全部元素是非替换元素。spa

4.元素显示角色code

CSS2.1还使用另外两种基本元素类型：块级（block-level）元素和行内（inline-level）元素。
块级元素
块级元素生成一个元素框（默认地）它会填充其父元素的内容区，旁边不能有其余元素。换句话说就是它在元素框以前和以后生成了“分隔符”。最为熟悉应该是p和div。
替换元素能够是块级元素，不过一般都不是。而列表项是块级元素的特例。除了表现方式与其余块元素一致，列表项还会生成一个标记符——无序列表中这一般是个圆点，有序列表中则是一个数字。这个标记符会“关联”到元素框。除此以外，列表项与其余块级元素相同。
行内元素
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素不会在它自己以前或以后生成“分隔符”，因此能够出如今另外一个元素的内容中，而不会破坏其显示。例如a元素、strong元素和em元素。
在HTML和XHTML中，块级元素不能继承行内元素（即不能嵌套在行内元素），可是在CSS中，对于显示角色如何嵌套不存在任何限制。要了解这是如何工做的，下面来考虑一个CSS属性display。display有不少值，目前只关注block和inline。考虑下面标记：htm

<body>
<p>This is a paragraph with <em>an inline element</em>within it.</p>
</body>

这有2个块级元素（body和p）和一个行内元素（em）。按照XHTML规范，em能够继承p，可是反过来就不行。通常地，XHTML层次结构要求：行内元素能够继承块级元素，而反之不容许。与此不一样，CSS就没有这种限制。以下：

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

这会使元素在一个行内框中生成一个块框，这是彻底合法的。不违反任何规范。惟一问题是若是试图以下反转元素的嵌套关系：<em><p>boom</p></em>不论经过CSS对显示角色作什么改变，在XHTML中都是不合法。

5.link标记

link标记基本目的是容许HTML创做人员将包含link标记的文档与其余文档相关联。CSS使用这个标记来连接样式表和文档。若有一个sheet1.css的样式表要连接到HTML文件：

<link rel="stylesheet" type="text/css" href="sheet1.css">。

这个样式表并非HTML文档的一部分，可是仍会由HTML文档使用，这称为外部样式表（external style sheet），为了成功地加载一个外部样式表，link必须放在head元素中，但不能放在其余元素内部（如title）。

对于link标记的余下部分，其属性和值都很直接明了，rel表明“关系（relation）”，在这里，关系为stylesheet。type老是设置为tex/css。这个值描述了使用link标记加载的数据的类型。href属性的值表示样式表的URL。能够是绝对URL和相对URL。

media属性，这里使用的值为all,说明这个样式表要应用于全部表现的媒体。CSS2为这个属性定义不少可取值。all:用于全部表现媒体。aural：用于语音合成器、屏幕阅读器和文档的其余声音表现。braille：用于Braille设备表现文档使用。还有其余值不一一说明。3个比较主要的是all、screen和print。
注意一个文档可能关联有多个连接样式表。若是是这样，文档最初显示时只会使用rel为stylesheet的link标记。所以，若是但愿连接名为basic.css和splach.css的两个样式表，能够以下设置

<link rel="stylesheet" type="text/css href="basic.css/> 
 <link rel="stylesheet" type="text/css href="splash.css/>

候选样式表——将rel设置为alternate stylesheet，就能够定义候选样式表，只有在用户选择这个样式才会用于文档表现。

6.@import指命

与link标记相似，@import指命用于指示浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。惟一区别在于命令的具体语法和位置。@import命令必须放在style容器中。要放在其余CSS规则以前，不然将根本不起做用。

<style type="text/css">
    @import url(styles.css);
    h1{color:gray;}
</style>

7.CSS注释

CSS支持注释。与C与C++注释很是类似，CSS注释也用/和/包围：/*this is a css1 comment*/,也能够跨多行

/* this is boom
    can be sw
    any
*/

注意不能嵌套。

8.内联样式：只想一想为单个元素指定一些样式，而不须要嵌套和外部样式表，就可使用HTML的style属性来设置一个内联样式。

<p style="color:gray">the most wonderful</p>

除了在body外部出现的标记（例如，head或title），style属性能够与任何其余HTML标记关联。

更多细节请看《CSS权威指南》