IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

fd1e5d5373e04cd48c0b75f331c19dae.jpg

HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观。如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS)。CSS规范的工作原理在于允许用户制定一些规则,描述文档中元素内容的表现形式,通过设置不同的规则控制页面中每一个元素的外观,包括字体的颜色和大小、线的宽度和颜色、页面中各项之间的空白量,以便使页面看上去更令人感兴趣。CSS和HTML一样是所有网页制作技术的核心与基础,是为HTML制定样式的机制,能控制浏览器如何显示HTML中的每个元素及其内容。CSS是和HTML一起工作的,用来弥补HTML对网页格式化功能的不足。既可以将HTML和CSS写在同一个文件中,也可以分开编写,都是纯文本文件,也都是通过浏览器解析的。本章所介绍的CSS语法只覆盖了本书程序实例中所涉及的内容。              

CSS简介

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言,所以学习CSS之前应该先去了解HTML。CSS的作用是定义网页的外观(例如,字体、背景、文本、位置、布局、边缘、列表及其他),它也可以和JavaScript等浏览器脚本语言合作做出许多动态的效果。

Ø 所谓样式表,是样式化HTML的一种方法。HTML是文档的内容,而样式表是文档的表现,或者说外观。

Ø 所谓层叠,就是将一组样式在一起层叠使用,控制某一个或多个HTML元素,按样式表中的属性依次显示。

一张样式表可以用于多个页面,甚至整个站点,因此CSS具有良好的易用性和扩展性。从总体来说,使用CSS不仅能够弥补HTML对网页格式化功能的不足,例如段落间距、行距、字体变化和大小等,还可以使用CSS动态更新页面格式、进行排版定位等。CSS的特点如下:

Ø 控制页面中的每一个元素(精确定位)。

Ø 对HTML语言处理样式的最好补充。

Ø 把内容和格式处理相分离,减少工作量。

我们可以将CSS定义在HTML文档的每个标记里,或者以<style>标记嵌入在HTML文档中,也可以在外部附加文档作为外加文档。本例使用嵌入样式表,改变同一个HTML文档中1个<h1>和4个<p>标记的输出效果。使用文本编辑器打开一个扩展名为.html的网页文件,将3个字符串分别编写在HTML的1个<h2>和两个<p>标记中。并在该文档中使用<style>标记嵌入CSS代码,控制这三个标记的显示效果。代码如下所示:

d8a446543c1b428ca6bb0dabb3c88161.jpg

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,如图1所示。

562383439a5e41759ff66f0cec312400.jpg

图1  简单的CSS实例演示结果

本例中,HTML定义的网页结构使用CSS设置输出格式,可以将格式和结构分离。只要在CSS中改变某些属性,则使用这个样式的所有HTML标记都会更新。

猜你喜欢

转载自www.cnblogs.com/itxdl/p/11731111.html
今日推荐