`

CSS开发中应该注意的问题

    博客分类:
  • CSS
CSS 
阅读更多

      在CSS开发中,要特别注意选择器的运用,如此才能使文档结构更清晰,更易于阅读。

      1.某一块的文档结构中包含多层标签嵌套,则应在其祖先元素上面加类或者ID,然后用后代选择器来选择不同的子元素;

      2.CSS2.1和CSS3有许多新的特性,如果IE6及更低版本不支持,浏览器会忽略整个规则,以保证向后兼容性;

      3.在用类或者ID来为元素添加样式时,遵循特殊性原则,即ID的特殊性大于类的特殊性,类的特殊性大于元素的特殊性,而元素的特殊性大于元素内置样式(如h1-h6标签)的特殊性。如此,如果同时用ID,类,元素选择器为内容添加样式,则浏览器会优先选择ID选择器所置的样式来渲染;

      4.块级元素可以通过padding、margin、border设置元素的水平及垂直的内边距、外边距和边框。行内元素则可以通过padding、margin来设置元素的水平内边距和外边距。可以通过设置行高来设置行内元素的高度;

      5.假设div1为一个具有固定高宽的浮动元素(float:left;),div2为非浮动元素,在div2上面应用clear:left;则可为div2清除左边浮动(表示div2框的左边不应该挨着浮动框);

      6.在清除浮动时,可以选择在父元素下加一个空标签来清除。但最好的解决方法是利用伪类:after来进行清除。如,.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both;};

      7.背景图像的设置,如果使用百分比设置背景图像(假设为background-position:20% 20%;),那么实际上是将图像上距离左上角20%的点定位到父元素距离左上角20%的位置(比较拗口);

      8.CSS精灵:多个服务器请求会对站点的性能造成显著的影响,将多个按钮状态图像包含在一个图像中,从而减少http请求。最终,通过设置background-position来设置按钮状态;

分享到:
评论

相关推荐

    使用HTML语言和CSS开发商业站点

    北大青鸟ACCP6.0的《使用...分别以:S1使用HTML语言和CSS开发商业站点[S1] S1使用HTML语言和CSS开发商业站点[S2] S1使用HTML语言和CSS开发商业站点[S3] S1使用HTML语言和CSS开发商业站点[S4]。希望对下载的亲们有用。

    S1使用HTML语言和CSS开发商业站点[3]

    北大青鸟ACCP6.0的《使用HTML语言和CSS开发商业站点》。资源齐全。但首先先说一句对不起,由于本人的上传权限没有足够大,所以北大青鸟ACCP6.0的课件及习题答案是分别上传的,望亲们能多注意一下。分别以:S1使用HTML...

    Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)

    注意,说了这么久,大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具,可以清理多余的CSS样式, 但是,你一定要扫描足够多的网页,尽可能地找到最多的样式。 同时,CSS Usage还提供给我们关于CSS某个选择器被...

    CSS3常用方法

    整理了一套用到CSS3的各种知识,包括各个选择器的使用,各个属性的使用,属性的区别,实际开发中需要注意的问题,以及如何解决这些问题等等

    css+div技术参考手册

    而在XML中,你应该如下例所示在声明区中加入: <? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?> 定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的和标记...

    Web前端与移动开发之css字体属性.txt

    normal正常/bold粗体/bolder特粗/lighter细体/number数字加粗 无单位 实际开发中更提倡使用数字加粗 400(不加粗)等同于normal 700(加粗)等同于bold 注意这个数字后不跟单位 4.font-style 字体样式 normal...

    CSS进阶学习资源 面试题

    CSS需要注意的事情!面试官98%会问你的问题!没学这些好意思说自己是前端开发?我就是靠这份找到了实习!

    使用HTML开发商业网站-CSS控制表格边框课件.pptx

    此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制表格样式 日历的边框border 日历的单元格边距padding height width CSS控制...

    使用HTML开发商业网站-CSS控制单元格边距课件.pptx

    此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制表格样式 th,td{ border:1px solid #30F; /*为单元格单独设置边框*/ padding...

    精通CSS+DIV样式和布局详细源码

    本书还详细讲解了其他书中较少涉及的技术细节,包括扩展CSS与JavaScript、XML和Ajax的综合应用等内容,指导读者制作符合Web标准的网页,使从事或欲从事网站设计开发专业工作的读者提升技术水平和竞争能力。...

    [精通CSS.DIV.网页样式与布局].(前沿科技).扫描版

    本书还详细讲解了其他书中较少涉及的技术细节,包括扩展CSS与JavaScript、XML和Ajax的综合应用等内容,指导读者制作符合Web标准的网页,使从事或欲从事网站设计开发专业工作的读者提升技术水平和竞争能力。...

    如何用CSS实现在新窗口打开链接?.rar

    介绍: 辛苦的完成了一个站点的开发即将交付使用了,用户提出了一个要求,希望导航或产品或其它某一类...需要注意的是:expression是在css中嵌入javascript语句执行了target="_blank",对IE5及更高版本的浏览器有效。

    nuxt-breaky:在开发过程中在Nuxtjs中显示您的Tailwind CSS断点

    使用tailwindcss 时,在Nuxtjs中显示Tailwind CSS断点 介绍 breaky可帮助您更快地创建响应式设计。它扩展了真棒的 。 breaky在您的顺风配置中读取您定义的断点,并根据您的浏览器窗口宽度显示当前活动的断点。 该...

    Css图片与Base64互转工具 v1.0.rar

    使用说明: 暂时支持.png|.jpg|.gif|.bmp格式。文件大小限制为小于或等于100KB 1.Base64数据保存到相应的图片路径中...[提示]可开发插件调用此工具,也可为css或图片文件设置右键菜单执行 支持多文件。自动筛选文件!

    使用HTML语言和CSS开发商业站点.png

    HTML5和CSS3思维导图,颜歧总结制作。其中包含HTML5和CSS3,包含概念、语法、兼容性、使用注意等多方面内容。

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    注意: 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 (1)块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③...

    CSS-Buddy, 在图层上,[INACTIVE] 一个草图 3插件,允许你使用 CSS.zip

    CSS-Buddy, 在图层上,[INACTIVE] 一个草图 3插件,...v0.0.3注意:这个插件还处于开发早期阶段。 点击这里 riiiight查看演示( gif在这一页 bogged ) 。用法安装插件后,只需在画布上选择一个图层并运行应用到选中的或

    Vue3使用css特性transform实现可视化大屏自适应解决方案

    操作:代码注释写的很详细,很容易就明白,对vue3不熟悉的小伙伴更加友好,将...PS:对于使用transform实现可视化大屏自适应方案,需要注意在缩放过程中内容区域的图片像素是否达标,否则会出现图片缩放后模糊的情况。

    CSS-Games:使用CSS和HTML开发的游戏和应用程序,无需一行JavaScript

    在每个游戏内部,不同的游戏和应用均按字母顺序组织(请注意可能有多个版本)。 代码位于这些文件夹中,下面的链接是CodePen上的实时演示。 您可以在看到其中的许多内容。 游戏类 驾驶游戏: 蛇与梯子: 井字游戏...

    CssTraining:在学习CSS期间,需要注意的事项

    在学习CSS期间,注意事项来自 待办事项:将通过成绩进行更正。 CSS-Adem ilter可扩展CSS CSS -浏览器开发人员编辑器选择 html结构内联和块元素 选择器 级联继承特异性框模型框大小调整reset.css normalize.css ...

Global site tag (gtag.js) - Google Analytics