简化常用的CSS属性代码,让你的CSS更精简清晰

简化CSS属性代码,可以让CSS文件体积变得更小,读取速度更快,可维护性更高.

下面分别示例最常用的一些CSS属性代码的简化方法:

margin
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为:margin:1px

margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为:margin:1px 2px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为:margin:1px 2px 3px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为:margin:1px 2px 3px 4px
当属性值是0的时候单位可以不写如:0px 直接就写成0
 
padding
padding的书写方法和margin一样,在此就不多叙述
 
border
border-width:1px;
border-style:solid;
border-color:#000000;
代码简化为:border:1px solid #000

background
background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px 4px;
代码简化为:background:#CFF url(图片路径)  repeat-x 5px 4px

font
font-size:26px;
font-weight:bold;
font-family: “宋体”;
代码简化为:font:26px bold “宋体”

color属性值
color:#000000;
color:#ff0000;
代码简化为:color:#000, color:#f00

时间: 2024-11-17 19:27:18

简化常用的CSS属性代码,让你的CSS更精简清晰的相关文章

jQuery入门(17) 读写HTML元素的css属性

jQuery 的css()方法用来设置或读取HTML元素的css属性. 读取元素的CSS语法语法如下: css("propertyname"); 比如下面代码取得第一个<p>元素的背景颜色. $("p").css("background-color"); 使用下面的语法来设置HTML元素的CSS属性: css("propertyname","value"); 例如,下面代码为所有<p>

jQuery 设置 CSS 属性示例介绍

 设置指定的CSS属性或设置多个CSS属性,下面有个不错的示例,大可以参考下 设置 CSS 属性    如需设置指定的 CSS 属性,请使用如下语法:  代码如下: css("propertyname","value");    下面的例子将为所有匹配元素设置 background-color 值:  实例  代码如下: $("p").css("background-color","yellow");   

深入理解CSS属性值语法

万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用.如果你曾看过 CSS 规范,你可能已经见过这套语法了.就像 border-image-slice 的语法 ,让我们看看: <'border-image-slice'> = [<number> | <percentage>]{1,4} && fill? 如果你不知道这些符号以及它们如何工作的话,这套语法可能非常难理解.然而,这值得花时间来学.如果你理解 W3C

CSS教程:编写易于管理的css

越来越多的大型网站开始关注.使用css,对于管理多个复杂css文件显然是有异议的.下面是二系列内容中的第一部分,第一部分我们关注对于管理样式的观点,并在其基础上总结出可行的方案.第二部分我们将对以上结论进行对比.强大的css技术最近几年已经被广泛推广了.感谢Wired redesign(以及后来的high profile redesigns-,更多组织)和CSS Zen Garden(禅意花园).除此之外,有越来越多的设计师加强了对于css的学习,并通过学习让工作更容易.简单,或者他们本身就是?

优化代码:网页技术CSS的font属性的缩写的技巧

css|技巧|网页|优化 优化代码:网页技术CSS的font属性的缩写的技巧,缩写有利于减少代码,优化CSS,使之更加合理. css font属性是用来控制文字字体.颜色.大小等.而font的属性有多种,在通常情况下,我们用缩写的办法将多种属性概括在一句css代码中.这样极大的减小了代码,优化css文件. 我们常用的font属性有下面这六种: font-style设定斜体 如:font-style: italic;font-weight设定文字粗细 如:font-weight: bold;fon

5个最常用的经典css属性教程

下面介绍我们在编写网站CSS样式时,最常用的几个CSS属性,掌握它们是必须的! 1.CSS Clip Clip属性就像一个面罩.它允许你在掩盖矩形元素的内容.要剪辑一个元素:你必须指定position为absolute.然后,指定相对于元素的top,right,bottom,和left的值.图像剪辑实例(演示) 下面的示例将演示如何使用clip属性掩盖图片.首先,指定<div>元素position:relative.然后,指定<img>元素position:absolute和相应的

c#后台修改前台DOM的css属性示例代码

本文为大家详细介绍下如何使用c#修改前台DOM的css属性,具体示例如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助   <div id = 'div1' runat="server">haha</div> ----------- 后台代码中这样调用 div1.Style["display"]="inline"; 注意,c#中要用双引号. using System.Web.UI.WebControls;得引入这个命名空间

js获取某元素的class里面的css属性值代码_javascript技巧

用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下:   js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,

样式表概述:CSS实用代码介绍

css|样式表 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工