CSS属性

css属性

1.  字体大小

        属性名：font-size

        语法：

        div {

                font-size: 40px;

                }

注意点：

• 1. Chrome浏览器支持的最先文字为 12px ，默认字体大小为 16px，并且 0px会自动消失。
  2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认的大小。
  3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

                        借助控制台可以查看样式。

2.  字体族

        属性名：font-family

        语法：

        div {

                font-family: "STCaiyun", "Microsoft YaHei"

        }

注意：

• • 1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，
    2. 如果字体名包含空格，必须使用引号包裹起来。
    3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，找不到就使用后边的，且通常在最后写上 serif (衬线字体)或 sans-serif（非衬线字体）
    4. windows 系统中，默认的字体就是微软雅黑。

3. 字体风格

        属性名：font-style

        常用值：

• 1. normal: 正常（默认值）
  2. italic: 斜体（使用字体自带的斜体效果）推荐使用
  3. oblique: 斜体（强制倾斜产生斜体效果）

        语法：

        div {

                font-style: italic;

        }

4. 字体粗细

        属性名：font-weight

        常用值：

• 1. 关键词：
     1. lighter: 细
     2. normal : 正常
     3. bold: 粗
     4. bolder: 很粗（多数字体不支持）
  2. 数值：
     1. 100 ~ 1000 且无单位的，数值越大，字体越粗（或一样粗，具体得先看字体设计时的精确程度）。
     2. 100 ~ 300 等同于 lighter, 400 ~ 500 等同于 normal, 600以上等同于 bold.

        语法：

        div {

                font-weight: bold;

        }

        div {

                font-weight: 600;

        }

5. 字体符合属性写法

        属性名：font, 可以把上述字体样式合并成一个属性。

        编写规则：

                字体大小，字体族必须都要写上。

                字体族必须是最后一位，字体大小必须是倒数第二位。

                 各个属性间用空格隔开。

        实际开发中更推荐组合的写法，但也不是绝对的，比如只想设置字体大小，直接用font-size 属性.

6. 文本颜色

1. 属性名：color
2. 可选值：
   1. 颜色名
   2. rgb 或 rgba
   3. HEX 或 HEXA（十六进制）
   4. HSL 或 HSLA
   5. 开发中常用的是：rgb/rgba 或 HEX/HEXA（十六进制）
3. 举例：
   1. div {

                        color: rgb(255,255,255)

                }

7. 文本间距

1. 字母间距：letter-spacing
2. 单词间距： word-spacing(通过空格识别单词)
3. 属性值为像素（px）,正值让间距增大，负值让间距减小。

8. 文本修饰

1. 属性名：text-decoration
2. 可选值：
   1. none: 无装饰线（常用）
   2. under: 下划线（常用）
   3. overline: 上划线
   4. line-through: 删除线
3. 可搭配如下值使用：
   1. dotted: 虚线
   2. wavy: 波浪线
   3. 也可以指定颜色
4. 举例：
   1. a {

                        text-decoration: none;

                }

9 文本缩进

1. 属性名：text-indent
2. 属性值：css中常见的长度单位，例如：px
3. 举例：
   1. div {

                                text-indent: 40px;

                }

10. 水平文本对齐

1. 属性名：text-align
2. 常用值：
   1. left: 左对齐（默认值）
   2. right ： 右对齐
   3. center : 居中对齐
3. 举例：
   1. div {

                        text-align: center;

                }

11. 垂直文本对齐

1. 顶部：无需任何属性，在垂直方向上，，默认就是顶部对齐。
2. 居中：对于单行文字，让 height = line-height 即可。
3. 底部：对于单行文字，后边用定位去做。

12. 行高

1. 属性名：line-height
2. 可选值：
   1. normal：由浏览器根据文字大小决定的一个默认值。
   2. 像素（px）
   3. 数字：参考自身 font-size 的倍数。（很常用）、
   4. 百分比：参考自身 font-size 的百分比。
3. 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
4. 举例：
   1. div {

                        line-height: 60px;

                        line-height: 1.5;

                        line-height: 150%;

                }

行高注意事项：

• 1. line-height 过小会怎么样？------ 文字产生重叠，且最小值是0，不能为负数。
  2. line-height 是可以继承的，且为了能更好的呈现文字，最好写好数值。
  3. line-height 和 height 是什么关系？
     1. 设置了 height ,那么高度就是height的值。
     2. 不设置height时，会根据 line-height 计算高度。

应用场景：

1. 对于多行文字，控制行与行之间的距离。
2. 对于单行文字，让height 等于 line-height ,可以实现文字的垂直居中。

13. vertical-align

1. 属性名：vertical-align.
2. 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
3. 常用值：
   1. baseline（默认值）：使元素的基线与父元素的基线对齐。
   2. top：使元素的顶部与其所在行的顶部对齐。
   3. middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
   4. bottom: 使元素的底部与其所在行的底部对齐。

特别注意：vertical-align不能控制块元素。

14. CSS列表属性

CSS属性名	功能	属性值
list-style-type	设置列表符号	none：不显示前边的标识（很常用！） square: 实心方块 disc：圆形 decimal：数字 lower-roman：小写罗马字 upper-roman：大写罗马字 lower-alpha：小写字母 upper-alpha: 大写字母
list-style-position	设置列表符号的位置	inside: 在li的里边 outside: 在lid的外边
list-style-image	自定义列表符号	uel(图片地址)
list-style	复合属性	没有数量顺序的要求

15.CSS表格属性

CSS属性名	功能	属性值
border-width	边框宽度	css中可用的长度值
border-color	边框颜色	css中可用的颜色值
border-style	边框风格	none : 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border	边框复合属性	没有数量 顺序的要求