CSS |速记属性

速记属性允许我们在一行中以紧凑的方式编写多个属性。它们很有用，因为它们提供干净的代码并减少 LOC(代码行)。

我们将介绍的速记属性：

1. 背景
2. 字体
3. 边界
4. 大纲
5. 利润
6. 填充
7. 列表

背景： CSS 背景属性用于设置网页的背景。背景可以应用于任何元素，如 body、h1、p、div 等。背景有许多可用的属性，如颜色、图像、位置等。其中一些在下面的代码中使用。

• 长手方式：

  background-color:#000;
  background-image: url(images/bg.png);
  background-repeat: no-repeat;
  background-position:left top;
  

• 速记方式：

  background:#000 url(images/bg.png) no-repeat left top;
  

• 例子：

• 输出：
  

字体： CSS 字体属性用于为网页上的文本应用不同的字体。可以使用字体设置的各种属性有 font-family、font-size、font-weight 等。其中一些在下面的代码中使用。

• 长手方式：

  font-style:italic;
  font-weight:bold;
  font-size:18px;
  line-height:150%;
  font-family:Arial,sans-serif;
  

• 速记方式：

  font: italic bold 18px/150% Arial, sans-serif;
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：
  

边框： CSS 边框属性用于为网页的不同元素应用边框。边框有很多属性，如宽度、样式、颜色等。

• 长手方式：

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

• 速记方式：

  border: 1px solid #000;
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：
  

大纲： CSS 大纲属性用于将大纲应用于网页中存在的各种元素。

• 长手方式：

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

• 速记方式：

  outline: 1px solid #000;
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：
  

边距： CSS 边距属性用于在任何定义的边框之外的元素周围创建空间。我们可以为所有 4 个边定义边距，即顶部、底部、左侧和右侧。

• 长手方式：

  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left :5px;
  

• 速记方式：

  margin : 10px 5px 10px 5px;
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：
  

填充： CSS 填充属性用于在任何定义的边框内围绕元素内容生成空间。填充也可以用作顶部、底部、左侧和右侧的填充。

• 长手方式：

  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left :5px;
  

• 速记方式：

  padding : 10px 5px 10px 5px;
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：
  

列表： CSS中的列表主要有两种：
1. 有序列表

2.无序列表

UnOrdered 列表有项目符号，而有序列表有数字。
• 长手方式：

  list-style-type: disc;
  list-style-position: inside;
  list-style-image: url(disc.png);
  

• 速记方式：

  list-style: disc inside url(disc.png);
  

• 例子：

  
  
    
  
      
      
      
    
      
  
    
  
      
  GeeksforGeeks
  
    
  
  

• 输出：