Shorthand Property in CSS

2025年1月31日 | 阅读12分钟

简写属性是 CSS 中允许同时设置多个属性值的属性。这些属性用于编写简洁易读的代码。本文将介绍 CSS 中的简写属性。

CSS 简写属性如下：

margin
border
font
padding
背景
outline
border-radius
transition
list-style
text-decoration
flex
grid-template

让我们通过示例逐一学习每个 CSS 属性。

Margin 简写属性

CSS 中的 margin 属性用于在 HTML 元素周围提供空间。我们可以在所有四个方向（即上、左、右和下）提供空间。margin 属性是给定单个 margin 属性的简写属性

margin-top
margin-right
margin-bottom
margin-left

margin-top: 它设置元素顶部的外边距。

语法

margin-right: 它设置元素右侧的外边距。

语法

margin-bottom: 它设置元素底部的外边距。

语法

margin-left: 它设置元素左侧的外边距。

语法

我们可以同时使用 margin 简写属性设置所有方向的外边距。

margin 简写属性的语法

我们可以用 px、%、cm、mm、vw、vh、in 等单位给出上、右、下和左的值。

演示

我们将使用 margin 简写属性在元素的所有方向上应用外边距。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Margin Shorthand Property</title>
<style>
    div {
      margin: 60px 45px 15px 50px;
      background-color: antiquewhite;
    }
</style>
</head>

<body>

<h2>Margin Shorthand Property</h2>

<div>This element contains a top margin of 60px, a right margin of 45px, a bottom margin of 15px and a left margin of 50px.</div>

</body>

</html>

输出

我们可以看到外边距同时应用于元素的所有方向。

Border 简写属性

CSS 中的 border 属性用于指定 HTML 元素的边框样式、颜色和宽度。border 属性是给定单个 border 属性的简写属性

border-style
边框颜色
border-width

border-style: 此属性用于设置元素四边的样式。样式值可以是 solid、dotted、dashed、double、ridge、groove、inset 和 outset。

语法

border-color: 此属性用于设置元素的颜色。

语法

border-width: 此属性用于设置元素的边框宽度。宽度值可以是 medium、thick、thin 或任何长度。

语法

这三个属性可以通过 border 简写属性一起定义。

border 简写属性的语法

border-width 的长度可以是 px、%、cm、mm、vw、vh、in 等单位。

演示

我们将使用 border 简写属性来应用边框的样式、宽度和颜色。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Border Shorthand Property</title>
<style>
    .border1 {
      border: medium dotted maroon;
      background-color: cornsilk;
    }
    .border2 {
      border: 6px double olivedrab;
      background-color: yellow;
    }
</style>
</head>

<body>

<h2>Border Shorthand Property</h2>

<p class="border1">This element contains a border with a medium border width, dotted border style and maroon border color.</p>
<p class="border2">This element contains a border with a 6px border width, double border style and yellow border color.</p>

</body>

</html>

输出

我们可以看到边框应用于类名为 "border1" 和 "border2" 的元素。

Font 简写属性

font 属性是给定单个 font 属性的简写属性

font-style
font-size
font-weight
font-variant
font-family

font-style: 它用于设置字体的样式。font-style 的值可以是 italic、normal 或 oblique。

语法

font-size: 它用于设置字体的大小。font-size 的值可以是 x-small、xx-small、small、larger、smaller、medium、x-large、xx-large 或任何长度。

语法

font-weight: 它用于设置字体的粗细。font-weight 的值可以是 bold、normal、bolder、lighter 或数字。

语法

font-variant: 它用于设置字体的变体。font-variant 的值可以是 small-caps 或 normal。

语法

font-family: 它用于设置文本的字体类型。font-family 的值可以是 Times、arial、serif、cursive、san-serif、Times New Roman、monospace 等。

语法

我们可以使用 font 简写属性同时定义每个属性。font 简写属性的语法

大小、字体、样式、变体和粗细的长度可以是 px、%、cm、mm、vw、vh、in 等单位。

演示

我们将使用 font 简写属性来应用元素的 font-style、font-variant、font-weight、font-size 和 font-family。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Font Shorthand Property</title>
<style>
    .font1 {
      font: normal small-caps bold 24px sans-serif;
      background-color: palegoldenrod;
    }
    .font2 {
      font: italic normal lighter medium arial;
      background-color: khaki;
    }
</style>
</head>

<body>

<h2>Font Shorthand Property</h2>

