首页 新闻资讯 论文下载 期刊大全 课题申报 学术会议
  |  客服中心  |  合作联系
搜刊网
学术热点
学术热点
行业资讯 刊社信息 职称资格 国内国际 教育资讯 政策法规 出版传媒
行业资讯
教育部：我国已成为世界高等教育第一大国
发布时间：2017-10-10 来源：中国学术期刊网 访问：

src=https://www.qikanw.com/d/file/p/2018/10-21/810c4c2ce80efdc1b714e3ccdb037a12.png /><br /> 如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们，那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实践。在 这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法，定义一些基本的方便的类，命名一些常见的页面区域等…</p> <p>在开始之前，创建一个新建文件夹并将它命名为”styles”(您也可以命名自己喜欢的名字)，然后在该文件夹下创建两个文件分别命名为“reset.css” 和 “style.css”。现在你的文件夹结构不出意外的话应该是这样的:</p> <blockquote> <p>–root<br /> |<br /> styles<br /> – reset.css<br /> – style.css<br /> |</p> </blockquote> <h3>1-单独使用一个全局CSS重设方法</h3> <p>我以Eric Meyer的重设为基础。只是去掉了其中的<strong>“ins”, “del”和 “table”</strong>，因为我实在是很少使用它们，因为某些原因又重新定义了<strong>“strong”</strong> 和 <strong>“em”</strong>，我知道您也许会有自己的方式，所以您也可以自由为自己的文件定义。写完CSS重设后，将其存储为”reset.css”。</p> <blockquote> <p>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {<br /> margin: 0;<br /> padding: 0;<br /> border: 0;<br /> outline: 0;<br /> font-size: 100%;<br /> vertical-align: baseline;<br /> background: transparent;<br /> }<br /> ol, ul {<br /> list-style: none;<br /> }<br /> blockquote, q {<br /> quotes: none;<br /> }<br /> blockquote:before, blockquote:after, q:before, q:after {<br /> content: ”;<br /> content: none;<br /> }<br /> :focus {<br /> outline: 0;<br /> }<br /> table {<br /> border-collapse: collapse;<br /> border-spacing: 0;<br /> }<br /> caption, th, td {<br /> text-align: left;<br /> font-weight: normal;<br /> }<br /> strong {<br /> font-weight: bold;<br /> }<br /> em {<br /> font-style: italic;<br /> }</p> </blockquote> <p>在这个重设文件里我去掉了<strong>“body”</strong>样式，因为通常我们在不同的项目中都会定义不同的”body”样式，所以我们将它放在style.css文件中。</p> <h3>2-在顶部为样式表添加描述注释</h3> <p>现在我们打开style.css来开始写一些基本的样式。在创建一个新样式文件(style.css)后，第一件事应该是在文件顶部写一些结构性的 注释，用来描述一些样式的细节，比如版本、作者、作者的详细联系方式等，这将帮助你和其他前端开发人员使用该文件。描述细节应当包括像作者姓名、版本和提 供更多信息的URL地址。我比较喜欢，因为它比较广泛。</p> <blockquote> <p>/*<br /> 主题名称: 玫瑰主题<br /> URI: the-theme’s-homepage<br /> 描述: a-brief-description<br /> 作者: 您的姓名<br /> 作者 URI: 您的-URI<br /> 模板: 在这里可以提示它的父级模板<br /> 版本: 版本号<br /> 彬Go-集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活<br /> 网址:http://blog.bingo929.com/<br /> */</p> </blockquote> <h3>3-定义便于搜索的目录表</h3> <p>现在，我们来一起定义我们样式的目录表。定义TOC能帮助其他人甚至自己更容易与阅读和理解代码。也许您会觉得这个没什么必要，但请相信我！</p> <p>首先让我们看看它应当是什么样子的:</p> <blockquote> <p>[目录表]<br /> 0- Reset<br /> 1- Global<br /> 2- Links<br /> 3- Headings<br /> 4- Header<br /> 5- Navigation<br /> 6- Middle<br /> 7- Forms<br /> 8- Extras<br /> 9- Footer</p> </blockquote> <p>正如您看到的，我们将目录表从0到9分成10部分。</p> <ul> <li>TOC非常简单以至于它不会花费您超过1分钟的时间。</li> <li>您不用为每个项目定义不同的TOC。</li> <li>命名的使用非常普遍，所以可以适合模本的任何部分。</li> <li>不使用动态的#ID和.class。</li> <li>它并不大所以不会占用很多Kbytes。</li> <li>顺序的数字很有用，用途请往下看。</li> </ul> <h3>4-使用注释将每个部分隔开并使用一个=标记</h3> <p>请看一下样式，在0部分我将之前的重设样式表reset.css导入。</p> <blockquote> <p>/* =0 Reset<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> @import url(’reset.css’);<br /> /* =1 Global</p> <p>–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =2 Links<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =3 Headings<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =4 Header<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =5 Navigation<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =6 Middle<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =7 Form<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =8 Extra<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =9 Footer<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/</p> </blockquote> <p>在每个部分的分区注释中使用=标记，可以帮助您和您的团队其他成员快速找到需要的代码。大家都知道，在CSS样式中的声明几乎是不会使用等号的，所 以我们可以使用等号来帮助搜索。比如你想寻找表单的相关样式代码，可以先查看目录表中表单对应的数字，然后搜索”=7″便可以快速跳转到表单的相关代码区 域。</p> <h3>5-定义最常用的类</h3> <p>其实有一些类是我们要经常使用的，那我们为什么不一次性把它们都定义好呢？现在正是时候！我添加了一些个人比较喜欢的，当然您也可以按照自己的喜好进行增删改。将它们定义在“=1 Global”下。<br /> 我还把body选择器定义在了Global中。<br /> <span><strong>注:一下定义类仅仅是比较简单的一些。</strong></span></p> <blockquote> <p>/* =1 Global<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> body {<br /> line-height: 1;<br /> font: normal 12px Arial, Helvetica, sans-serif;<br /> vertical-align: top;<br /> background: #fff;<br /> color: #000;<br /> }<br /> .right {<br /> float: right;<br /> }<br /> .left {<br /> float: left;<br /> }<br /> .align-left {<br /> text-align: left;<br /> }<br /> .align-right {<br /> text-align: right;<br /> }<br /> .align-center {<br /> text-align:center;<br /> }<br /> .justify {<br /> text-align:justify;<br /> }<br /> .hide {<br /> display: none;<br /> }<br /> .clear {<br /> clear: both;<br /> }<br /> .bold {<br /> font-weight:bold;<br /> }<br /> .italic {<br /> font-style:italic;<br /> }<br /> .underline {<br /> border-bottom:1px solid;<br /> }<br /> .highlight {<br /> background:#ffc;<br /> }<br /> img.centered {<br /> display: block;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> img.alignleft {<br /> float:left;<br /> margin:4px 10px 4px 0;<br /> }<br /> img.alignright {<br /> float:right;<br /> margin:4px 0 4px 10px;<br /> }<br /> .clearfix:after {<br /> content: “.”;<br /> display: block;<br /> clear: both;<br /> visibility: hidden;<br /> line-height: 0;<br /> height: 0;<br /> }<br /> .clearfix {<br /> display: block;<br /> }<br /> html[xmlns] .clearfix {<br /> display: block;<br /> }<br /> * html .clearfix {<br /> height: 1%;<br /> }</p> </blockquote> <h3>6-为链接和标题定义样式</h3> <p>最后，我们来定义适当的链接和标题的样式，因为他们在任何项目中都是必需的。如果你在制作某个网页，你不可能不是用它们。</p> <blockquote> <p>/* =2 Links<br /> ––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> a:link, a:visited {<br /> color: #333;<br /> }<br /> a:hover {<br /> color: #111;<br /> }<br /> a:active {<br /> color: #111;<br /> }<br /> /* =3 Headings<br /> ––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> h1 {<br /> font: bold 2em “Times New Roman”, Times, serif;<br /> }<br /> h2 {<br /> font: bold 1.5em “Times New Roman”, Times, serif;<br /> }<br /> h3 {<br /> font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;<br /> }<br /> h4 {<br /> font: bold 1em Arial, Geneva, Helvetica, sans-serif;<br /> }<br /> h5 {<br /> font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;<br /> }</p> </blockquote> <h3>style.css模板的最终代码</h3> <blockquote> <p>/*<br /> 主题名称: 玫瑰主题<br /> URI: the-theme’s-homepage<br /> 描述: a-brief-description<br /> 作者: 您的姓名<br /> 作者 URI: 您的-URI<br /> 模板: 在这里可以提示它的父级模板</p> <p>[目录表]<br /> 0- Reset<br /> 1- Global<br /> 2- Links<br /> 3- Headings<br /> 4- Header<br /> 5- Navigation<br /> 6- Middle<br /> 7- Forms<br /> 8- Extras<br /> 9- Footer<br /> */<br /> /* =0 Reset<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> @import url(’reset.css’);</p> <p>/* =1 Global<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> body {<br /> line-height: 1;<br /> font: normal 12px Arial, Helvetica, sans-serif;<br /> vertical-align: top;<br /> background: #fff;<br /> color: #000;<br /> }<br /> .right {<br /> float: right;<br /> }<br /> .left {<br /> float: left;<br /> }<br /> .align-left {<br /> text-align: left;<br /> }<br /> .align-right {<br /> text-align: right;<br /> }<br /> .align-center {<br /> text-align:center;<br /> }<br /> .justify {<br /> text-align:justify;<br /> }<br /> .hide {<br /> display: none;<br /> }<br /> .clear {<br /> clear: both;<br /> }<br /> .bold {<br /> font-weight:bold;<br /> }<br /> .italic {<br /> font-style:italic;<br /> }<br /> .underline {<br /> border-bottom:1px solid;<br /> }<br /> .highlight {<br /> background:#ffc;<br /> }<br /> img.centered {<br /> display: block;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> img.alignleft {<br /> float:left;<br /> margin:4px 10px 4px 0;<br /> }<br /> img.alignright {<br /> float:right;<br /> margin:4px 0 4px 10px;<br /> }<br /> .clearfix:after {<br /> content: “.”;<br /> display: block;<br /> clear: both;<br /> visibility: hidden;<br /> line-height: 0;<br /> height: 0;<br /> }<br /> .clearfix {<br /> display: block;<br /> }<br /> html[xmlns] .clearfix {<br /> display: block;<br /> }<br /> * html .clearfix {<br /> height: 1%;<br /> }<br /> /* =2 Links<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> a:link, a:visited {<br /> color: #333;<br /> }<br /> a:hover {<br /> color: #111;<br /> }<br /> a:active {<br /> color: #111;<br /> }<br /> /* =3 Headings<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> h1 {<br /> font: bold 2em “Times New Roman”, Times, serif;<br /> }<br /> h2 {<br /> font: bold 1.5em “Times New Roman”, Times, serif;<br /> }<br /> h3 {<br /> font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;<br /> }<br /> h4 {<br /> font: bold 1em Arial, Geneva, Helvetica, sans-serif;<br /> }<br /> h5 {<br /> font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;<br /> }<br /> /* =4 Header<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =5 Navigation<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =6 Middle<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =7 Form<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =8 Extra<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br /> /* =9 Footer<br /> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/</p> </blockquote> <h3>总结</h3> <p>感谢大家阅读本文，CSS最佳实践在某种意义上的确会对我们提供很大的帮助。它可以帮助我们节省更多的工作时间，显著提高工作效率。如果您有任何看法或建议，欢迎。</p> <h3>下载源文件</h3> <p> </p> <p>来源: 翻译：</p> <p align= 

