给网页用CSS排版也有三种排版样式来完成,分别是内行排版样式,内嵌排版样式和链接排版样式。在这里我就来详细介绍这三种的排版样式和每个样式的优先级进行实例比较。
工具/原料
1
HTML基础知识
2
css基础知识
方法/步骤
1传统HTML排版
首先我们来看看不用CSS来实现网页的布局,来看看传统的HTML来布局网页实现。具体代码如下:
用传统HTML来排版文件
可以看到如下图的执行效果,其实我们来看代码是不是发现这样设计的软件比较冗余,不便于阅读和修改。2传统HTML排版
用CSS来设计样式,通过使用内行排版样式来实现,具体代码如下所示。
用传统HTML来排版文件
css功能更加强大,比传统的布局有优势,按照属性属性值来写比较规范好阅读。3传统HTML排版
如果我们要将网页中所有的P标签都用同样的样式,那么就可以使用内嵌的排版样式来完成。具体的代码如下所示,
用传统HTML来排版文件
可以看到在内行排版上的一个优化,是的代码根据便于阅读和简洁了。4
我们在一般的大项目中经常用到的css模式是链接是排版来实现。具体的就是将CSS样式表单独的做一个文件,这里我命名为1.css,代码如下:p{ text-align:center; color:red; font-size:50px; font-weight:bold;}
5传统HTML排版
单独文件保存好了之后在HTML中用来调用,详细代码如下:
用传统HTML来排版文件
可以看到如下图的执行效果图。7传统HTML排版
既然内嵌的高于外部文件的优先级,这里再用内嵌的和内行文件比较,
用传统HTML来排版文件
用传统HTML来排版文件
可以得出内行的优先级高于内嵌的优先级。8传统HTML排版
如果在和传统HTML文件的优先级比较呢?
用传统HTML来排版文件
用传统HTML来排版文件
通过如上几步执行的结果可以发现优先级 :外部CSS文件>内嵌CSS排版>内行CSS排版>传统HTML文件排版。注意事项
合理利用CSS能使得编程效率更高
上一篇:翡翠玉器收藏需要察颜观色