字体样式大全_字体样式大全

一、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"; 

• 粗细设置 : 使用 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 标签显示模式 相关博客 :

• 【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> 

今天的文章
字体样式大全_字体样式大全分享到此就结束了，感谢您的阅读。