摘要：行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素的内容中，而不会破坏其显示。标记标记基本目的是允许创作人员将包含标记的文档与其他文档相关联。更多细节请看权威指南
题外话：
HTML是一种结构化语言，而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中的 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
非替换元素（noreplaced element）：大多数HTML和XHTML元素都是替换元素，这意味着，其内容由浏览器在元素本身生成的框中显示。例如，hi this is noreplaced element就是个非替换元素，文本“hi this is noreplaced element”将由浏览器显示。段落p、标题
4.元素显示角色
CSS2.1还使用另外两种基本元素类型：块级（block-level）元素和行内（inline-level）元素。
块级元素
块级元素生成一个元素框（默认地）它会填充其父元素的内容区，旁边不能有其他元素。换句话说就是它在元素框之前和之后生成了“分隔符”。最为熟悉应该是p和div。
替换元素可以是块级元素，不过通常都不是。而列表项是块级元素的特例。除了表现方式与其他块元素一致，列表项还会生成一个标记符——无序列表中这通常是个圆点，有序列表中则是一个数字。这个标记符会“关联”到元素框。除此之外，列表项与其他块级元素相同。
行内元素
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。例如a元素、strong元素和em元素。
在HTML和XHTML中，块级元素不能继承行内元素（即不能嵌套在行内元素），但是在CSS中，对于显示角色如何嵌套不存在任何限制。要了解这是如何工作的，下面来考虑一个CSS属性display。display有很多值，目前只关注block和inline。考虑下面标记：
This is a paragraph with an inline elementwithin it.
这有2个块级元素（body和p）和一个行内元素（em）。按照XHTML规范，em可以继承p，但是反过来就不行。一般地，XHTML层次结构要求：行内元素可以继承块级元素，而反之不允许。与此不同，CSS就没有这种限制。如下：
p{display:inline;}
em{display:block;}
这会使元素在一个行内框中生成一个块框，这是完全合法的。不违反任何规范。唯一问题是如果试图如下反转元素的嵌套关系： boom
5.link标记
link标记基本目的是允许HTML创作人员将包含link标记的文档与其他文档相关联。CSS使用这个标记来链接样式表和文档。如有一个sheet1.css的样式表要链接到HTML文件：
。
这个样式表并不是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的两个样式表，可以如下设置
候选样式表——将rel设置为alternate stylesheet，就可以定义候选样式表，只有在用户选择这个样式才会用于文档表现。
6.@import指命
与link标记类似，@import指命用于指示浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一区别在于命令的具体语法和位置。@import命令必须放在style容器中。要放在其他CSS规则之前，否则将根本不起作用。
7.CSS注释
CSS支持注释。与C与C++注释非常相似，CSS注释也用/和/包围：/*this is a css1 comment*/,也可以跨多行
/* this is boom
can be sw
any
*/
注意不能嵌套。
8.内联样式：只想想为单个元素指定一些样式，而不需要嵌套和外部样式表，就可以使用HTML的style属性来设置一个内联样式。
the most wonderful
除了在body外部出现的标记（例如，head或title），style属性可以与任何其他HTML标记关联。
更多细节请看《CSS权威指南》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111278.html
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前 一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...
摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前 一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...
阅读 2967·2021-11-23 10:12
阅读 2692·2021-11-23 09:51
阅读 2043·2021-11-15 11:37
阅读 1358·2019-08-30 15:55
阅读 1966·2019-08-29 15:40
阅读 1168·2019-08-28 18:30
阅读 1651·2019-08-28 18:02
阅读 2642·2019-08-26 12:00
