css中的简写

这是第三遍翻看《css那些事儿》了，这本书也是我学习前端的第一本书。这次摘录了一些关于css的简单又容易忘记的知识点，以便查阅。希望慢慢可以写积累更多好的博文。

 

1.颜色

css中有四种颜色表现方式:我最常用的是前三种

p{color:#FFF00FF}
P{color:rgb(125,0,255)}
p{color:red}
p{color:rgb(25%,0%,100%)}

 

 

2.边框的简写

div {
     border-width:1px;
     border-style:solid;
     border-color:#FF0000;
   }

/*简写成*/

div {border:1px solid #FF0000}

类似于padding和margin的属性，边框也具有4个方向的属性，border-top、border-right、border-bottom、border-left。边框的这4个方向的属性不具备简写条件，但却可以在它的属性中分别体现：

div{
     border-width:1px;
     border-style:solid dashed double; /*定义上边框为实线,左右边框为虚线，下边框为双线*/
    border-color:#FF0000 #000000;
    
   }

3.背景的简写

body{
    background-color: #FFF0000;
    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;  /*将背景图片固定*/
    background-position: 0 0; /*定义背景图片的位置，必须先定义背景图片后才有效    */
    
}

background是一个复合属,它的基本语法如下

background:background-color||background-image||background-repeat||background-attachment||background-position

4.字体的简写

body{
    font-style: italic;
    font-variant: small-caps; /*定义字体为小型的大写字母，针对英文*/
    font-weight: bold;
    font-size: 12px;
    font-weight: bold;
    line-height: 140%;
    font-family: arial;
}

简写成如下：

font:font-style||font-variant||font-weight||font-size||line-height||font-family

body{font:italic small-caps bold 12px/140% arial }

其中字体大小及行高之间并不是用空格隔开，而是用一个斜杠隔开。字体属性在很多情况中并不是所有属性都需要设置，但font-size及font-family是必不可少的（不是很明了）。

 

5.表的简写

li{
    list-style-type: square; /*将列表的预设标记定义为实心方块*/
    list-style-position: inside;  /*列表项目标记放置在文本以内，且环绕文本根据标记对齐*/
    list-style-image: url(../img/1.png); /*用图片覆盖标记*/
}

简写成如下：

list-style:list-style-image||list-style-position||list-style-type
li{list-style: url(../img/1.png) inside square;}

 

转载于:https://www.cnblogs.com/grapefruitskin/p/5262140.html