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;
}
二、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>
