`
ningzhisheng
  • 浏览: 12265 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程11 CSS的属性缩写

CSS 
阅读更多
一些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基础教程属性篇之二

    除了可以单独设置每个边的宽度、颜色和样式,还可以通过简写属性一次性设置所有边框,如`border: color width style;`。如果只想设置某一边的属性,可以使用`border-top`、`border-right`、`border-bottom`和`border...

    css3属性选择器,背景缩写

    在CSS3中,属性选择器和背景缩写是两个重要的概念,它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。 首先,让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和...

    CSS3动画属性边框属性等

    本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...

    css属性详解说明,css属性详解说明

    - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { background: #ff0000 url(images/bg.jpg) no-repeat center top; } ``` - **...

    前端教程:29 CSS属性的简写

    千锋Web前端教程_29_CSS属性的简写

    CSS初级教程,ppt,....

    - **CSS的含义**:CSS是Cascading Style Sheets的缩写,"层叠"的概念意味着样式可以从多个来源继承并合并,允许有优先级的样式覆盖。 #### 第二节:使用CSS的优势 - **CSS是Web设计的革命**:它将内容与表现分离,...

    css背景属性案例

    ### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...

    css中margin的缩写

    ### CSS中的Margin属性及其缩写规则 在网页设计与开发中,CSS(层叠样式表)扮演着极其重要的角色,它能够帮助开发者控制网页元素的布局、颜色、字体等样式。其中,`margin`属性是CSS中最常用的一个属性之一,用于...

    纯css3 transition动画过渡属性制作鼠标悬停图片标题

    `transition`属性是一个简写属性,用于设置四个相关的属性:`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。这四个属性共同定义了元素从一个样式变换到另一个...

    CSS-CSS属性速查表

    `abbr`属性用于设置或获取元素的缩写文本,常用于解释缩写词或术语的全称,改善网页的可读性和语义性。 #### accelerator `accelerator`属性用于设置或获取表明对象是否包含快捷键的字符串,有助于提高用户界面的...

    div css教程TOP排行榜或新闻列表最标准div css样式表代码写法

    本教程将深入讲解如何使用`div`和`css`来创建一个高质量的“TOP排行榜”或“新闻列表”的样式表代码。 1. **理解Div元素**: `div` 是 "division" 的缩写,是一个块级元素,意味着它默认占据整个宽度并换行显示。`...

    CSS和JavaScript标签style属性对照表

    `font`属性是一组属性的简写,包括`font-family`、`font-size`、`font-style`、`font-variant`和`font-weight`,分别定义字体、字号、风格、变体和粗细。在JavaScript中,这些属性名保持一致,只是大小写不同。 **...

    常用css缩写语法总结

    更进一步,`border-radius`属性用于设置圆角,也是CSS缩写的一个例子,它可以一次性定义所有四个角的圆角半径,或者单独设置每个角。 通过上述的CSS缩写语法,我们可以减少代码量,提高代码可读性,同时使得维护...

    xhtml—css教程

    ### XHTML—CSS 教程知识点总结 #### 一、XHTML 概述 **1.1 什么是 XHTML?** XHTML 是 **The Extensible HyperText Markup Language** 的缩写,意为可扩展超文本标记语言。它旨在取代传统的 HTML,通过增强 ...

    CSS教程(含DIV+CSS布局大法)

    "Cssjc"可能是某个CSS相关的术语或者项目缩写,具体含义未明确,可能需要查看文件内容才能了解详细信息。它可能是一个CSS实践案例集,或者是一个CSS工具或框架的名称。 总的来说,这个压缩包文件提供了一个全面学习...

    CSS3 calc()会计算属性详解

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加(+)、...

Global site tag (gtag.js) - Google Analytics