`
aksoft
  • 浏览: 45171 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论

CSS简写总结

    博客分类:
  • Css
阅读更多
CSS的简写在节省代码方面虽然没有table布局改为div那么客观,不过也是一个不能忽略的方面。下面总结一下CSS的一些简写方法:

外补丁(margin)的简写:
比如:margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成:margin:10px 20px;
或者:margin:10px 20px 10px 20px;
再或者:margin:10px 20px 10px;
注意:简写后的顺序是“上-左右-下”,“上-右-下-左”,“上下-左右”

内补丁(padding)的简写:同上

颜色的简写:
比如:color:#FFFFFF
可以写成:color:#FFF
或者:color:white

边框的简写:
比如:border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成:border:1px solid :#FFFFFF;
或者写成:border:1px solid :#FFF;


背景的简写:background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以写成:background:#FFF url(background.gif) no-repeat fixed 0 0;

字体的简写:
font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:"宋体","Arial";

可以写成:font:normal bold 12px/120% "宋体","Arial";

链接统一定义:
为了避免每个链接都要给出css来定义,可以用这样的伪类来定义:
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}


用body来定义网页:
body{
  margin:0 auto;
  padding:0; border:0;
  font-size:12px; text-align:center;
  font-family: "宋体","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";
}

margin:0 auto;的意思就是网页居中,很多初学者都不知道div+css如何使网页居中,其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0,当然你特殊声明的除外。
font-family: "宋体","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";是定义网页文字的字体,默认会按照这个顺序来显示。如果出现英文的话,英文的默认字体是Arial。

不要忽视这么一点代码,如果你不注意的话,会使css文件大很多。。比如没经过简写的css有15K,那么通过简写后的CSS文件可能只有13K了。可千万别小看这2K,记住~
分享到:
评论

相关推荐

    常用css缩写语法总结

    【CSS缩写语法详解】 CSS(层叠样式表)缩写是提高代码效率和可读性的关键技巧,尤其对于初学者来说,理解并熟练运用这些缩写语法能大幅提升编写CSS的速度。本文将深入探讨CSS中常见的缩写形式,包括字体(font)、...

    常用CSS缩写语法总结

    ### 常用CSS缩写语法总结 在前端开发领域,CSS(层叠样式表)是必不可少的一部分,它用于描述HTML文档的外观和格式。为了提高代码的可读性和效率,掌握CSS的缩写语法至关重要。本文将详细介绍并总结常用的CSS缩写...

    常用CSS缩写语法总结.rar

    "常用CSS缩写语法总结"这个资料包正是对这些缩写的集中归纳,旨在帮助开发者提升编写CSS的速度和质量。 1. **简写属性(Shorthand Properties)**: - `font`: 包括`font-style`, `font-weight`, `font-size`, `...

    css通用缩写语法总结(font字体篇)

    CSS 缩写语法是CSS3中提高代码效率和可读性的重要特性,它允许开发者用更简洁的方式定义多个样式属性。在本文中,我们将重点讨论有关`font`、`margin`、`padding`以及`border`的缩写规则。 首先,让我们详细探讨`...

    网页制作之常用CSS缩写语法总结

    ### 网页制作之常用CSS缩写语法总结 在网页设计与开发的过程中,CSS(层叠样式表)是不可或缺的一部分。它不仅能够为网页添加丰富的样式,还能够提高页面的加载速度,优化用户体验。为了更好地掌握CSS,提高工作...

    css3总结文档, 一些常用的写法

    CSS3 是一种强大的样式表语言,用于描述网页或应用程序的呈现方式。在本文中,我们将深入探讨一些CSS3中常用的技术和属性,帮助你更好地理解和应用它们。 首先,我们来看看单位。`em`是一个相对单位,它基于父元素...

    css缩写的规则

    ### CSS缩写规则详解 #### 一、引言 CSS(Cascading Style Sheets)是一种用于定义HTML文档外观的语言,它让网页设计更加灵活多变。在实际开发过程中,合理运用CSS缩写规则不仅能减少代码量,提高开发效率,还能使...

    HTML-CSS学习总结

    - **缩写和简化写法**:对于某些属性,可以使用简写形式来减少重复,如`margin`、`padding`等。 - **嵌套选择器**:在更复杂的项目中,合理利用嵌套选择器可以有效组织CSS代码,提高可读性和扩展性。 - **预处理器**...

    css 常用公共样式 样式总结(持续更新)

    本文将深入探讨“css常用公共样式”的总结,包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先,让我们来谈谈`flex布局`。Flex布局,全称为 ...

    CSS代码缩写实例以及CSS缩写原因总结

    相关文章:CSS缩写6个图例总结  CSS缩写优化CSS文件的体积 比如我们在给某元素定义填充大小时,使用到padding,当对上、右、下、左填充有不同要求时,软件生成的代码可能是这样: 以下是引用片段:.t1{ p

    css3属性选择器,背景缩写

    总结来说,CSS3的属性选择器和背景缩写是提高CSS代码效率和可读性的关键工具。属性选择器提供更精细的选择元素方式,而背景缩写则让背景设置变得更加简洁。熟练掌握这两个特性,可以更好地进行网页设计和开发。

    h5+CSS3总结

    ### H5 + CSS3 总结 #### H5 基础 HTML5(HyperText Markup Language 5)是超文本标记语言 HTML 的最新版本,它不仅提供了更丰富的语义化标签,还增强了多媒体的支持能力,并引入了一系列新的功能,使得 Web 开发...

    常用CSS属性总结.doc

    以下是对常见CSS属性的总结: 1. **CSS背景属性**: - `background`:这是一个简写属性,用于设置背景颜色、图像、位置和重复方式等。 - `background-attachment`:决定背景图片是否随滚动条滚动,如`fixed`...

    3.1CSS 内容总结(一)基础.md

    ### CSS内容总结 #### 1. CSS简介 - **作用**:CSS,全称为层叠样式表(Cascading Style Sheets),是一种用来美化网页并帮助布局页面的语言。它最大的价值在于让HTML专注于做结构呈现,而将样式设计的任务交给CSS来...

    CSS缩写6个图例总结

    本文将通过CSS实例,讲解六种缩写的形式。它们分别是margin和padding、border、background、font、list和color。Webjx.Com以前也有过类似的文件,但本文的讲解更加的清晰。如果你对CSS缩写已经掌握,仅当复习,如果...

Global site tag (gtag.js) - Google Analytics