文章目录
- 一、CSS 字体文本样式
- 1、CSS 字体设置
- 2、CSS 字体设置综合写法
- 3、CSS 文本样式
- 二、CSS 标签显示模式
- 1、块级元素
- 2、行内元素
- 3、行内块元素
- 4、块级元素 / 行内元素 / 行内块元素 相互转换
一、CSS 字体文本样式
CSS 文本样式 相关博客 :
- 【CSS】CSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )
- 【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
- 【CSS】CSS 文本样式 ③ ( 文字排版案例一 | 设置标题 | div 中设置布局 | hr 标签设置横线 | p 标签分割段落 | 设置页面总体文字大小 | 修改 h1 标签样式 )
- 【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )
1、CSS 字体设置
CSS 字体设置 :
- 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ;
font-size:16px;- 字体设置 : 常用 微软雅黑 / 宋体 / 黑体 , 如果 指定了多个字体 , 优先使用前面的字体 ;
font-family:"微软雅黑";
font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";- 粗细设置 : 使用设置 字体粗细
- normal : 默认不加粗样式 ;
- bold : 粗体 ;
- 1000 ~ 900 之间的数值 : 推荐 使用 数字 进行粗体设置 ;
- 400 是默认的 normal 样式 ,
- 700 是 bold 粗体样式 ;
font-weight:700;- 斜体设置 : 使用设置 字体 是否倾斜 ;
- 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 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 :
- 预定义颜色 : 直接使用 颜色的英文名称
- 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF
- RGB 代码颜色 :
- 数值形式 : rgb(255, 0, 0)
- 百分比形式 : 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 : 最常用的单位 , 一般情况设置文字默认 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 标签显示模式 相关博客 :
- 【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
- 【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
- 【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
- 【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>
