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属性的值只能是出现
在大括号之间的部分。
(0)

相关推荐