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

题外话:
HTML是一种结构化语言,而CSS是它的补充;这是一种样式语言。CSS是前端三板斧之一,因此学习CSS很重要。而我还是菜鸟,所以需要加强学习CSS。这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出。谢谢大家。
正文:

第一章 CSS和文档

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

2.元素

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

3.替换和非替换元素

在CSS中,元素通常有两个形式:替换和非替换。

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

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

4.元素显示角色

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

<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权威指南》

    原文作者:Wythehuang
    原文地址: https://segmentfault.com/a/1190000004351359
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