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

10、CSS的属性缩写

    博客分类:
  • CSS
阅读更多
  一些CSS属性允许使用一串值代替许多属性,值使用空格分开。

  margin,pdding和border-width允许合并 margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
  所以下面的:
p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

  可以写成:
p {
    border-width: 1px 5px 10px 20px;
}

  border-width,border-color,border-style同样可以合并到一起,例如:
p {
    border: 1px red solid;
}

  (同样可以运用到border-top,border-right等等)
  如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

  字体属性同样可以使用font属性合并。
p {
    font: italic bold 1em/1.5 courier;
}

  (上面"/1.5"是 line-height的值)
  把它们总结在一起,试下下面的代码:
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属性详解说明,css属性详解说明

    ### CSS属性详解 #### 背景属性 (Background Properties) **1. background** - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { ...

    css3属性选择器,背景缩写

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

    CSS-CSS属性速查表

    ### CSS属性速查表:详尽解读与应用 #### !important `!important`是一个用于增强CSS规则优先级的关键字,当与样式属性值结合使用时,它将提高该属性值在层叠中的权重,使其优先于其他同名属性值。 #### :active `...

    css中margin的缩写

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

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

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

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

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

    css背景属性案例

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

    CSS3动画属性边框属性等

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

    CSS属性编写顺序及命名规范

    ### CSS属性编写顺序及命名规范 #### 一、书写顺序 在编写CSS时,遵循一定的属性书写顺序不仅可以提高代码的可读性,还能方便后期维护。以下是一般推荐的顺序: 1. **定位**:包括`position`, `z-index`, `left`,...

    CSS属性简写和选择器的优先级问题

    首先,让我们探讨CSS属性简写。简写属性是一种减少CSS代码冗余的方式,通过在一个声明中指定多个相关属性,而不是为每个属性单独写一行。以下是一些常见的简写属性: 1. `font`属性:允许你同时设置字体样式、大小...

    css属性大全双文件下载

    CSS属性大全双文件下载 CSS背景属性是CSS中最重要的属性之一,它控制着元素的背景样式。以下是CSS背景属性的详细介绍: 1. background:简写属性,作用是将背景属性设置在一个声明中。 2. background-attachment:...

    css常用属性

    下面我们将深入探讨在描述中提到的一些常用CSS属性。 字体属性: `font-size` 用于定义字体的大小,可以使用像素(PX)或其他相对单位如em、rem等。例如:`font-size: 16px;`。 `line-height` 设置行高,同样可以...

    常用css缩写语法总结

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

    关于css属性的详细列表

    在本文中,我们将深入探讨一些常见的CSS属性及其用途。 首先,注释是CSS代码中非常重要的一部分,`/*...*/` 用于添加解释性文字,对其他开发者理解代码有帮助。 `azimuth` 属性已过时,它用于设置声音源的方向,但...

    Fabulous 为 Visual Studio Code 编辑器引入一个 CSS 属性编辑器的功能

    【Visual Studio Code与Fabulous CSS属性编辑器】 Visual Studio Code(VS Code)是Microsoft开发的一款免费、开源且跨平台的代码编辑器,受到广大开发者喜爱。它拥有丰富的功能,包括语法高亮、智能代码补全、内置...

    CSS属性列表.pdf

    **其他CSS属性** - `overflow`: 控制元素溢出内容的行为,可以设置为`visible`(默认,内容会溢出)、`hidden`(内容会被裁剪)、`scroll`(显示滚动条)或`auto`(根据需要显示滚动条)。 - `rotation`和`rotation...

    常用css属性汇总大全

    下面将详细阐述在给定的标题和描述中提到的一些常用CSS属性。 1. **字体属性**: - `font-size`:设置字体大小,可以使用像素(PX)、百分比(%)等单位。 - `font-style`:定义字体样式,如`italic`为斜体,`...

    常用CSS属性总结.doc

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

Global site tag (gtag.js) - Google Analytics