<p class="font1">This element contains text with a normal font-style, small-caps font-variant, bold font-weight, 24px font-size and sans-serif font-family.</p>
<p class="font2">This element contains text with an italic font-style, normal font-variant, lighter font-weight, medium font-size and arial font-family.</p>

</body>

</html>

输出

我们可以看到字体应用于类名为 "font1" 和 "font2" 的元素。

Padding 简写属性

在 CSS 中，padding 是内容和元素边框之间的可用空间。padding 属性是给定单个 padding 属性的简写属性

padding-top
padding-bottom
padding-left
padding-right

padding-top: 它用于定义元素的顶部内边距。

语法

padding-bottom: 它用于定义元素的底部内边距。

语法

padding-left: 它用于定义元素的左侧内边距。

语法

padding-right: 它用于定义元素的右侧内边距。

语法

我们可以通过使用 padding 简写属性同时从所有方向应用内边距。

padding 简写属性的语法

我们可以用 px、%、cm、mm、vw、vh、in 等单位定义上、右、下和左的长度。

演示

我们将使用 padding 简写属性在所有方向上应用内边距。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Padding Shorthand Property</title>
<style>
    .padding1 {
      padding: 25px 50px 59px 36px;
      background-color: plum;
    }
    .padding2 {
      padding: 45px 85px 78px 68px;
      background-color: peachpuff;
    }
</style>
</head>

<body>

<h2>Padding Shorthand Property</h2>

<p class="padding1">This element contains a padding of 25px top, 50px right, 59px bottom and 36px left.</p>
<p class="padding2">This element contains a padding of 45px top, 85px right, 78px bottom and 68px left.</p>

</body>

</html>

输出

我们可以看到内边距应用于类名为 "padding1" 和 "padding2" 的元素。

Background 简写属性

CSS 中的 background 属性用于指定 HTML 元素的背景。它是给定单个 background 属性的简写属性

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

background-color: 它用于为元素的背景应用颜色。

语法

background-image: 它用于在元素的背景上应用图像。

语法

background-position: 它用于设置背景图像的起始位置。

语法

background-size: 它用于应用背景图像的大小。

语法

background-repeat: 它用于设置背景图像的重复方式。

语法

background-origin: 它用于设置背景图像的起始位置。

语法

background-clip: 它用于设置背景颜色或背景图像在元素内部的延伸范围。

语法

background-attachment: 它用于设置背景图像随页面滚动或固定。

语法

我们可以使用 background 简写属性同时定义每个属性。

background 简写属性的语法

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

演示

我们将在此演示中使用 background 简写属性。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Background Shorthand Property</title>
<style>
    .background {
        height: 150px;
        width: 425px;
        color: white;
        background: rosybrown url("flower.jpg") 36px no-repeat padding-box border-box;
    }
</style>
</head>

<body>

<h2>Background Shorthand Property</h2>

<p class="background">This element consists of a background with a rosybrown color and a flower image.</p>
</body>

</html>

输出

我们可以看到背景应用于 <p> 元素。

Outline 简写属性

CSS 中的 outline 属性用于指定 HTML 元素的外轮廓。border 属性是给定单个 border 属性的简写属性

outline-width
outline-style
outline-color
outline-offset

outline-width: 它用于定义外轮廓的宽度。outline-width 的值可以是 medium、thin、thick 或任何长度。

语法

outline-style: 它用于定义外轮廓的样式。outline-style 的值可以是 dotted、hidden、double、groove、outset、inset、ridge、dashed 和 solid。

语法

outline-style: dotted| hidden| double| groove| outset| inset| ridge| dashed| solid;

outline-color: 它用于定义外轮廓的颜色。

语法

outline-offset: 它用于定义元素边缘和外轮廓之间的空间。

语法

outline 简写属性的语法

outline-width 的长度可以是 px、%、cm、mm、vw、vh、in 等单位。

演示

我们将使用 outline 简写属性来应用外轮廓的宽度、样式和颜色。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Outline Shorthand Property</title>
<style>
    .outline1 {
      outline: 5px dashed brown;
    }
    .outline2 {
      outline: 2px solid cyan;
    }
</style>
</head>

<body>

<h2>Outline Shorthand Property</h2>

<p class="outline1">This element contains 5px outline-width, dashed outline-style and brown outline-color.</p> <br>
<p class="outline2">This element contains 2px outline-width, solid outline-style and cyan outline-color.</p>

</body>

</html>

输出

我们可以看到外轮廓应用于类名为 "outline1" 和 "outline2" 的元素。

Border-Radius 简写属性

CSS 中的 border-radius 属性用于为边框提供圆角。border-radius 属性是给定单个属性的简写属性

