一些CSS属性允许使用一串值代替许多属性,值使用空格分开。
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
所以下面的:
Example Source Code [www.52css.com]
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成:
Example Source Code [www.52css.com]
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起,例如:
Example Source Code [www.52css.com]
p {
border: 1px red solid;
}
(同样可以运用到border-top,border-right等等)
如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。
字体属性同样可以使用font属性合并。
Example Source Code [www.52css.com]
p {
font: italic bold 1em/1.5 courier;
}
(上面"/1.5"是 line-height的值)
把它们总结在一起,试下下面的代码:
Example Source Code [www.52css.com]
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代码的精简、优化!
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
所以下面的:
Example Source Code [www.52css.com]
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成:
Example Source Code [www.52css.com]
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起,例如:
Example Source Code [www.52css.com]
p {
border: 1px red solid;
}
(同样可以运用到border-top,border-right等等)
如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。
字体属性同样可以使用font属性合并。
Example Source Code [www.52css.com]
p {
font: italic bold 1em/1.5 courier;
}
(上面"/1.5"是 line-height的值)
把它们总结在一起,试下下面的代码:
Example Source Code [www.52css.com]
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代码的精简、优化!
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 744如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 685伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 723At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 836使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 758操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 954背景图片Background Images有许多属性可以操作。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 609请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 466Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 669前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 717如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 626CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 618margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1081css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
除了可以单独设置每个边的宽度、颜色和样式,还可以通过简写属性一次性设置所有边框,如`border: color width style;`。如果只想设置某一边的属性,可以使用`border-top`、`border-right`、`border-bottom`和`border...
在CSS3中,属性选择器和背景缩写是两个重要的概念,它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。 首先,让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和...
本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...
- **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { background: #ff0000 url(images/bg.jpg) no-repeat center top; } ``` - **...
千锋Web前端教程_29_CSS属性的简写
- **CSS的含义**:CSS是Cascading Style Sheets的缩写,"层叠"的概念意味着样式可以从多个来源继承并合并,允许有优先级的样式覆盖。 #### 第二节:使用CSS的优势 - **CSS是Web设计的革命**:它将内容与表现分离,...
### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...
### CSS中的Margin属性及其缩写规则 在网页设计与开发中,CSS(层叠样式表)扮演着极其重要的角色,它能够帮助开发者控制网页元素的布局、颜色、字体等样式。其中,`margin`属性是CSS中最常用的一个属性之一,用于...
`transition`属性是一个简写属性,用于设置四个相关的属性:`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。这四个属性共同定义了元素从一个样式变换到另一个...
`abbr`属性用于设置或获取元素的缩写文本,常用于解释缩写词或术语的全称,改善网页的可读性和语义性。 #### accelerator `accelerator`属性用于设置或获取表明对象是否包含快捷键的字符串,有助于提高用户界面的...
本教程将深入讲解如何使用`div`和`css`来创建一个高质量的“TOP排行榜”或“新闻列表”的样式表代码。 1. **理解Div元素**: `div` 是 "division" 的缩写,是一个块级元素,意味着它默认占据整个宽度并换行显示。`...
`font`属性是一组属性的简写,包括`font-family`、`font-size`、`font-style`、`font-variant`和`font-weight`,分别定义字体、字号、风格、变体和粗细。在JavaScript中,这些属性名保持一致,只是大小写不同。 **...
更进一步,`border-radius`属性用于设置圆角,也是CSS缩写的一个例子,它可以一次性定义所有四个角的圆角半径,或者单独设置每个角。 通过上述的CSS缩写语法,我们可以减少代码量,提高代码可读性,同时使得维护...
### XHTML—CSS 教程知识点总结 #### 一、XHTML 概述 **1.1 什么是 XHTML?** XHTML 是 **The Extensible HyperText Markup Language** 的缩写,意为可扩展超文本标记语言。它旨在取代传统的 HTML,通过增强 ...
"Cssjc"可能是某个CSS相关的术语或者项目缩写,具体含义未明确,可能需要查看文件内容才能了解详细信息。它可能是一个CSS实践案例集,或者是一个CSS工具或框架的名称。 总的来说,这个压缩包文件提供了一个全面学习...
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加(+)、...