网站制作之什么是CSS语言之“css属性”（三）

当前位置：

主页

网站制作资讯

建站行业资讯

网站制作之什么是CSS语言之“css属性”（三）

发布时间：2018-08-31

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

深圳网站制作接上篇文章《网站制作之什么是CSS语言？之“如何使用css语言”（二）》继续分析网站制作语言css属性。

一、静态网站制作知识之CSS属性

CSS属性众多，在W3CCSS2.0版本中共有122个标准属性（http://www.w1.org/TR/CSS2/propidx.html），在W3CCSS2.1版本中共有115个标准属性（http://www.w1.org/TR/CSS21/propidx.html），其中删除了CSS2.0版本中的7个属性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3CCSS1.0版本中又新增加了20多个属性（http://www.w1.org/Style/CSS/current(-?)work#CSS3）。CSS属性被分为不同的类型，如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。关于CSS属性的详细列表和用法可以参阅CSS参考手册。CSS属性的名称比较有规律，且名称与意思紧密相连，根据意思记忆属性名称是一个不错的方法。

【示例】任何元素都可以包括外边距、边框、内边距、宽和高等。用英文表示就是margin（外边距，或称为边界）、border（边框）、padding（内边距，或称为补白）、height（高）和width（宽），还有background（背景），如图

所示。上图CSS盒模型属性外边距按方位又可以包含margin-top、margin-right、margin-bottom、margin-left共4个分支属性，分别表示顶部外边距、右侧外边距、底部外边距和左侧外边距。内边距也可以包含padding-top、padding-right、padding-bottom、padding-left、padding属性。边框可以分为边框类型、粗细和颜色，因此可以包含border-width、border-color和border-style属性，这些属性又可以按4个方位包含很多属性，例如，border-width属性又分为border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性。

二、静态网站制作之CSS属性值

1．颜色值颜色值包括颜色名、百分比、数值和十六进制数值。

☑　使用颜色名是最简单的方法。虽然目前已经命名的颜色约有184种，但真正被各种浏览器支持，并且作为CSS规范推荐的颜色名称只有16种，如表1.1所示。不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

☑　使用百分比。这是一种最常用的方法，例如：color:rgb(100%,100%,100%);这个声明将红、蓝、绿3种原色都设置为最大值，结果组合显示为白色。相反，可以设置rgb(0%,0%,0%)为黑色。3个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。

☑　使用数值。数值范围从0到255，例如：color:rgb(255,255,255);上面这个声明将显示白色，相反，可以设置为rgb(0,0,0)将显示黑色。3个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。

☑　十六进制颜色。这是最常用的取色方法，例如：color:#ffffff;其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用RGB来描述：color:#RRGGBB;从0到255，实际上十进制的255正好等于十六进制的FF，一个十六进制的颜色值等于3组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。

2．绝对单位绝对单位在网页中很少使用，一般多用在传统平面印刷中，但在特殊的场合使用绝对单位是很必要的。绝对单位包括英寸、厘米、毫米、磅和pica。

☑　英寸（in）：是使用最广泛的长度单位。

☑　厘米（cm）：生活中最常用的长度单位。

☑　毫米（mm）：在研究领域使用广泛。

☑　磅（pt）：在印刷领域使用广泛，也称点。CSS也常用pt设置字体大小，12磅的字体等于六分之一英寸大小。

☑　pica（pc）：在印刷领域使用，1pica等于12磅，所以也称12点活字。

3．相对单位相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置，以及相关元素的大小等多种因素影响。

☑　emem单位表示元素的字体高度，它能够根据字体的font-size属性值来确定单位的大小。

【示例1】下面样式代码中，一个em等于font-size的属性值，如果设置font-size:12pt，则line(-?)height:2em就会等于24pt。

p{/*设置段落文本属性*/font-size:12px;

line-height:2em;/*行高为24px*/}

【示例2】如果设置font-size属性的单位为em，则em的值将根据父元素的font-size属性值来确定。<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<styletype="text/css">

#main{font-size:12px;}

p{font-size:2em;}/*字体大小将显示为24px*/

</style>

</head>

<body>

<divid="main">

<p>em相对长度单位使用</p>

</div>

</body>

</html>

同理，如果父对象的font-size属性的单位也为em，则将依次向上级元素寻找参考的font-size属性值，如果都没有定义，则会根据浏览器默认字体进行换算，默认字体一般为16px。☑　exex单位根据所使用的字体中小写字母x的高度作为参考。在实际使用中，浏览器将通过em值除以2得到ex值。☑　pxpx单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的px单位所显示出来的效果截然不同。实际设计中，建议网页设计师多使用相对长度单位em，且在某一类型的单位上使用统一的单位。如设置字体大小，根据个人使用习惯，在一个网站中，可以统一使用px或em。4．百分比百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为500px，子元素的宽度为50%，则子元素的实际宽度为250px。百分比可以取负值，但在使用中受到很多限制。

深圳网站制作关于css属性的经验分享，本文就到此结束，我们会继续定期更新静态网站制作经验，如果您认为本站对您的工作有帮助，敬请持续关注本站相关文章。博纳网络编辑整理。

当前文章链接：/construction/jzhyzx/1292.html

上一篇：网站制作之什么是CSS语言？之“如何使用css语言”（二）下一篇：网站制作之什么是CSS语言之“CSS选择器”（四）

返回列表