标签:两种 cas nbsp 设定 meta font 网页 utf-8 设备
CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准
CSS的主要作用:
css的版本介绍
css1:发布于 1996年12月17 日,制定了css的基本显示样式标准,如选择器、字体、颜色、背景、布局等。
css2:发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持,同时扩展了选择器的语法以及定位功能。
css3:在css2基础上增加了更多的属性,更多单位,扩展了动画、2d与3d转换功能。(此版本至今已经很完善,但少量属性仍在调整中)。
为html标签引入css样式有如下几种方式:
内联样式表
也叫内嵌式或行内式,在html代码中嵌入css样式,只对当前标签起作用。
基本语法
1 <div style=“color:yellow;background:red”></div>
缺点分析:无法对对一组标签进行样式渲染导致css程序多,html与css耦合,影响开发效率与执行效率。(不推荐使用)
嵌入样式表
也叫页内样式,在网页上使用style标签包裹样式代码。
基本语法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"><!--使用style标签包裹--> 7 .container{/*选择器*/ 8 background: red;/*定义属性、值*/ 9 } 10 </style> 11 </head> 12 <body> 13 <div class="container">这是一个div容器</div> 14 </body> 15 </html>
缺点分析:html文件中包含大量css程序,页面结构与样式耦合,不利于维护。(不推荐使用)
外联样式表
也叫外部样式,将样式文件独立的编写在样式文件中,在html中显示的声明引入样式文件。(建议使用)
引入css文件声明
1 <head> 2 …… 3 <link href=" href="css/04test.css" rel="stylesheet" type="text/css" /> 4 …… 5 </head> 6 <!-- 7 link元素:连接元素,是head标签的子标签。 8 href:设定引入外部文件的路径url。 9 type:设置或获取对象的 MIME 类型。 10 -->
导入样式表
在css编写容器中使用@import导入外部css文件
1 <style type="text/css"> 2 @import url(“css/04test.css"); 3 </style> 4 <!-- 5 @import:导入样式的规则关键字。 6 url(“css路径”):导入外部css文件的路径。 7 -->
编写方式的基本原则:
调试方式:
通过开发人员选项进行调试(快捷键F12)。如下为两种最长出现的 错误:
1、部分样式无法渲染
原因分析:在css文件中出现语法错误,导致浏览器中断执行。
解决方案:通过半数删除的方式定位错误语法。
2、布局样式错乱
原因分析:在css文件某一个子元素尺寸定义错误,导致布局错乱。
解决方案:通过开发人员选项或检查元素的方式,逐一查看各个元素的大小。
标签:两种 cas nbsp 设定 meta font 网页 utf-8 设备
原文地址:http://www.cnblogs.com/-maji/p/7466771.html