一、CSS(Cascading Style Sheets的缩写)
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。
二、CSS的发展历程
从 HTML 被发明开始,样式就以各种形式存在,不同的浏览器结合他们各自的样式语言为用户提供页面效果的控制。最初的 HTML 只包含很少的显示属性。 随着HTML 的成长,为了满足页面设计者的需求, HTML 添加了很多显示功能。但是随着这些功能的增加, HTML变得越来越杂乱,而且 HTML 页面也越来越臃肿,于是 CSS 便诞生了。CSS 用于控制网页的样式和布局 , 修饰页面效果,可以配合脚本语言动态的对网页各元素进行格式化,在提升用户 体验方面功不可没。lCSS1:W3C 推荐,CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日,此推荐被重新修订。lCSS2:W3C 推荐,CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介(打印机和听觉设备)和可下载字体的支持。lCSS3:将 CSS 划分为多个小模块:盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
三、CSS引入方式
1 行内样式表
直接在标签的属性中使用style声明,在style属性中添加css声明即可。
由于要将表现(样式)和内容(结构)混杂在一起,行内样式表会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
<!--在标签内部再嵌套一个内嵌标签来设置样式--> <h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>
2 内部样式表(内联样式)
定义在head或body标签中,使用style标签.
当单个文档需要特殊的样式时,就应该使用内部样式表。
/*内部定义的style样式*/ <style type="text/css"> h1 { background-color: deeppink; color: blue; } </style>
3 外部样式表
定义在外部的css文件中,需要在head中引入相应的css文件
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。
(1)html文件中:使用link来导入css文件
/*关联外部的css样式文件*/ <link type="text/css" rel="stylesheet" href="../css/test.css" />
type:定义链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的url,可以是相对路径,也可以是绝对路径。(2)css文件中:定义CSS样式
选择器:{键名:键值;键名:键值;}
h1{ background-color: rosybrown; color: #0000FF; }
四、 三种样式表总结
样式表样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 没有实现结构与样式相分离 较少 控制一个标签(少) 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中) 外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多) 3种样式表的优先级:
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时,采用 就近原则 来使用样式