03 css字体样式

# 1.css font字体样式 #
## 1.1 font-size:大小 ##、

    body {
            font-size: 16px;
    }

注意

* 我们文字大小以后，基本就用px了，其他单位很少使用
* 谷歌浏览器默认的文字大小为16px
* 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

## 1.2 font-family:字体样式 ##

    语法
    font-family:Arial, "微软雅黑";
    若浏览器不支持Arial 则使用微软雅黑
    各种字体之间必须使用英文状态逗号隔开
    中文字体需要加英文状态下的引号。字体中包含空格等特殊符号，则必须加英文状态

## 1.3 unicode字体 ##

问题：

- 在css在设置字体名称，直接写中文是可以的，但是在文件编码（GB2312,UTF-8等）不匹配会产生乱码

解决:

- 方案一：你可以使用英文来替代，比如font-family:Arial
- 用unicode字体避免错误  \5FAE\8F6F\96C5\9ED1 替代微软雅黑

| 字体名称      | 英文名称            | Unicode 编码           |
| --------- | --------------- | -------------------- |
| 宋体        | SimSun          | \5B8B\4F53           |
| 新宋体       | NSimSun         | \65B0\5B8B\4F53      |
| 黑体        | SimHei          | \9ED1\4F53           |
| 微软雅黑      | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312    | \6977\4F53_GB2312    |
| 隶书        | LiSu            | \96B6\4E66           |
| 幼园        | YouYuan         | \5E7C\5706           |
| 华文细黑      | STXihei         | \534E\6587\7EC6\9ED1 |
| 细明体       | MingLiU         | \7EC6\660E\4F53      |
| 新细明体      | PMingLiU        | \65B0\7EC6\660E\4F53 |

## 1.4 font-weight:字体粗细##

- 在html 可以使用 b 和 strong 实现加粗
- 可以使用css实现，可是没有语义

| 属性值  | 描述                                                      |
| ------- | :-------------------------------------------------------- |
| normal  | 默认值（不加粗的）                                        |
| bold    | 定义粗体（加粗的）                                        |
| 100~900 | 400 等同于 normal，而 700 等同于 bold  我们重点记住这句话 |

## 1.5 font-style:字体风格 ##

- 在html中如何将字体倾斜我们可以用标签来实现
    - 字体倾斜除了用 i 和 em标签
- 可以使用css来实现

| 属性   | 作用                                                    |
| ------ | :------------------------------------------------------ |
| normal | 默认值，浏览器会显示标准的字体样式  font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。                            |

## 1.6 font综合写法 ##

    严格按照顺序  字号字体一定不能少
    font:font-style font-weght font-size/line-height font-family;
    font:italic 700 20px "黑体";

# 2.css外观属性

## 2.1 文本颜色 ##


| 表示表示       | 属性值                                  |
| :------------- | :-------------------------------------- |
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制       | #FF0000，#FF6600，#29D794               |
| RGB代码        | rgb(255,0,0)或rgb(100%,0%,0%)           |

## 2.2 text-align文本内容对齐 ##
    text-align: center;

| 属性   |       解释       |
| ------ | :--------------: |
| left   | 左对齐（默认值） |
| right  |      右对齐      |
| center |     居中对齐     |

## 2.3 text-indent 首行缩进 ##

设置首行缩进

单位：数值、em字符宽度、浏览器宽度百分比

## 2.4 line-height 行间距 ##

用于设置行间距

单位：px,em,百分比%

一般比字号大7、8号像素左右就可以了

## 2.5 text-decoration ##

text-decoration   通常我们用于给链接修改装饰效果

| 值           | 描述                                                  |
| ------------ | ----------------------------------------------------- |
| none         | 默认。定义标准的文本。取消下划线（最常用）           |
| underline    | 定义文本下的一条线。下划线也是我们链接自带的（常用） |
| overline     | 定义文本上的一条线。（不用）                          |
| line-through | 定义穿过文本下的一条线。（不常用）                    |

# 3.sublime 快捷 #

1. 生成标签直接输入标签名按tab键即可   比如  div   然后tab 键，就可以生成 <div></div>

2. 如果想要生成多个相同标签  加上 * 就可以了比如   div*3  就可以快速生成3个div

3. 如果有父子级关系的标签，可以用 >  比如   ul > li就可以了

4. 如果有兄弟关系的标签，用  +  就可以了比如 div+p

5. 如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了

6. 如果生成的div 类名是有顺序的，可以用自增符号  $

猜你喜欢