border-radius-top-left
border-radius-top-right
border-radius-top-left
border-radius-bottom-right

border-radius-top-left: 它设置元素左上角的半径。

语法

border-radius-top-right: 它设置元素右上角的半径。

语法

border-radius-bottom-left: 它设置元素左下角的半径。

语法

border-radius-bottom-right: 它设置元素右下角的半径。

语法

我们可以使用简写属性同时为左上角、右上角、左下角和右下角提供半径。

border-radius 简写属性的语法

border-radius 的值可以是 px、%、cm、mm、vw、vh、in 等单位。

演示

我们将使用 border-radius 简写属性为元素应用半径。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Border-Radius Shorthand Property</title>
<style>
    p {
      border-radius: 9px 5px 10px 12px;
      border: 1px solid red;
    }
</style>
</head>

<body>

<h2>Border-Radius Shorthand Property</h2>

<p>This element has 9px top-left, 5px top-right, 10px bottom-right and 12px bottom-left border-radius.</p>
</body>

</html>

输出

我们可以看到所有四个方向上应用了不同的 border-radius。

Transition 简写属性

CSS 中的 transition 属性用于提供过渡效果。transition 是给定单个属性的简写属性

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property: 它用于设置要应用过渡的 CSS 属性的名称。

语法

transition-duration: 它用于定义过渡效果完成所需的时间。

语法

transition-timing-function: 它用于定义过渡效果的速度曲线。

语法

transition-delay: 它指定开始过渡效果前等待的时间。

语法

我们可以使用 transition 简写属性组合上述单个属性。

transition 简写属性的语法

演示

我们将对 <p> 元素使用 transition 简写属性。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Transition Shorthand Property</title>
<style>
    p {
      color: red;
      background-color: yellow;
      transition: width 5s ease-in 0.5s;
    }
    p:hover {
      width: 250px;
    }
</style>
</head>

<body>

<h2>Transition Shorthand Property</h2>

<p>This element shows transition effect.</p>

</body>

</html>

输出

我们可以看到下面的输出。

过渡前

过渡后

List-Style 简写属性

CSS 中的 list-style 属性用于为列表项提供标记。它是给定单个 list-style 属性的简写属性

list-style-type
list-style-position
list-style-image

list-style-type: 它用于设置列表项标记。

语法

list-style-type: circle| disc| upper-roman| lower-roman| decimal| square| upper-latin| lower-latin| upper-alpha| lower-alpha| lower-greek;

list-style-position: 它用于设置列表项标记的位置。

语法

list-style-image: 它用于设置图像以代替列表项标记。

语法

我们可以使用 list-style 简写属性来应用其所有单个属性。

list-style 简写属性的语法

演示

我们将对类名为 "list1" 和 "list2" 的元素使用 list-style 简写属性。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>List-Style Shorthand Property</title>
<style>
    .list1 {
      list-style: circle outside;
    }
    .list2 {
      list-style: square inside url("lotus.jpg");
    }
</style>
</head>

<body>

<h3>List of cosmetic brands</h3>
<ul class="list1">
  <li>Lakme</li>
  <li>Almora Botanica</li>
  <li>Botani</li>
  <li>Cedar Creek Essentials</li>
  <li>Ocean Olive</li>
</ul>

<h3>List of cosmetic products</h3>
<ul class="list2">
  <li>Eyeshadow</li>
  <li>Moisturizer</li>
  <li>Eyeliner</li>
  <li>Primer</li>
  <li>Highlighter</li>
</ul>
</body>

</html>

输出

我们可以看到，类名为 "list1" 的列表具有 circle 列表样式类型和 outside 列表样式位置，而类名为 "list2" 的列表具有 square 列表样式类型、inside 列表样式位置和图像作为列表项标记。

Text-Decoration 简写属性

CSS 中的 text-decoration 属性用于为列表项提供标记。它是给定单个 list-style 属性的简写属性

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

text-decoration-line: 它用于设置文本装饰的线条。

语法

text-decoration-color: 它用于设置文本的颜色。

语法

text-decoration-style: 它用于设置文本装饰线条的样式。

语法

text-decoration-thickness: 它用于设置线条的粗细。

语法

我们可以使用 text-decoration 简写属性来应用其所有单个属性。

text-decoration 简写属性的语法

演示

我们将对 <h3> 元素使用 text-decoration 简写属性。

代码

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Text-Decoration Shorthand Property</title>
<style>
    h3 {
      text-decoration: underline red double 2px;
    }
</style>
</head>

<body>

