`
friend365
  • 浏览: 56382 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

网页标准化:CSS代码缩写精简实例!

CSS 
阅读更多
一些CSS属性允许使用一串值代替许多属性,值使用空格分开。
  margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。

  所以下面的代码:

p {
  border-top-width: 1px;

  border-right-width: 5px;

  border-bottom-width: 10px;

  border-left-width: 20px;}

  可以写成:

p {
  border-width: 1px 5px 10px 20px;}

  border-width,border-color,border-style同样可以合并到一起,例如:

p {
  border: 1px red solid;}

  (同样可以运用到border-top,border-right等等)

  如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

  字体属性同样可以使用font属性合并。

p {
  font: italic bold 1em/1.5 courier;}

  (上面"/1.5"是line-height的值)

  把它们总结在一起,试下下面的代码:

p {
  font: 1em/1.5 "Times New Roman", times, serif;

  padding: 3em 1em;

  border: 1px black solid;

  border-width: 1px 5px 5px 1px;

  border-color: red green blue yellow;

  margin: 1em 5em;}

 建议大家使用缩写形式,促进CSS代码的精简、优化!
分享到:
评论

相关推荐

    DIV+CSS布局

    1. **代码精简**:采用DIV+CSS布局方式,能够大大减少HTML代码量,提高页面加载速度,节省带宽资源。 2. **搜索引擎友好**:结构化的HTML代码更有利于搜索引擎抓取内容,从而提高网站排名。 3. **易于维护**:只需...

    CSS缩写6个图例总结

     CSS缩写的意义已经不是一次进行阐述了,归纳起来有两点:一是面对编码者是精简而便于修改,二是对于访问者会下载体积更小的文件。其益处不言而喻,在Webjx.Com收藏CSS经典技巧之三的最后一条,也特别强调了CSS缩写...

    css样式表使用参考手册

    手册以最新的CSS标准为基础,包含了大量的实例和注释,使读者能够快速理解和运用各种CSS属性。 一、CSS基础 CSS是Cascading Style Sheets的缩写,用于分离HTML或XML(包括如SVG、MathML等各种XML方言)文档的内容...

    CSS命名规范

    - **SMACSS(Scalable and Modular Architecture for CSS)**:一种模块化的CSS架构,强调根据用途划分CSS为五种类型:Base、Layout、Module、State和Theme。 #### 3. 实践案例解析 给定文件中提到了一些具体的...

    html注册登录页面精简版.zip

    HTML是HyperText Markup Language的缩写,是一种用于创建网页的标准标记语言。在互联网应用中,登录和注册页面是用户交互的重要部分,它们为用户提供身份验证和账户管理的入口。在这个"html注册登录页面精简版.zip...

    venerarecipes

    6. **CSS模块化和重用**:为了提高代码组织和复用性,开发者可以使用CSS模块系统,如CSS Modules或者CSS-in-JS。"venerarecipes"可能提供了如何实现CSS模块化的实践方法。 7. **响应式设计**:随着移动设备的普及,...

    Portfolio-2015:我的个人投资组合..需要更新

    6. 示例项目或代码片段:可能包含作者完成的项目实例或代码段,以体现其编程能力。 7. Icon或favicon文件:用于浏览器标签和书签的图标。 8. 数据库文件:如果投资组合涉及到动态数据,可能有SQLite或JSON等数据存储...

    手机wap源码模板 (192).zip

    为了在移动网络环境下提供快速加载,源码可能进行了图片压缩、代码精简、延迟加载等优化。 8. **可扩展性**: 良好的源码模板应该具有良好的可扩展性,方便添加新的功能或页面,适应未来的需求变化。 通过解压并...

    失去树冠:MUSA实践

    【失去树冠:MUSA实践】是一篇关于网络开发中前端技术的应用实例,主要涉及到HTML这一基础网页构建语言。在互联网领域,"树冠损失"可能是指网站结构或页面元素的优化问题,它可能影响到用户的浏览体验以及搜索引擎的...

    Updated-Portfolio

    在标签中提到了"HTML",这是HyperText Markup Language的缩写,是用于创建网页的标准标记语言。HTML允许开发者构建结构化的文档,通过标签来定义不同的内容元素,如标题、段落、图片和链接等。了解HTML是任何网页...

    angular-flow-homework

    这个"angular-flow-homework"项目是一个基础的Angular种子项目,它包含了构建应用程序所需的基本结构,且依赖项被精简到了最低程度,非常适合初学者学习和实践。 1. **安装与启动** 在开始之前,确保已经安装了...

    STM32F10xxx参考手册

    目录 1 文中的缩写 24 1.1 寄存器描述表中使用的缩写列表 24 1.2 术语表 24 1.3 可用的外设 24 2 存储器和总线构架 25 2.1 系统构架 25 2.2 存储器组织 27 2.3 存储器映像 28 2.3.1 嵌入式SRAM 29 2.3.2 位...

Global site tag (gtag.js) - Google Analytics