css基本属性学习笔记

• 字体属性（font---复合属性：由多个属性组成的集合）

1. font-size：        字体大小
   1. 值：
      1. 英文单词：small，large
      2. 百分数
      3. 数字+单位（px）： 推荐使用
   2. 注意：
      1. 网页中默认字体大小是16px
      2. 网页中默认最小字体大小是12px
      3. 字体大小16px：    文字宽和高都是16px（自己理解的）
      4. 设置字体一般使用偶数（推荐，浏览器方便解析）
2. font-weight:      字体粗细
   1. 值：
      1. 英文单词：     bold，bolder（加粗）
      2. 数字：              100-900
   2. 注意：
      1. 在网页中只能看到两种状态：加粗（600-900）正常（100-500）
      2. bold == 700，bolder == 900
      3. 通常在设置加粗中
         1. font-weight：bold；
         2. font-weight：700；
3. font-style：       字体样式
   1. 值：
      1. normal : 正常的字体
      2. italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
      3. oblique : 倾斜的字体
   2. 注意：
      1. 适用于英文单词
4. font-family：    字体名称
   1. 注意：
      1. 通常链接的都是本机中的字体
      2. 默认字体是微软雅黑
      3. font-family：”微软雅黑”,”黑体”,”宋体”;      首先查看是否有微软雅黑有就使用，没有就查找黑体……如果都没有就使用浏览器默认字体
      4. 使用的字体是中文要加上引号
5. color：               字体颜色
   1. 值：
      1. 英文单词：     red，blue，yellow
      2. 16进制值：    以#开头
      3. RGB值或RGBA值：      a-alpha—透明度（0---1）
6. line-height:        设置行与行之间的间距
   1. 值：
      1. 数字：                       代表当前字体大小的倍数
      2. 百分数：                   当前字体大小的百分之几
      3. 数字+单位（px）
   2. 注意：
      1. 上一行文本的中线到下一行文本的中线的距离
      2. 项目中通常字体的行高设置为1.5倍
7. 字体复合属性设置方式
   1. 语法：font：font-style font-weight font-size/line-height font-family;
   2. 注意：
      1. 设置字体复合属性是具有先后顺序
      2. 每个属性值之间用空格隔开
      3. 其他的可以不用设置，但font-size和font-family必须设置
      4. 项目中很少使用复合属性，使用单个属性

• 文本属性（text）

1. letter-spacing：        文字间距
2. word-spacing：         词间距（英文单词之间的间距）
3. text-align:                   文本水平对齐
   1. 值：
      1. left：        左对齐（默认）
      2. center：  居中对齐
      3. right：     右对齐
      4. justify：   两端对齐（英文段落）
   2. 注意：
      1. 不能直接在行内元素上面设置对齐方式，只能在它最近的父级元素设置
4. vertical-align：          垂直对齐
   1. 值：
      1. top：        顶端对齐
      2. middle： 中部对齐
      3. bottom：底端对齐
   2. 注意：
      1. 单行文本垂直居中：line-height=height
5. text-indent：             首行缩进
   1. 值：
      1. 数字+单位（px，em，rem…）
      2. 百分数
   2. 单位：
      1. px：          像素（网页中最小的单位）
      2. em：        相对值（相当于当前框内的字体大小）
      3. 百分数：相对值（相对于父级元素width的百分之几）
6. white-space：           是否换行
   1. 值：
      1. normal： 默认处理方式（无论有多少空格只保留一个空格，不保留换行符）
      2. pre：        保留空格和换行符
      3. nowrap：只保留一个空格，不保留换行符，除非遇到br （强制性放在一行）
7. text-overflow：         文本溢出标识
   1. 值：
      1. clip：        不显示省略标记（…），而是简单的裁切
      2. ellipsis： 当对象文本溢出时显示省略标记（…）
   2. 注意：
      1. 单独使用看不到效果，结合其他属性一起用
         1. text-overflow：ellipsis；white-space：nowrap；overflow：hidden（溢出隐藏）
      2. 项目中溢出产生省略号不是使用css实现，可以用js或者后台语言实现
8. text-transform：      改变英文大小写
   1. 值：
      1. none：              默认值
      2. capitalize：     单词首字符大写
      3. uppercase：    设置大写
      4. lowercase：    设置小写
9. text-decoration：     文本描述
   1. 值：
      1. none：              默认值（什么线都没有）
      2. underline：      下划线
      3. line-through：贯穿线（删除线）
      4. overline：        上划线

• 文本效果

1. text-shadow:              文本阴影
   1. 值：
      1. <length>①：  阴影水平偏移值。可以为负值
      2. <length>②：  阴影垂直偏移值。可以为负值
      3. <length>③：  阴影模糊值。不允许负值
      4. <color>：        设置对象的阴影的颜色。
2. word-wrap：             文本换行
   1. 值：
      1. normal：          允许内容顶开或溢出指定的容器边界
      2. break-word：  在边界内换行，单词内部断开

• 背景（background）

1. background：                     背景属性（复合属性）
   1. background：color image repeat position/size
2. background-color：           背景颜色
   1. 英文单词：     red，blue，yellow
   2. 16进制值：    以#开头
   3. RGB值或RGBA值：      a-alpha—透明度（取值：0-1）
3. background-image：        背景图片
   1. background-image：url(“”);
4. background-repeat：       是否平铺
   1. repeat：           x轴y轴都平铺（默认值）
   2. repeat-x：       x轴平铺
   3. repeat-y：       y轴平铺
   4. no-repeat：     不平铺
5. background-position:        背景定位
   1. background-position：x轴（px，百分数） y轴（px，百分数）；
   2. 可以用方位：top，center，left，right，bottom

注意：如果只设置一个值代表x轴上的值，y轴默认居中；如果只设置一个方位则另一个方位居中。

1. background-size                 背景尺寸
   1. width：             宽
   2. height：           高
   3. cover：             按照最远边等比例放大
   4. contain：         按照最近边等比例放大
   5. 如果只设置一个值则代表宽度，高度等比例缩放
2. background-attachment：       设置背景图片固定或随着页面滚动
   1. scroll:      默认。背景图像会随着页面其余部分的滚动而移动。 （绑定到body上）
   2. fixed:       当页面的其余部分滚动时，背景图像不会移动。（绑定到HTML标签上）
3. background-clip
   1. border-box： 从border区域（不含border）开始向外裁剪背景。
   2. padding-box：        从padding区域（不含padding）开始向外裁剪背景。
   3. content-box：         从content区域开始向外裁剪背景。
4. background-origin
   1. padding-box： 默认值，决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片。
   2. border-box ： 决定background-position起始位置从border的外边缘开始显示背景图片。
   3. content-box：          决定background-position起始位置从content的外边缘padding的内边缘）开始显示背景图片。
5. 多背景图
   1. background-image：url(“url”) no-repeat center,url(“url”);
   2. 减小图片的大小，增加访问速度