CSS权威指南学习笔记--Chapter1 CSS和文档

本文链接：https://blog.csdn.net/chengyu779394084/article/details/50150703

自学CSS权威指南系列—学习笔记

元素element：文档结构的基础。
替换和非替换元素；
 替换元素：用来替换元素内容的部分并非由文档内容直接表示。
 非替换元素：内容由用户代理在元素本身生成的框中显示。
块级元素和行内元素：
 块级元素：生成一个元素框，填充父元素的内容区，旁边不能有其他元素。
 行内元素：在一个文本行内生成元素框，而不会打断这行文本。
display属性值：定义基本布局；初始值inline；

结合CSS和HTML：

link标记：

<link rel=”stylesheet“ type=”text/css” href=”sheet1.css” media=”all”/>

外部样式表–link元素必须放在head元素中

link的其余属性：

rel–此处关系为stylesheet；
type–设置为text/css；
href–属性值为样式表的URL；
media–所要应用的表现媒体

一个文档可能会关联多个样式表，文档在最初显示的时候只会显示rel=”stylesheet“的link标记。

候选样式表

rel=”alternate stylesheet“–只有用户选择这个样式表，才会应用于文档
可以为候选样式表指定同样的title值，把他们分组在一起。
如果为一个rel为stylesheet的link指定了title属性，则该样式表将作为首选样式表。

<head>
<link rel=”stylesheet” type=”text/css” href=”basic.css” title=”Default” media=”all”/>
<link rel=”stylesheet” type=”text/css” href=”style.css” title=”Default” media=”screen”/>
<link rel=”alternate stylesheet” type=”text/css” href=”big.css” title=”Big” media=”all”/>
<link rel=”alternate stylesheet” type=”text/css” href=”print.css” title=” Big” media=”screen”/>
</head>

2.style元素：
<style type=”text/css”></style>
style元素必须使用type属性；

开始和结束style标记之间的样式成为文档样式表或嵌套样式表，其中可能包含应用到文档的多个样式，或使用@import指令包含多个外部样式表链接。

@import出现在style元素中，且必须放在其他CSS规则之前，否则不起作用。一个文档不止有一个@import语句。可以限制所导入样式表应用于一种或多种媒体。url可以是相对的或者是绝对的。

<style type=”text/css”><!--
@import url(http://layout.css) all;
@import url(basic-block.css) screen;
@import url(basic.css) print;
body {color:red;}
h1 {color:green;}
-->
</style>

向后可访问性的考虑下添加~

Notice：@import指令必须出现在CSS规则之前。

CSS注释：/* */不能嵌套使用

3.内联样式：为单个元素指定样式，而不需要嵌套或外部样式表，使用style属性值。

<p style=”color:red;”>hello world</p>