文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS有哪些书写规范

2024-04-02 19:55

关注

CSS有哪些书写规范,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1.选择DOCTYPE:

XHTML1.0提供了三种DTD声明可供选择:

过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
。完整代码如下:

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

2.指定语言及字符集:

为文档指定语言:

<htmlxmlnshtmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”>

为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:

常用的语言定义:

<metahttp-equivmetahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>

标准的XML文档语言定义:

<?xmlversionxmlversion=”1.0″encoding=”utf-8″?>

针对老版本的浏览器的语言定义:

<metahttp-equivmetahttp-equiv=”Content-Language”content=”utf-8″/>

为提高字符集,建议采用“utf-8”。

3.调用CSS样式表:

外部样式表调用:

页面内嵌法:就是将样式表直接写在页面代码的head区。如:

<styletypestyletype=”text/css”><!–body{background:white;color:black;}–>style>

外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<linkrellinkrel=”stylesheet”rev=”stylesheet   "href=”css/style.css”type=”text/css”media=”all”/>

在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

4、选用恰当的元素:

根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div或者是span;

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

5、派生选择器:

可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

.mainMenuulli{background:url(images/bg.gif;)}

6、辅助图片用背影图处理:

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

#logo{background:url(images/logo.jpg)   #FEFEFEno-repeatrightbottom;}

7、结构与样式分离:

在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写:

页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

<dividdivid=”mainMenu”> <ul> <li><ahrefahref=”#”>首页a>li> <li><ahrefahref=”#”>介绍a>li> <li><ahrefahref=”#”>服务a>li> ul> div>    #mainMenu{  width:100%;  height:30px;  background:url(images/mainMenu_bg.jpg)repeat-x;  }  #mainMenuulli{  float:left;  line-height:30px;  margin-right:1px;  cursor:pointer;  }  

9、鼠标手势:

在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”

看完上述内容,你们掌握CSS有哪些书写规范的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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