初识层叠式样式表CSS
2094字,阅读需时7分钟
来自专栏
课程/专栏

CSS是什么?

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

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

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

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

CSS用什么软件来编辑?

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

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

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

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>送杜少府之任蜀州</p>
<p>城阙辅三秦,风烟望五津。</p>
<p>与君离别意,同是宦游人。</p>
<p>海内存知己,天涯若比邻。</p>
<p>无为在歧路,儿女共沾巾。</p>
</body>
</html>

image.png

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

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center; margin-top:20px;padding:0;">
<p style=" font-size:22px; font-family:微软雅黑; font-weight:bolder;">送杜少府之任蜀州</p>
<p style="font-size:18px; margin-top:30px;">城阙辅三秦,风烟望五津。</p>
<p style="font-size:18px; ">与君离别意,同是宦游人。</p>
<p style="font-size:18px; ">海内存知己,天涯若比邻。</p>
<p style="font-size:18px; ">无为在歧路,儿女共沾巾。</p>
</body>
</html>

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

image.png

 

CSS样式的继承性

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

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有