【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 / 字体 / 粗细 / 斜体 / 颜色 / 对齐 | CSS 标签显示模式 - 块级元素 / 行内元素 / 行内块元素 ) ★

最新推荐文章于 2024-09-26 13:10:57 发布

韩曙亮

最新推荐文章于 2024-09-26 13:10:57 发布

阅读量4.2k

点赞数 31

分类专栏： CSS 文章标签： css 前端 HTML 字体设置文本设置行内元素块级元素

本文链接：https://blog.csdn.net/shulianghan/article/details/136505897

版权

CSS 专栏收录该内容

142 篇文章 41 订阅

订阅专栏

一、CSS 字体文本样式

CSS 文本样式相关博客 :

1、CSS 字体设置

CSS 字体设置 :

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

font-size:16px;

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

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

粗细设置 : 使用 font-weight 设置字体粗细 ;
- normal : 默认不加粗样式 ;
- bold : 粗体 ;
- 1000 ~ 900 之间的数值 : 推荐使用数字进行粗体设置 ;
  - 400 是默认的 normal 样式 ,
  - 700 是 bold 粗体样式 ;

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 属性可以定义文本颜色 , 其颜色值有三种表示方式 :
- 预定义颜色 : 直接使用颜色的英文名称 , blue , red , green ;
- 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
- RGB 代码颜色 :
  - 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
  - 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

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;

二、CSS 标签显示模式

CSS 标签显示模式相关博客 :

1、块级元素

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

块级元素 : div 标签独占一行显示 , 对应块标签 ;
行内元素 : span 标签可以在一行放置多个进行显示 , 对应行内标签 ;

块级元素特点 :

独占一行 : 块级元素会独占父容器的一行 , 宽度默认充满父容器 ;
大小可控 : 标签的高度 , 宽度 , 内边距 , 外边距可以自定义设置 ;
默认宽度 : 块级元素默认宽度是父容器的 100% 宽度 ;
容器特点 : 块级元素作为容器 , 可以在其中放置块级元素和行内元素 ;

2、行内元素

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

链接标签 : <a>
行内标签 : 
文字相关标签 :  ,  ,  ,  , <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>