CSS 字体文本样式

一、CSS 字体文本样式

1、CSS 字体设置

CSS 字体设置 :

• 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ;

font-size:16px;

• 字体设置 : 常用 微软雅黑 / 宋体 / 黑体 , 如果 指定了多个字体 , 优先使用前面的字体 ;

font-family:"微软雅黑";font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";

• 粗细设置 : 使用 font-weight 设置 字体粗细 ;

• 400 是默认的 normal 样式 ,

• 700 是 bold 粗体样式 ;

• normal : 默认不加粗样式 ;

• bold : 粗体 ;

• 1000 ~ 900 之间的数值 : 推荐 使用 数字 进行粗体设置 ;

font-weight:700;

• 斜体设置 : 使用 font-style 设置 字体 是否倾斜 ;

• normal : 默认没有斜体的样式 ;

• italic : 斜体 ;

font-style:italic;

2、CSS 字体设置综合写法

字体样式 的顺序 , 不能打乱 , 必须严格遵守 ; 字体样式 属性值 之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;

{ font:font-style font-weight font-size/line-height font-family;}

示例

body {
	font: italic 400 16px "宋体"}

3、CSS 文本样式

CSS 文本样式 :

• 文本颜色 : color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 :

• 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)

• 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

• 预定义颜色 : 直接使用 颜色的英文名称 , blue , red , green ;

• 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;

• RGB 代码颜色 :

color:black;color:#FF0000;color:rgb(0, 0, 255);

• 文本水平对齐 : text-align 属性 , 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 :

• left : 左对齐 , 该值是默认值 ;

• right : 右对齐 ;

• center : 居中对齐 ;

text-align:center;

• 文本行间距 : line-height 属性 , 用于 设置 行间距  , 又称为 行高 ; line-height 属性 取值 :

• 像素 px : 最常用的单位 , 一般情况设置 行高 比字号大 7.8 px ; 文字默认 16 px , 行高为 24 px 即可 ;

• 相对值 em ;

• 百分比 ;

line-height: 24px;

• 文本垂直居中 : 设置 行高 = 高度 样式 , 文本即可在 盒子模型 中 垂直居中 ;

div {
   height: 200px; 	   /* 定义容器高度 */
   line-height: 200px; /* 与容器高度保持一致 */}

• 文本首行缩进 : text-indent 属性 , 用于 设置 首行缩进  ; text-indent 属性值如下 :

• em 值 : 字符宽度倍数 , 如果在 汉子段落 设置 2em , 就是首行缩进 2 个汉字 ; 推荐使用 ;

• px 值 : 指定 缩进像素值 , 不常用 ;

• 百分比值 : 指定 相对于浏览器窗口的百分比值 , 不常用 ;

text-indent: 2em;

• 文本装饰 : text-decoration 属性 , 用于 设置 文本装饰  ; text-decoration 属性值如下 :

• none : 默认属性 , 没有装饰 , 取消链接的下划线 ; ( 常用 )

• underline : 保留链接的下划线 ; ( 常用 )

• overline : 在文本上面划一条线 ; ( 基本不用 )

• line-through : 穿过文本一条线 ; ( 不常用 )

text-decoration: underline;

文字阴影

.simple-shadow {

    text-shadow: 2px 2px 4px #000000;

}

图片阴影

.img {

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

}

二、CSS 标签显示模式

1、块级元素

标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;

• 块级元素 : div 标签 独占一行显示 , 对应 块标签 ;

• 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ;

块级元素 特点 :

• 独占一行 : 块级元素 会 独占父容器 的一行 , 宽度默认充满父容器 ;

• 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ;

• 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ;

• 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ;

2、行内元素

行内元素 可以 在一行中 同时放置多个 , 常见的行内元素有 :

• 链接标签 : <a>

• 行内标签 : <span>

• 文字相关标签 : <em> , <i> , <strong> , <b> , <del>

行内元素特点 :

• 单行多个 : 在 一行 中 , 可以 设置显示多个 行内元素 ;

• 宽高无效 : 行内元素 的 宽高 设置是 无效的 , 以 子内容 的大小来确定 ;

• 默认宽度 : 行内元素 的 宽度 是 其本身 的 宽度 ;

• 容器特性 : 行内元素 作为 容器 , 只能 存放 文本 或 行内元素 , 不能存放 块级元素 ;

3、行内块元素

行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个 , 但是同时也可以为其设置 宽高属性 和 对齐属性 ;

• 图片标签 : <img>

• 表单标签 : <input>

• 单元格标签 : <td> , 表格 table 中的 行 tr 标签 中的 单元格 <td> 标签 ;

行内块元素特点 :

• 显示样式 : 行内块元素 默认 都在一行中显示 , 每个元素之间会自动添加间隔 ;

• 宽高设置 : 行内块元素 的 默认宽高 是 元素本身的宽高 , 但是也可以设置宽高 ;

• 样式设置 : 行内块元素 可以 设置 宽度 , 高度 , 内边距 , 外边距 , 行高 等属性 ;

4、块级元素 / 行内元素 / 行内块元素 相互转换

块级元素 / 行内元素 / 行内块元素 相互转换 :

• 块级元素 -> 行内元素 : 设置属性值 display: block; , 可以 将 行内元素 转换为 块级元素 ;

	<style>
		span {
			/* 行内元素 转换为 块级元素 */
			display: block;
		}
	</style>

• 行内元素 -> 块级元素 : 在 CSS 样式中设置属性值 display: inline; , 可以 将 块级元素 转为 行内元素 ;

	<style>
		div{
			/* 块级元素 转为 行内元素 */
			display: inline;
		}
	</style>

• 块级元素、行内元素 -> 行内块元素 : 在 CSS 样式中设置属性值 display: inline-block; , 可以 将 块级元素 或 行内元素 转换为 行内块元素 ;

	<style>
		div {
			/* 块级元素 或 行内元素 转换为 行内块元素 */
			display: inline-block;
		}
	</style>