<h3>This is a decorated text.</h3>

</body>

</html>

输出

我们可以看到下面输出中装饰过的文本。

Flex 简写属性

CSS 中的 flex 属性用于管理元素的排列。它是给定单个 flex 属性的简写属性

flex-grow
flex-shrink
flex-basis

flex-grow: 它用于定义项目相对于其他弹性项目的增长程度。

语法

flex-shrink: 它用于定义项目相对于同一容器中其他弹性项目的收缩程度。

语法

flex-basis: 它用于设置弹性项目的初始长度。

语法

我们可以使用 flex 简写属性来应用其所有单个属性。

flex 简写属性的语法

演示

我们将在此演示中使用 flex 简写属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Flex Shorthand Property</title>
  <style>
  #inner {
    height: 125px;
    width: 100%;
    display: flex;
  }
  
  #inner div {
    padding: 6px;
  }
  
  .gold {
    background-color: gold;
    flex: 0 1 150px;
  }
  .darkorange {
    background-color: darkorange;
  }
  .orchid {
    background-color: orchid;
    flex: 0 1 75px;
  }
  .silver {
    background-color: silver;
  }
  
</style>
</head>
<body>

<h1>Flex Shorthand Property</h1>

<div id="outer">
<p>Setting the flex property of the Gold div and Orchid div elements:</p>
<div id="inner">
  <div class="gold">Gold div</div>
  <div class="darkorange">Darkorange div</div>
  <div class="orchid">Orchid div</div>
  <div class="silver">Silver div</div>
</div>

</div>

</body>
</html>

输出

我们可以看到 flex 属性应用于 Gold div 和 Orchid div 元素。

Grid-Template 简写属性

CSS 中的 grid 属性用于创建网格布局。它是给定单个 grid 属性的简写属性

grid-template-columns
grid-template-rows
grid-template-areas

grid-template-columns: 它用于定义网格中的列数。

语法

grid-template-rows: 它用于定义网格中的行数。

语法

grid-template-areas: 它用于定义网格中的区域。

语法

我们可以使用 grid-template 简写属性来应用其所有单个属性。

grid 简写属性的语法

grid-template: none| grid-template-rows/ grid-template-columns| grid-template-areas;

演示

我们将对 <p> 元素使用 grid-template 简写属性。

代码

<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<title>Grid-Template Shorthand Property</title> 
	<style> 
		.container { 
			display: grid; 
			grid-template: 100px 90px/90px auto; 
			grid-gap: 12px; 
			background-color: red; 
			padding: 12px; 
		} 
		
		.container > div { 
			background-color: yellow; 
			text-align: center; 
			padding: 30px 0; 
			font-size: 24px; 
		} 
	</style> 
</head> 

<body> 
	<div class="container"> 
		<div class="item1">Item 1</div> 
		<div class="item2">Item 2</div> 
		<div class="item3">Item 3</div> 
		<div class="item4">Item 4</div> 
	</div> 
</body> 

</html>

输出

我们可以看到 grid-template 属性应用于名为 container 的类。

浏览器支持

以下是支持所讨论的简写属性的浏览器

谷歌浏览器
Opera
火狐
Safari
Microsoft Edge

结论

本文中，我们已经理解了 CSS 中的简写属性。我们学习了各种简写属性，如 margin、border、font、padding、background、outline、border-radius、transition、list-style、text-decoration、flex 和 grid-template。这些简写属性通过允许编写简洁的代码来帮助编码人员节省时间。

下一个主题Css-align-self

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

Shorthand Property in CSS

Margin 简写属性

演示

Border 简写属性

border 简写属性的语法

演示

Font 简写属性

演示

Padding 简写属性

padding 简写属性的语法

演示

Background 简写属性

background 简写属性的语法

演示

Outline 简写属性

outline 简写属性的语法

演示

Border-Radius 简写属性

border-radius 简写属性的语法

演示

Transition 简写属性

transition 简写属性的语法

演示

List-Style 简写属性

list-style 简写属性的语法

演示

Text-Decoration 简写属性

text-decoration 简写属性的语法

演示

Flex 简写属性

flex 简写属性的语法

演示

Grid-Template 简写属性

grid 简写属性的语法

演示

浏览器支持

结论

相关帖子

CSS Remove Border

CSS Invert

CSS Responsive Table

CSS Viewer Online

CSS Shapes

CSS Line Break

CSS Flex Direction

Background Shorthand CSS

CSS RGBA

CSS Styles for Dropdownlist

订阅 Tpoint Tech

联系信息

关注我们

教程