CSS的属性组成和作用

CSS的属性组成和作用

1. 每个CSS样式都必须由两部分组成：选择符和声明（声明包括属性和属性值）；
2. CSS属性值：属性值包括法定属性值和常规的数值单位（25px）或颜色值（colorValue）;

---

字体类属性

1、font-family：改变字体类型

   { font-family： “ 字体1 ” ， “ 字体2 ” ， “ 字体3 ” ；}

例如：font-family： “ 微软雅黑 ” ， “ 宋体 ” ；

浏览器首先会寻找字体1、如存在就使用该字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

当字体是中文字体时，需加双引号；

当英文字体中有空格时，需加双引号如（ “ Times New Roman ” ）

当英文字体只有一个单词组成是不加双引号；如：（Arial）；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial，新推出的版本也默认为微软雅黑

---

2、font-size：字体大小

   font-size：20px；

W3C规定字体大小默认为16px。

1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。

2）单位还可以是pt（磅），在印刷领域广泛使用，

   　9pt=12px; 

3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，

1em=16px,0.75em=12px;

4) em:表示元素字体高度，em值是根据父元素值来确定；em单位可省略；

如：font-size:12px;line-height:2; 则行高为24px；（em为文字像素大小的倍数 1em=1*font-size，2em=2*font-size）

5) 使用绝对大小关键字

xx-small =9px

x-small  =11px

small     =13px

medium     =16px

large      =19px

x-large    =23px

xx-large   =27px

---

3. 文字颜色

例如：color:rgb(0,204,204);

取值范围：0-255

（3）rgba(value,value,value ,value)

例如：color:rgba(0,204,204,0.6);   a表示透明度，取值范围是：0-1

（4）用颜色名表示：（16种）

black 纯黑    silver 浅灰      navy 深蓝

blue 浅蓝     green  深绿      lime 浅绿

teal 靛青     aqua 天蓝        maroon 深红

red 红色      purple 深紫      fuchsia 品红

olive 褐黄    yellow 明黄      gray 深灰

white 亮白

---

4. 文字加粗（font-weight）

bolder(更粗的)/bold（加粗）/normal（常规）

在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，一般500常规字体，600-900加粗字体

---

5. 字体倾斜（font- style ）

font-style：italic（倾斜度小）/oblique（倾斜度大）/normal（取消倾斜，常规显示）；

Italic和oblique都是表示倾斜，不过oblique的倾斜幅度大一些，但是一般来说浏览器对于他们的区分不是很明显。

---

6、font复合式写法

{font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)}

*复合式写法：

font：style variant weight size family；

总体设置字体，按以上顺序;size和family不可和其他属性位置互换；

*文字属性简写：font:12px/1.5em "宋体";

如: font:normal normal  bold 24px “黑体”;

（style和weight可以互换位置， size和family不可和其他属性位置互换 ）

说明：

font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style | font-variant(大小写字母) | font-weight | font-size / line-height | font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 , 这种简写法只有在同时指定font-size和font-family属性时才起作用 ,而且,你没有设定font-weight , font-style , 以及font-variant , 他们会使用缺省值。     

---

文本类属性

1、text-align（水平对齐）

{ text-align：left/right/center/justify（两端对齐）;}  

(注意：justify适用于英文两端对齐，两端对齐对中文不起作用)

---

2、vertical-align（垂直对齐）

{ vertical-align：top/bottom/middle；}

大部分的浏览器不支持这个属性（可以用在表格里，单独使用的时候不适用，可以于其他结合在一起使用，先做为了解，后面介绍）

---

3、行高（line-height）

{ line-height：normal/数值；}

当单行文本的行高等于容器（div）的高时，可以实现单行文本在容器中垂直方向居中对齐（重点）；

当单行文本的行高小于容器（div）的高时，可以实现单行文本在容器中垂直对齐以上的任意位置的定位；

当单行文本的行高大于容器（div）的高时，可以实现单行文本在容器中垂直对齐以下的任意位置的定位；

倍行高：{ line-height：2； } 表示行高是字体大小2倍

             { line-height：1.5； }表示行高是字体大小的1.5倍

注：当用倍行高作为单位时，不用加px（可以是em）；

---

4、text-decoration（文本修饰）

{ text-decoration：none/underline/overline/line-through； }

作用：给文字加上修饰（主要是线）

none：没有下划线

underline：添加下划线

overline：添加上滑线

line-through：添加删除线

---

5、text-indent（首行缩进）

{ text-indent：数值； }

例如：.nav { text-indent：2em； }     （表示缩进两个汉字字符）

注意：text-indent只对第一行文字起作用，如果第一行文字不是文本则没有什么变化；

          text-indent可以取负值，可以实现隐藏文本，悬挂缩进；

          负值是向前进；（可以直接设置长度或者是百分比）

---

6、letter-spacing（字符间距）

     { letter-spacing：像素数值； }

     用来控制英文字母和汉字之前的间距；

---

7、word-spacing（词间距）

     { word-spacing：normal/像素数值； }

     用来控制英语单词之间的词距；

     注意:注意是完整的单词词组之间的距离不是字母之间的距离；

