文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

编写CSS时注意的方面有哪些

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关编写CSS时注意的方面有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

随着CSS网页布局的应用越来越广泛,但是如何才能写出高效规范的CSS代码呢,这里向大家描述一下编写CSS时注意的七个方面,主要包括使用外联样式替代行间样式或者内嵌样式,建议使用 link 引入外部样式表等内容。

编写CSS时注意的七个方面

随着CSS网页布局的应用越来越广泛,更多的CSSer开始书写CSS,如何才能写出高效规范的CSS代码呢,今天向大家介绍,必须要注意的七个方面:

一、使用外联样式替代行间样式或者内嵌样式

◆不推荐使用行间样式

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml">     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Page title - book.chinaz.com</title>     </head>       <body>     <p style="color: red"> ... </p>       </body>       </html>

◆不推荐使用内嵌样式

XML/HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">       <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Page title - book.chinaz.com</title>       <style type="text/css" media="screen">     p { color: red; }       </style>       </head>       <body>... </body>       </html>

◆推荐使用外联样式

XML/HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">     <html lang="en">     <head>       <meta http-equiv="content-type" content="text       <title>Page title - book.chinaz.com</title>       <link rel="stylesheet" href="name.css" type="text/css" media="screen" />       < /head>       <body> ... </body>       </html>

二、建议使用 link 引入外部样式表

为了兼容老版本的浏览器,建议使用 link 引入外部样式表的方来代替 @import导入样式的方式.

译者注: @import是CSS2.1提出的所以老的浏览器不支持。

@import和link在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。

关于@import和link方式的比较在52CSS.com上有几篇文章可以拓展阅读。

◆不推荐@import导入方式

XML/HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">       <html lang="en">     <head>       <meta http-equiv="content-type" content="text       <title>Page title - 52css.com</title>       <style type="text/css" media="screen">       @import url("styles.css");      </style>     </head>     <body> ... </body>     </html>

◆推荐引入外部样式表方式

XML/HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>     <meta http-equiv="content-type" content="text       <title>Page title - blog.huangchao.org</title>     <link rel="stylesheet" href="name.css" type="text/css" media="screen" />     </head>       <body> ... </body>       </html>

三、使用继承

低效率的

CSS代码

p{ font-family: arial, helvetica, sans-serif; }      #container { font-family: arial, helvetica, sans-serif; }      #navigation { font-family: arial, helvetica, sans-serif; }      #content { font-family: arial, helvetica, sans-serif; }      #sidebar { font-family: arial, helvetica, sans-serif; }      h2 { font-family: georgia, times, serif; }

高效的

CSS代码

body { font-family: arial, helvetica, sans-serif; }       body { font-family: arial, helvetica, sans-serif; }      h2 { font-family: georgia, times, serif; }

 四、使用多重选择器

低效率的

CSS代码

h2 { color: #236799; }       h3 { color: #236799; }      h4 { color: #236799; }      h5 { color: #236799; }

高效的

CSS代码

h2, h3, h4, h5 { color: #236799; }

五、使用多重声明

低效率的

CSS代码

p { margin: 0 0 1em; }      p { background: #ddd; }      p { color: #666; }

译者注: 对于十六进制颜色值,个人偏向于色值不缩写且英文字母要大写的方式.

高效的

CSS代码

p { margin: 0 0 1em; background: #ddd; color: #666; }

六、使用简记属性

低效率的

CSS代码

body { font-size: 85%; font-family: arial, helvetica, sans-serif;   background-image: url(image.gif); background-repeat: no-repeat;   background-position: 0 100%; margin-top: 1em; margin-right: 1em;   margin-bottom: 0; margin-left: 1em; padding-top: 10px;   padding-right: 10px; padding-bottom: 10px; padding-left: 10px;   border-style: solid; border-width: 1px;   border-color: red; color: #222222;

高效的

CSS代码

body { font: 85% arial, helvetica, sans-serif;   background: url(image.gif) no-repeat 0 100%;   margin: 1em 1em 0; padding: 10px;   border: 1px solid red; color: #222; }

七、避免使用 !important

慎用写法

CSS代码

#news { background: #ddd !important; }

特定情况下可以使用以下方式提高权重级别

CSS代码

#container #news { background: #ddd; }      body #container #news { background: #ddd; }

关于编写CSS时注意的方面有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