一、CSS定义
1.CSS定义
CSS是Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS的作用就是为网页设置外观,相当于给HTML文档穿上了华丽的衣服。CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒子模型的控制能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
2.为什么要使用CSS?
这个问题得从HTML和浏览器的发展说起。HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。但是,在浏览器发展过程中,由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C)在 HTML 4.0 之外创造出样式(Style)。
二、CSS的优点
与传统地使用一些简单的样式标签相比,使用CSS定义HTML文档的外观有许多优势。主要有以下几点:
1.样式表能实现内容与样式的分离,方便团队开发。
2.方便统一定义和修改文档格式、美化外观、 布局和定位。
3.解决了传统的HTML标签的外观样式比较单一的问题(传统HTML页面色彩不生动、样式修改不方便等)。
4.通过以上几点,极大地提高了工作效率。
三、CSS的三种类型
1. 内联样式表(inline style sheets)
内联样式表又叫行内样式表。内联样式表直接将样式写入元素的style属性中,内联样式表适用于样式没有可复用性的场合。 由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
1 2 3 4 56 This is a paragraph7
2.内部样式表/内嵌样式表(embedded style sheets)
内部样式表又叫页面嵌入(内嵌样式表),当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:表示页面中所有input都是采用指定的样式。使用内部样式表可以实现样式复用,减小页面体积。
1 2
3.外部样式表(linked style sheets)
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,我们可以通过改变一个样式表文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表,用href属性指定引入.css文件的路径。<link> 标签在(文档的)头部:
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
四、CSS样式表的优先级
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。这就意味着,如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
建议的样式表使用原则:
1.推荐把尽可能多的样式写到单独的css文件中,这样可以复用,美工人员和开发人员很好的分工。
2.只有页面特有的样式才写到<style>中
3.只有元素特有的样式才写到元素的style属性中。
参考: