CSS基础之简单介绍

网页诞生初期，没有描述样式的语言，创建了很多用于描述样式的标签。但这些标签破坏了html作为一门结构语言的表现。

于是，W3C在1995年开始起草CSS，提出将结构和样式分离的解决方案。

元素

元素是文档结构的基础，在CSS中，每个元素都会生成一个框(或者说盒)

表现形式

替换元素：替换元素的内容并非有浏览器直接生成，典型的莫
过于img元素了；
非替换元素：大部分html元素都是非替换元素，如div元素、p元素等

块级元素：填充父元素的内容区
行内元素：在文本行内生成元素框

声明CSS

[1] 外部样式表

永久样式表(persistent style sheet)
如果指定rel属性为stylesheet，没有指定title属性，那么它
将成为一个永久样式表
<link rel="stylesheet" href="/style.css">

候选样式表(alternate style sheet)
如果为link标签指定一个title属性，那么它将成为一个
候选样式表
<link href="/style1.css" title="mystyle1">

首选样式表(preferred style sheet)
在link标签已经指定rel为stylesheet的情况下，再指定
title属性，那么它将成为一个首选样式表
<link href="stylesheet" href="/style1.css" title="mystyle1">

```
其他属性：
media:
all //所有媒体
screen //屏幕媒体
handheld //手持设备
aural //语音合成器
tv //电视
tty //固定间距环境
print //打印设备
embossed //Braille打印设备
braille //Braille设备
projection //投影设备
```

[2] 文档样式表

在文档中使用style标签包含样式表,成为文档样式表
(document style sheet)或内嵌样式表(embedded style sheet)
<style>
    div {
        color: #f60;
    }
</style>

在style标签内可以使用@import加载外部样式表
@import url(style2.css) screen;

@import与link标签相比较：
声明必须放在所有样式前面
无法指定候选样式表，所有声明的样式都会被加载

[3] 内联样式

使用style属性为单个元素设置属性，inline在这里翻译为内联
，而不是行内，意为内部自带
<p style="color:#f60">天若有情</p>

注意：不推荐使用，一个内联样式只能放一个声明快，不能放整个样式表
，因此不能使用诸如@import之类的规则，style属性的值只能是出现
在大括号之间的部分。