CSS字体，文本属性

一、CSS字体

1. font-family

作用：设置文本的字体系列
语法：font-family:字体名称；

常用值：

一个字体名称或系列名称（介绍常用字体名称、字体系列）
- 微软雅黑 Microsoft YaHei
- 宋体 SimSun
- 黑体 HeiTi
- 楷体 KaiTi

多个字体名称

逗号分开如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

.box{/*font-family:"微软雅黑","宋体";*//*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/font-family:"微软雅黑abc","宋体"; /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}

注意:如果字体名称包含空格、汉字、特殊字符，必须加引号!
```
.box{font-family: "Microsoft YaHei";}
```

2.font-size

作用：设置字体的大小
语法：font-size:值；
常用值：
- 长度值（通常是像素px）
- 百分比（相对于父元素计算）
- em相对单位
  
  如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号
大多数浏览器的默认值字号：16px

3. font-style

作用：设置字体的大小
语法：font-style:值；
常用值：
- normal默认值
- italic斜体显示

4. font-weight

作用：设置字体粗细
语法：font-weight:值；
常用值：
- normal默认值
- bold加粗
- 100-900九级字重，400相当于normal，700相当于bold
- 注意：不是所有字体都内置了九级字重

5. line-height

作用：设置行高（效果是产生文本行间距）
语法：line-height:值；
特性：实现单行文本的垂直居中
测量：文字高+行间距
常用值
- normal默认。设置合理的行间距。
px 设置固定的行间距。
- number设置数字，此数值会与当前的字号相乘来设置行间距。
- 百分比:相对于font-size计算
```
.box{/*line-height:2;*/line-height:200%; /*产生的效果一致都是字号的两倍*/
}
```

6. font简写

作用：设置所有字体属性
语法：

font: 字体风格字体加粗字号/行高字体；
总结：

只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简代码
```
.box2{/* font:italic bold 20px "宋体"; */font:20px "宋体";
}
```

二、CSS文本

1. text-align

作用：设置文本的水平对齐方式
语法：text-align:值；
常用值
- left居左对齐 [默认值]
- right居右对齐
- center居中对齐
- justify两端对齐
注意：适用于块状元素

2. text-decoration

作用：设置文本装饰
语法：text-decoration:值；
常用值
- none 默认。定义标准的文本。【常用】
- underline 定义文本下的一条线【常用】
- line-through 定义穿过文本的一条线。【比较常用】
- overline 定义文本上的一条线。【不常用】

3. text-indent

作用：设置文本块首行的缩进
语法：line-height:值；
常用值
- 默认值：0
- 长度值，px,em(更方便)
- 百分比: 相对于元素内容宽进行计算
- 允许负值

4. color

作用：设置文字的颜色
语法：color:颜色值；
常用值
- 颜色的常用表式方法
  - 颜色名称：如red、blue等
  - 十六进制颜色表示方法
    - 语法：如#ff0000
    - 说明：#rrggbb r,g,b取值范围为00-ff
      - r red 红色
      - g green 绿色
      - b blue 蓝色
    - 认识常见颜色的写法
- 白色（#ffffff）、黑色（#000000）红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)
rgb颜色表示方法
- 语法：rgb(255,0,0)
  - 说明：rgb(r,g,b) r,g,b取值范围为0-255
    - 认识常见颜色的写法
      - 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)

三、文本属性继承性

简单渗透:字体文本属性大多具有继承性。

可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color

不可继承 text-decoration(穿透性)

CSS字体，文本属性相关推荐

CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
2.css字体文本属性
一.字体风格 font-family 字体(比如宋体,微软雅黑) font-size 字体大小 font-weight 字体粗细(700加粗,400正常) font-style 字体风格(normal ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
CSS 字体文本样式
文章目录 CSS字体文本样式字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格综合简写 ...
CSS字体样式属性（font-size、font-family、Unicode、font-weight、font-style、font）
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度 ...
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
一.常见的CSS字体样式属性 1.font-size属性:用于设置字体字号该属性的值有相对长度单位:em(相对当前对象内文本字体尺寸)px(像素,最常用) 绝对长度单位:in(英寸)cm(厘米)m ...
html中样式属性有哪些,css字体样式属性有哪些？
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
HTML5常用的文本标签及css字体样式属性
HTML5常用的文本标签标签描述标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...
CSS-基础选择器、字体文本属性、引入方式
CSS简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,有时我们也会称之为 CSS 样式表或级联样式表. CSS 是也是一种标记语言:主要用于设置 HTML 页 ...

CSS字体，文本属性

一、CSS字体

二、CSS文本

三、文本属性继承性

CSS字体，文本属性相关推荐

最新文章

热门文章

CSS字体 ，文本属性

一、CSS字体

二、CSS文本

三、文本属性继承性

CSS字体 ，文本属性相关推荐

最新文章

热门文章

CSS字体，文本属性

CSS字体，文本属性相关推荐