CSS的拾遗（1）

CSS的拾遗（1）

1、padding：

（1）定义：在一个声明中设置所有内边距属性

（2）用法：

　　　　例子 1：上，右，下，左

　　　　padding:10px 5px 15px 20px;

• • 上内边距是 10px
  • 右内边距是 5px
  • 下内边距是 15px
  • 左内边距是 20px

　　　　例子 2：上，右&左，下

 　　　padding:10px 5px 15px;

• • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px

　　　　例子 3：上&下，右&左

　　　　padding:10px 5px;

• • 上内边距和下内边距是 10px
  • 右内边距和左内边距是 5px

　　　　例子 4：all

　　　　padding:10px;

• • 所有 4 个内边距都是 10px

（3）注意：不允许使用负值

2、margin:

（1）定义：在一个声明中设置所有外边距属性

（2）用法：同padding

（3）注意：允许使用负值

3、min-width:

（1）定义：该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄

（2）用法：

　　<1>默认值：none，使用默认值则宽度取决于浏览器。

　　<2>元素若比指定宽度小，则会被强制放大（图片），反之不受影响

（3）注意：不允许使用负值

4、font：

（1）定义：font 简写属性在一个声明中设置所有字体属性

（2）用法：可以按顺序设置如下属性：

• font-style（规定字体样式）
• font-variant（规定字体异体）
• font-weight（规定字体粗细）
• font-size/line-height（规定字体尺寸和行高）
• font-family（规定字体系列）

5、font-style：

（1）定义：font-style 属性定义字体的风格

（2）用法：

　　<1>normal，默认值。浏览器显示一个标准的字体样式

　　<2>italic，浏览器会显示一个斜体的字体样式

　　<3>oblique，浏览器会显示一个倾斜的字体样式

　　<4>inherit，规定应该从父元素继承字体样式

6、font-variant：

（1）定义：font-variant 属性设置小型大写字母的字体显示文本

（2）用法：所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

　　<1>normal，默认值。浏览器会显示一个标准的字体

　　<2>small-caps，浏览器会显示小型大写字母的字体

　　<3>inherit，规定应该从父元素继承 font-variant 属性的值

7、font-weight：

（1）定义：font-weight 属性设置文本的粗细

（2）用法：

　　<1>normal，默认值。定义标准的字符

　　<2>bold，定义粗体字符

　　<3>bolder，定义更粗的字符

　　<4>lighter，定义更细的字符

　　<5>100，200，300…900，定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold

8、font-size：

（1）定义：font-size 属性可设置字体的尺寸

（2）用法：

　　<1>实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）

　　<2>可能的值

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

9、line-height：

（1）定义：line-height 属性设置行间的距离（行高）

（2）用法：

　　可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

（3）注意：

　　<1>不允许使用负值

　　<2>该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离

10、font-family：

（1）定义：font-family 规定元素的字体系列

（2）用法：

　　<1>font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值

　　<2>有两种类型的字体系列名称：

• • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
  • 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

　　<3>使用逗号分割每个值，并始终提供一个类族名称作为最后的选择

　　<4>实例

• • 例1（小米米官网）：font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
  • 例2（淘宝技术研发中心）：font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  • 例3（加网 ）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
  • 例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
  • 例5（一淘UX）:font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  • 例6（简书）：font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

（3）注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路

11、color：

（1）定义：color 属性规定文本的颜色

（2）用法：

　　<1>这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖

　　<2>可能的值

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

12、background：

（1）定义：background 简写属性在一个声明中设置所有的背景属性

（2）用法：

　　<1>可以设置如下属性：

• background-color（规定要使用的背景颜色）
• background-position（规定背景图像的位置）
• background-size（规定背景图片的尺寸）
• background-repeat（规定如何重复背景图像）
• background-origin（规定背景图片的定位区域）
• background-clip（规定背景的绘制区域）
• background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动）
• background-image（规定要使用的背景图像）

　　<2> 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少

13、background-color：

（1）定义：background-color 属性设置元素的背景颜色。

（2）用法：background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

　　　　可能的值

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。