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","sans-serif";

                  }

注意点:
1、使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找

2.如果字体名包含空格，必须使用引号包裹起来。

3.可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通

常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体)。

4.windows 系统中，默认的字体就是微软雅黑。

3.字体风格

· 属性名:  font-style      （  作用:  控制字体是否为斜体。）

· 常用值 :

1. normal: 正常(默认值)

2.italic: 斜体(使用字体自带的斜体效果)

3. oblique :斜体(强制倾斜产生的斜体效果)

注：实现斜体时，更推荐使用  italic。

· 语法 :             div {

                                    font-style: italic;

                            } 

4.字体粗细

· 属性名:font-weight                   (作用:控制字体的粗细。)

常用值: 关键词或数值

关键词：

1. lighter : 细

2. norma : 正常

3. bold : 粗

4. bolder : 很粗  (多数字体不支持)

数值 :

1.100~1000且无单位，数值越大，字体越粗 ( 或一样粗，具体得看字体设计时的精确程度 )。

2.100~300 等同于 1ighter ,  400~500等同于 normal ，600及以上等同于 bold .

· 语法 :              div {

                                       font-weight: bold;

                                }

                          div {

                                       font-weight: 600;

                              }

5.字体复合写法

· 属性名: font，可以把上述字体样式合并成一个属性。

· 作用: 将上述所有字体相关的属性复合在一起编写。

· 编写规则 :

1. 字体大小、字体族必须都写上。

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

3. 各个属性间用空格隔开。

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

属性。

二、CSS文本属性

1.文本颜色

· 属性名: color       ( 作用: 控制文字的颜色。)

· 可选值:

1. 颜色名

2. rgb或rgba

3. HEX 或 HEXA(十六进制)

4. HSL 或 HSLA

开发中常用的是:rgb/rgba 或HEX/HEXA(十六进制)。

·举例:                   div {
                                          color: rgb(112,45,78);

                                 }

2.文本间距

· 字母间距: letter-spacing

· 单词间距: word-spacing  (通过空格识别词)

· 属性值为像素(px)，正值让间距增大，负值让间距缩小。

3.文本修饰

· 属性名: text-decoration        (  作用: 控制文本的各种装饰线。)

· 可选值:

1. none : 无装饰线(常用)

2. underline : 下划线(常用)

3. overline : 上划线

4. line-through : 删除线可搭配如下值使用:

       1. dotted : 虚线
       2. wavy : 波浪线
       3.也可以指定颜色

· 举例:             a {
                                 text-decoration: none;

                          }

4.文本缩进

· 属性名: text-indent.

· 作用: 控制文本首字母的缩进。

· 属性值: css中的长度单位。

例子 ：                div {

                                          text-indent:40px;

                                 } 

后面我们会学习 css 中一些新的长度单位，目前我们只知道像素( px)。

5.文本对齐_水平

· 属性名: text-align.

· 作用: 控制文本的水平对齐方式。

· 常用值:

1. left : 左对齐(默认值)

2. right : 右对齐

3. center : 居中对齐

· 举例:                 div {

                                    text-align: center;

                                }

6.细说 font-size

1.由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小

例如:font-size 设为40px，最终呈现的文字，可能比40px大，也可能比40px小。

2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

4.7行高

·属性名:line-height

·作用:控制一行文字的高度。可选值:

1. normal: 由浏览器根据文字大小决定的一个默认值。

2.像素( px)。

3.数字: 参考自身 font-size的倍数(很常用)。

4.百分比:参考自身 font-size的百分比。

· 备注:由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影

观感。

·举例:                  div {

                                         line-height: 60px; line-height: 1.5; line-height:150%;

                                   }

·行高注意事项:

1. line-height 过小会怎样?--文字产生重叠，且最小值是0，不能为负数。

2.1ine-height 是可以继承的，且为了能更好的呈现文字，最好写数值。

3. line-height 和height 是什么关系?

 设置了 height，那么高度就是height的值。

不设置height的时候，会根据line-height计算高度。

.应用场景:

1.对于多行文字:控制行与行之间的距离。

2.对于单行文字: 让 height等于 line-height，可以实现文字垂直居中。