CSS 语法的缩写规则

核心提示:使用缩写可以减少CSS文件的大小,并且更加易于阅读。本文主要介绍CSS的主要缩写规则,内容涉及到颜色、盒尺寸、边框、背景、字体、列表等方面的内容。

  使用缩写可以减少CSS文件的大小,并且更加易于阅读。本文主要介绍CSS的主要缩写规则,内容涉及到颜色、盒尺寸、边框、背景、字体、列表等方面的内容。CSS缩写的主要规则如下:

  颜色

  16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

  #000000可以缩写为#000;#336699可以缩写为#369;

  盒尺寸

  通常有下面四种书写方法:

  property:value1; 表示所有边都是一个值value1;

  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
  方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:

  margin:1em 0 2em 0.5em;

  边框(border)

  边框的属性如下:

  border-width:1px;
  border-style:solid;
  border-color:#000;

  可以缩写为一句:border:1px solid #000;

  语法是 border:width style color;

  背景(Backgrounds)

  背景的属性如下:

  background-color:#f00;
  background-image:url(background.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:0 0;

  可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

  语法是 background:color image repeat attachment position;

  你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  color: transparent
  image: none
  repeat: repeat
  attachment: scroll
  position: 0% 0%

  字体(fonts)

  字体的属性如下:

  font-style:italic;
  font-variant:small-caps;
  font-weight:bold;
  font-size:1em;
  line-height:140%;
  font-family:"Lucida Grande",sans-serif;

  可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

  注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

  列表(lists)

  取消默认的圆点和序号可以这样写list-style:none;,

  list的属性如下:

  list-style-type:square;
  list-style-position:inside;
  list-style-image:url(image.gif);

  可以缩写为一句:list-style:square inside url(image.gif);

时间: 2024-10-22 02:18:35

CSS 语法的缩写规则的相关文章

CSS 语法由三部分构成:选择器、属性和值

CSS 语法 CSS 语法由三部分构成:选择器.属性和值: selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值.属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration): body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色.在上述例子中,body 是选择器,而包括在花括

CSS教程:汇总CSS属性的缩写

高效的css写法中的一条就是使用简写.通过简写可以让你的CSS文件更小,更易读.而了解CSS属性简写也是前端开发工程师的基本功之一.今天我们系统地总结一下CSS属性的缩写. 色彩缩写 色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个: 1 color:#113366 可以简写为 1 color:#136 所有用到16进制色彩值的地方都可以使用简写,比如background-color.border-color.text-shadow.box-shadow等. 盒子

CSS语法

css|语法 1.基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value). 基本格式如下: selector { property: value} (选择符 { 属性:值}) 选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body { color: black} 选择符body是指页面主体部分,color是控制文字颜色的属性,

CSS语法手册(四)文本填充,边框,边界和位置属性(二)

css|语法 三.框边界属性 1.margin-bottommargin-leftmargin-rightmargin-top 功能:这四个属性用来设置元素与其相邻元素间的距离,可以用长度或相对于其父文本的宽度的百分比来定义,也可以自动处理.数值:长度 - 设置元素相应边与框边缘之间的相对或绝对距离,有效单位为:mm, cm, in, px, pt, pica,ex, em ...百分比 - 以父元素宽度的百分比设置边界尺寸.auto - 自动,这个设置取浏览器的缺省边界.例子 2.margin

相关表格边框的CSS语法

      表格是数据的载体,不再是布局的方式,虽然我们不需要表格来进行网页布局了,但很多表格式的数据,还是需要表格这一形式发挥它的作用!我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框.        1.上边框宽度 以下是引用片段: 语法: border-top-width: <值> 允许值: thin | medium | thick | &

表格边框的css语法

css|语法 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | mediu

表格边框的css语法整理

css|语法 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | mediu

CSS语法手册(六)分类属性

css|语法 1.display 功能:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换.数值:none - 不显示元素block - 块显示,在元素前后设置分行符inline - 删除元素前后的分行符,使其并入其它元素流中list-item - 将元素设置为清单中的一行说明:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示. 2.white-space 功能:控制元素內的空白.数值:normal - 不改变,保持缺省值,在浏览器页面长度处换行.pre - 要求文

CSS语法手册(五)颜色和背景属性

css|语法 1.color 功能:设置前景或元素的颜色.数值:使用颜色关键字或RGB值.例子: 文本颜色(关键字) 文本颜色(#rrggbb) 文本颜色[rgb(rr,gg,bb)] 文本颜色[rgb(r%,g%,b%)] 2.background-color 功能:设置页面或页面元素的背景颜色.数值:颜色 - 可用颜色名或RGB值transparent - 透明,使页面背景为缺省背景.例子: 背景颜色 3.background-image 功能:定义背景图形.数值:none - 不用图形作背