HTML-CSS（十四）CSS属性的复合样式

一个CSS属性只控制一种样式，叫做单一样式

一个CSS属性控制多种样式，叫做复合样式

background

background-color ：背景色

background-image ：背景图片

background-repeat ：背景平铺方式

background-position:背景图片的位置
缩写：background:背景色 背景图片 平铺方式 x y背景图片的位置（顺序没有要求；可省略其中任何一个属性值；至少要写一个属性值； x、y省略一个值时，代表x、y共用这个值）

border

border-width:边框宽度

border-style：边框样式

border-color:边框颜色

缩写：border:边框宽度 边框样式 边框颜色（至少一个写一个属性值。顺序没有要求，可省略边框宽度和边框颜色，省略之后默认是1px 样式 黑色）。也可以单独为一条边设置：border-bottom:1px solid blue

font

font-style:italic 斜体

font-weight：bold 加粗

font-family：‘宋体’ 字体种类

font-size:20px 字号大小

line-height:35px 行高

缩写：font :斜体字 加粗 字号大小/行高 默认字体，备用字体，备用字体；（可以省略部分，至少两个，但要注意顺序，顺序不能改变，size和family要写在最后的并且他们两个不可以乱序，前面两个可以乱序）

margin/padding

padding/margin-top

padding/margin-right

padding/margin-bottom

padding/margin-left

缩写：padding/margin：上 右 下 左（顺时针）

三个：padding/margin:上 左右 下

只写两个：padding/margin：上下 左右

只写一个：padding/margin:上下左右

color

方式一：color：red（单词表示法）

方式二：color：rgb（184，134，11）（三原色）=>转十六进制 184=>B8 134=>86 11=>0B

方式三：color ：#B8 86 0B（十六进制表示法）

颜色提取小工具：photoshop(万能小工具)

https://pan.baidu.com/s/19PovAVtQayU3wEznimjbgA 提取码：y1dk

复合样式和单一样式不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。如果单一写在复合之前，那么复合样式会覆盖掉之前的单一样式

因为border复合中没有写颜色的样式，而且顺序在后。所以就直接覆盖掉之前已有的颜色。我们来调换一下顺序看一下效果

这下明显border-color生效了，因此复合样式尽可能要写在单一样式之前，这样有些样式才不会被覆盖。除非你的复合样式包含了但一样的属性值，否则还是要按照规范写