首页 > 网站建设 >

网站制作之什么是CSS语言之“CSS语言特性”

发布时间:2018-09-04 作者:深圳网站制作

 深圳网站制作公司就制作静态网站的基础语言以及语法在前几篇文章中,做了一些简单介绍,今天我们继续分享静态网站制作的语言css的特性。

一、静态网站制作语言之CSS特性
  CSS样式遵循3个基本规则:继承性、层叠性和特殊性,这些规则确保CSS样式能够准确、高效地发挥作用。CSS继承性最典型的应用就是在body元素中定义整个页面的字体大小、字体颜色等基本页面属性,这样包含在body元素内的其他元素都将继承该基本属性,以实现页面显示效果的统一。

静态网站制作语言css属性【示例1】启动Dreamweaver,新建文档,保存为test.html。切换到代码视图下,在<body>标签中输入下面HTML代码:然后,在<head>标签中输入<styletype="text/css">标签,定义一个内部样式表。接着,在内部样式表中输入下面CSS代码,定义一个标签样式,在body上定义字体大小为12像素,通过继承性,包含在body元素的所有其他元素都将继承该属性,并设置包含的字体大小为12像素。
body{font-size:12px;}
最后,保存文档,按F12键,在浏览器中预览,则显示效果如图
1示。灵活利用CSS继承性,可以优化CSS代码,节省开发时间,但是继承也有其局限性。首先,有些属性是不能继承的。例如,background属性用来设置元素的背景,它是没有继承性的。实际上它也不应该有继承性,如果所有包含元素都继承了背景属性,那么文档看起来就会很怪异。CSS强制规定部分属性不具有继承特性,分类说明如下:
 
☑ 边框属性。
☑ 边界属性。
☑ 补白属性。
☑ 背景属性。
☑ 定位属性。
☑ 布局属性。
☑ 元素宽高属性。继承是非常重要的,使用它可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有元素都大量继承样式,那么判断样式的来源就会变得很困难。一般对于字体、文本类属性等涉及网页中通用属性可以使用继承。例如,网页显示字体、字号、颜色、行距等可以在body元素中统一设置,然后通过继承影响文档中所有文本。下级标签通过继承性获取上级对象的样式,但是这些样式影响力是非常弱的,如果元素本身包含了相冲突的样式,则将忽略继承得来的样式。对于相同CSS起源来说,不同位置的样式其优先级也是不同的:一般来说,行内样式会优先于内嵌样式表,内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。

静态网站制作css语言属性【示例2】在下面示例中,分别在p元素行内定义一个内嵌属性样式(style="font-size:14px"),然后在文档的头部定义一个内部样式p{font-size:24px;},最后在外部样式表文件(style1.css)中定义一个外部样式p{font-size:36px;},并利用<link>标签链接到文档中。在浏览器中预览,则根据CSS样式的优先级,最终显示结果为14像素,显示效果如图1.20所示。
< html> < head> < meta http- equiv=" Content- Type" content=" text/ html; charset= utf- 8" /> < title> 示例 代码</ title> < style type=" text/ css"> p {font- size: 24px;} </ style> < link href=" style1. css" rel=" stylesheet" type=" text/ css" /> </ head> < body>
<pstyle="font-size:14px">段落文本</p></body></html>

对于常规选择器它们都拥有一个优先级加权值,说明如下。
☑ 标签选择器:优先级加权值为1。
☑ 伪元素或伪对象选择器:优先级加权值为1。
☑ 类选择器:优先级加权值为10。
☑ 属性选择器:优先级加权值为10。
☑ ID选择器:优先级加权值为100。
☑ 其他选择器:优先级加权值为0,如通配选择器等。然后,以上面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是:
☑ 统计选择器中ID选择器的个数,然后乘以100。
☑ 统计选择器中类选择器的个数,然后乘以10。
☑ 统计选择器中的标签选择器的个数,然后乘以1。依此方法类推,最后把所有加权值数相加,即可得到当前选择器的总加权值,最后根据加权值来决定哪个样式的优先级大。
深圳网站制作公司编辑整理,全文未完,如果您认为本文对您有帮助,敬请持续关注本站。
 
文章标题:网站制作之什么是CSS语言之“CSS语言特性”
本文地址:https://www.198bona.com/news/1311.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