---

8、layout-flow（文本流控制）（只支持IE浏览器）

       { layout-flow：horizontal/vertical-ideographic； }

       作用：设置文字的流动方向（从左到右/从上到下、从右到左）

       horizontal：从左到右；

       vertical-ideographic：从上到下、从右到左；

---

9、text-transform（大小写）

     { text-transform：none/capitalize/uppercase/lowercase

     作用：控制文本的大小写

     none：默认值

     capitalize：每一个单词的首字母大写

     uppercase：全部字母大写

     lowercase：全部字母小写

     只用于英文，不适用于中文汉字

---

10、text-shadow（文本阴影）

       {  text-shadow: value value value colorvalue;  }

      作用：设置文本阴影

      例：text-shadow：5px 5px 5px #ff0000；

     上述4个数值分别表示：水平偏移5px，垂直偏移5px，模糊的半径5px，阴影的颜色；

---

列表类属性

1、list-style（关于列表的css声明）

      1.1、list-style-type（定义列表符号样式）

            语法：list-style-type：disc/circle/square/none；

            说明：

    1.2、list-style-image（使用图片座位列表符号）

                list-style-image：url(所使用图片的路径及全称)；

    1.3、list-style-position（定义列表符号的位置）

            list-style-position：outside（外边）/inside（里边）；

            list-style：none；去掉样式列表

---

背景类属性

    1、background（背景颜色）

     语法：{ background-color：颜色值；}

     简写：background：color值；

---

      2、background-image：url（”背景图片路径及其全称“）；

         网页上有两种图片形式：插入图片、背景图；

         插入图片：属于网页内容，也就是结构；

         背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

1） 容器尺寸等于图片尺寸，背景图片正好显示在容器中；

2） 容器尺寸小于图片尺寸，背景图片将默认平铺，直至铺满元素；

3） 容器尺寸小于图片尺寸，只显示元素范围以内的背景图；

---

    3、background-repeat（背景图片平铺属性）

         语法：{ background-repeat：no-repeat/repeat-x/repeat-y； }

         no-repeat:不平铺

         repeat：平铺（默认）

         repeat-x：横向平铺

         repeat-y ：纵向平铺

---

     4、background-attachment（背景图片的固定）

         语法：{ background-attachment：scroll（滚动）/fixed（固定）； }

         fixed：固定，随着内容一块滚动；

         scroll：不随着内容一块滚动；（默认）；

---

    5、background-position（背景图片的位置）

         语法：background-position：值1 值2；

选择符{ background-position：left/center/right数值 top/cenrter/bottom/数值； }

          水平方向上的对齐方式（left/center/right）或值

          垂直方向上的对齐方式（top/center。bottom）或值

说明：两个值：值1：表示水平位置的值，值2：表示垂直位置的值。

          当两个都是center的时候写一个值就可以代表的是水平位置和垂直位置。

          向右方向，向下方向都是正值

---

    6、background-size（背0 景图片的大小）

    7、组合写法

语法：background：属性值1 属性值2 属性值3；

举例：比如要把背景图片、背景平铺属性、位置写到一个属性下面。

background：url（背景图片的路径及其全称） no-repeat center top red；

---

边框属性（border）

边框宽度（border-width）

      border-width：2px；

边框样式（border-style）

     定义边框线的样式（solid实线、dashed虚线、double双实线、dotted圆点状虚线）

     左边框border-left：数值+单位

     右边框border-right：数值+单位

     上边框border-top：数值+单位

     下边框border-bottom：数值+单位

边框颜色（border-color）

     定义边框的颜色

边框的样式必须设置。其他的可以省去，因为边框宽度和边框的颜色有默认值；（默认为2px和黑色）

---

浮动属性

1、设置浮动（float）

     float：left/right/none；

          1）left：元素浮动在左边

          2）right：元素浮动在右边

          3）none：默认值，不浮动

    说明：浮动对象会向左向右移动直到遇到边框（border）、内补丁（padding）、外补丁（margin）或者另一个块元素为     止。

---

2、清除浮动（clear）

     clear：none/both/left/right

          1）none：允许两边都可以有浮动对象

          2）both：清除两边浮动

          3）left：清除左边浮动

          4）right：清除右边浮动

---

盒模型

margin（边界）

边界：margin，在元素外边的空白区域，被称为边距。

     属性值的4钟方式：

     四个值：上 右 下 左

     三个值：上 左右 下

     二个值：上下 左右

     一个值：四个方向边距值都一样

margin：0 auto；/* 定义元素上、下边界为0px、在浏览器中横向居中。 */

可单独设置某个方向：margin-top：10px；

---

padding（填充）

     padding在设定页面中一个元素内容到元素边缘（边框）之间的距离。也称补白

     1）用来调整内容在容器中的位置关系；

     2）调整子元素在父元素中的位置关系

          注意：padding元素要添加在父元素中  

     3）padding值是额外加在元素原有的大小之上的，如果想保证元素大小不变，需要从元素的宽或高上剪掉添加的padding属性值；