上一篇：“好人法”10月起实施，做好人要有这些“正确姿
下一篇：20张信用卡套现凑首付?银行严查消费贷，流入楼
相关文章
大幅度降低城市气温的措施

建筑企业施工现场管理执行力影响因素实证研究

烧伤患者创面感染病原菌分布及相关危险因素分析

精准扶贫背景下财政涉农资金整合问题研究

基于NOMA的超密集网络中资源分配与计算卸载

搅拌制度对无碱液体速凝剂检测性能的影响

基于行业差异的企业社会资本投资效益研究

大学学术：偏离原点的异化与回归路径

基于嵌入式Web服务器SF6微水密度在线监测系统

滦河冲积扇三角洲的范围、类型和演化

热门资讯
《两岸关系》杂志社社长任勉来漯河调研
摘要：9月28日-29日，《两岸关系》杂志社社长任勉一行3人来漯河临颍就陈星聚杯太极拳比赛筹备工作情况进行调...
● 大幅度降低城市气温的措施
● 建筑企业施工现场管理执行力影响因素实证研究
● 烧伤患者创面感染病原菌分布及相关危险因素分析
● 精准扶贫背景下财政涉农资金整合问题研究
● 基于NOMA的超密集网络中资源分配与计算卸载
● 搅拌制度对无碱液体速凝剂检测性能的影响
● 基于行业差异的企业社会资本投资效益研究
● 大学学术：偏离原点的异化与回归路径
精品推荐
中职化学教学中渗透心理健康教育浅谈
摘要：摘 要：健康的心理素质是健康人的必备素质。在学科教学中进行心理健康的教育，是心理健康教育的重要途径...
● 大幅度降低城市气温的措施
● 建筑企业施工现场管理执行力影响因素实证研究
● 烧伤患者创面感染病原菌分布及相关危险因素分析
● 精准扶贫背景下财政涉农资金整合问题研究
● 基于NOMA的超密集网络中资源分配与计算卸载
● 搅拌制度对无碱液体速凝剂检测性能的影响
● 基于行业差异的企业社会资本投资效益研究
● 大学学术：偏离原点的异化与回归路径
热门期刊
东方药膳东方药膳
《东方药膳》杂志，于1995年经国家新闻出版总署批准正式创刊，CN:43-1461/R，本刊在国内外有广泛的覆盖面，题材新...
珞珈史苑珞珈史苑
《珞珈史苑》（年刊）2011年创刊，中文，16开，出版地：湖北省武汉市，本刊由武大历史学院不同学科的博士研究生组成编委，...
疑难病疑难病
《疑难病》杂志，于2002年经国家新闻出版总署批准正式创刊，CN:13-1316/R，本刊在国内外有广泛的覆盖面，题材新颖，...
沈阳体育学院学报沈阳体育学院学报
《沈阳体育学院学报》（双月刊）创刊于1982年，由沈阳体育学院主办。注重体育科学基础理论和应用技术的研究，鼓励...
四川警察学院学报四川警察学院学报
《四川警察学院学报》杂志，于1988年经国家新闻出版总署批准正式创刊，CN:51-1716/D，本刊在国内外有广泛的覆盖...
传动技术传动技术
《传动技术》杂志，于1987年经国家新闻出版总署批准正式创刊，CN:31-1596/TP，本刊在国内外有广泛的覆盖面，题材新...

友情链接
中教杯 国家新闻出版总署 中国知网 万方数据 维普网 中国科学院 中国国家图书馆 央视英文版 中国留学网 中青网 中国国家人才网 中国经济网 中国日报网 中国新闻网 中国学术期刊网
关于我们
平台简介
诚聘英才
企业文化
竞争优势
版权信息
服务条款
客服承诺
常见问题
版权声明
合作加盟
期刊加盟
广告服务
联系我们
网站导航
期刊大全
论文下载
课题申报
学术会议
编辑QQ
编辑联络
2007-2023
中文学术期刊检索机构
bianjibu777@qq.com
联系我们

版权所有©2007- 2023 中国学术期刊网(qikanw.com) All Rights Reserved 京ICP备2021008252号
本站是学术论文网络平台，若期刊网有侵犯您的版权，请及时与期刊网客服取得联系，联系信箱： bianjibu777@qq.com    
中国学术期刊网