CSS基础初识层叠式样式表CSS

CSS是什么?

CSS的英文全称是CascadingStyleSheets,翻译过来就是层叠式样式表。样式就是一个事物的外观和样子,例如服装有不同的样式,穿到不同的人身上就会有不同的效果;人们浏览网页,有的网页很漂亮,让人赏心悦目,留客率就很高。反之乱七八糟、不够美观的网页就会让人厌烦,也不愿意再次进入该网页,留客率就低。

对网页来说,样式就是网页的外观和样子,不同的样式应用到同一个网页,它会展现出不同的外观和样子,有的样式注重体现艺术美感、有的样式注重体现庄重大方、有的样式注重体现文化韵味。在网页设计中,样式被细化为一个一个的标签,每个标签定义了一个单独的样式外观,并应用到HTML元素的外观展示。

例如,CSS在描述文字外观样式上,就提供了font-size(字体尺寸样式)、font-family(字体样式,如宋体、黑体等)、color(字体颜色)等样式。这些样式都可以应用到网页文字元素上,如p元素、span元素等。当多个样式标签应用到网页元素时,浏览器会把这些样式效果叠加起来用于展现网页元素的外观。

现在就可以理解什么是层叠式样式表了?CSS把描述网页元素的样式细化为一个一个的标签,标签的组合组成了样式表,当多个样式标签组合应用到网页元素时,浏览器会把这些样式效果叠加起来用于展现网页元素的外观。

CSS用什么软件来编辑?

CSS主要用于描述网页的外观和样子,CSS和网页就是一家人,编辑网页的软件工具都可以用来编辑CSS。CSS即可以和网页内容在同一网页文件中混合编辑;也可以对CSS进行单独编辑,独立保存为一个CSS文件(文件扩展名为css),在网页文件中引入CSS文件就可以了。

一个和网页内容混合编辑的CSS样例

下面的网页代码没有使用CSS样式,下图是该网页代码在浏览器的显示效果。

下面的网页代码使用了CSS样式,下图是该网页代码在浏览器的显示效果。

在上面的网页代码中,CSS样式作为网页元素的style属性,内置到网页元素中。在body元素内置的样式属性会影响到整个网页的显示效果,也称为全局样式属性。在单个元素内置的样式属性仅对该元素及其它的子元素起到作用,也称为局部样式属性。当局部样式属性和全局样式属性发生冲突时,以局部样式属性为主。

CSS样式的继承性

CSS样式具有继承性,父元素设置的样式会影响到其所有的子元素,也包括所有的后代元素,除非子元素重新定义了样式,父元素的样式才会被覆盖。例如,在body元素设置的样式,将会影响到body内所有的HTML元素。




转载请注明:http://www.aierlanlan.com/cyrz/5212.html