编写高质量css代码

编写高质量css代码nullnull编写高质量CSS代码肖兴null目录一、高质量的HTML 二、高质量的CSSnull一、高质量的HTML 1 标签的语义 2 为什么使用语义标签 3 如何确定你的标签语义良好 4 语义标签化应注意的一些其他问题 null1 标签的语义 null2 为什么使用语义化标签传统的table布局网页的特点： 1 代码量大，机构混乱； 2 标签语义不明确，对搜索引擎不友好 div+css布局网页特点：代码减少、结构精简、语义清晰 nul...

nullnull编写高质量CSS代码肖兴null目录一、高质量的HTML 二、高质量的CSSnull一、高质量的HTML 1 标签的语义 2 为什么使用语义标签 3 如何确定你的标签语义良好 4 语义标签化应注意的一些其他问题 null1 标签的语义 null2 为什么使用语义化标签传统的table布局网页的特点： 1 代码量大，机构混乱； 2 标签语义不明确，对搜索引擎不友好 div+css布局网页特点：代码减少、结构精简、语义清晰 null2 为什么使用语义化标签因为css很强大,所以我们无论有没有按照语义选择标签，我们都可以通过CSS实现设计。所以，如果我们使用不当，容易陷入CSS布局的一个误区------只要不尺table布局，只要通过css布局就是对的，就是符合web 标准的。 CSS布局只是web标准的一部分。在，HTML、CSS、javascript这三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定HTML，确定语义的标签，再来选择使用合适的CSS。 null3 如何确定你的标签是否语义良好浏览器会默认的根据标签的语义给定一个默认的样式。判断标签语义是否良好的一个简单方法就是：去掉样式，看网页结构的组织是否有序，是否仍然有很好的可读性。null3 如何确定你的标签是否语义良好 null4 语义标签化应注意的一些其他问题 a 尽可能少的使用无意义的div和span； b 在语义不明显，既可以用p也可以用div的地方，尽可能用p，因为p默认上下有间距，去掉样式后的可读性更好，对兼容特殊终端有利； c 不用使用纯样式的标签，例如b、font 和u等，改变css设置。语义上需要强调的文本可以包在strong或者em标签里，strong和em有强调的语义，其中strong的默认样式是加粗，而em的默认样式是斜体。 null二、高质量的CSS 1 如何组织CSS 2 推荐的base.css 3 低权重原则 4 模块化CSS 5 CSS的常见问题 null1 如何组织CSS CSS的能力分为两部分： 1 CSS的API ：重点是如何用CSS控制页面内元素的样式； 2 CSS的框架：重点是如何对CSS进行组织 null1 如何组织CSS 作者推荐一种css的组织方法： null1 如何组织CSS 1 base层：这一层是三者的最底层，会被所有页面引用，是页面样式所依赖的最底层。 2 common层：提供组件级的CSS类。我们可以把页面内的元素拆分成一个小块一个小块的功能和样式相对独立的模块，这些模块中有一部分是要大量重复使用的可以视为一个模块。一个网站只有一个common层，但是可以根据功能划分放在诸如：common_form.css、common_imagelist.css的多个文件中根据网站规模决定。 2 page层：非高度重用的模块放在page层。page层位于最高层，提供页面级的样式。 null2 推荐的base.css base.css文件可以分为两大部分： 1 CSS reset ：更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。 2 通用原子类:通用原子类是一系列常用的基本类，包括：文字，定位，长款和边距。表现为通用性和原子性。通用性顾名思义就是网站最常用的类。原子性表现为最基础的类，一个类只设置一个样式，可不再分。 null3 低权重原则----避免滥用子选择器 CSS的选择符是有权重的，当不同选择符的样式设置有, 突的时候，会采用权重高的选择符设置的样式。权重规则：HTML的标签权重是1，class的权重是10，id的权重是100.例如：p的权重是1，”div em”权重是1+1=2，如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式 null3 低权重原则----避免滥用子选择器为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低。 null4 模块化CSS---在CSS中引入面向对象编程思想 A 划分模块----单一职责 B CSS的命名---命名空间的概念化 C 挂多个class还是新建class---多用组合，少用继承 null4 常见问题（一）解决超级链接访问后hover样式不出现的问题：同时设置了a:visited和a:hover的样式一旦超级链接访问后，hover的样式不在出现是visited和hover的顺序放反了。 A标签的四种状态的排序问题，有个简单的原则，叫love hate l(ink)ov(visited)eh(over)a(active)te null4 常见问题（二） IE6下插入png图片： style=“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png图片路径',sizingMethod='image'); null THE END THANK YOU

                    本文档为【编写高质量css代码】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

编写高质量css代码

你可能还喜欢