文章目录

  • 一、 CSS 2.0手册使用
    • 1、 按照文档层次查找
    • 2、 搜索关键字查找文档
  • 二、 font-weight 字体粗细设置
    • 1、 语法简介
    • 2、 代码示例
  • 三、 font-style 字体斜体设置
    • 1、 语法简介
    • 2、 代码示例
  • 四、 font 字体样式综合写法
    • 1、 语法简介
    • 2、 代码示例
      • ① 不使用综合字体样式的代码
      • ② 使用综合字体样式的代码
      • ③ 执行效果

一、 CSS 2.0手册使用

1、 按照文档层次查找

CSS 的使用方法可在 CSS 2.0 手册 中查询 ;


这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧的 " 属性 | 字体 | font-weight " 中 , 可以找到该文档 ;

在右侧的 语法 和 参数 中 , 详细的说明了 属性的作用 , 以及 属性值如何设置 ;

2、 搜索关键字查找文档

此外 , 还可以在 CSS 2.0 手册的 搜索栏 , 搜索该属性 ;

二、 font-weight 字体粗细设置

1、 语法简介

在 HTML 中可以使用

  • b
  • strong ( 推荐使用 )

标签 , 实现 文本粗体显示 ;

如果 使用 标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ;

在 CSS 中 , 可使用 font-weight 设置 字体粗细 ;

font-weight 属性值设置 :

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

2、 代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

运行效果 :

三、 font-style 字体斜体设置

1、 语法简介

在 HTML 中可以使用

  • i
  • em ( 推荐使用 )

标签 , 实现 文本斜体显示 ;

如果 使用 标签 斜体显示 , 则可以使用 CSS 设置其 不倾斜 ;

在 CSS 中 , 可使用 font-style 设置 字体粗细 ;

body {font-style:italic;
}

font-style 属性值设置 :

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

2、 代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;font-style:italic;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

显示效果 :

四、 font 字体样式综合写法

1、 语法简介

font 字体样式综合写法语法 :

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

上述 字体样式 的顺序 , 不能打乱 , 必须严格遵守 ;

字体样式 属性值 之间 , 使用空格隔开 ;

font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;

2、 代码示例

① 不使用综合字体样式的代码

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;font-style:italic;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;font-style:italic;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

② 使用综合字体样式的代码

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font: italic 400 16px "宋体"}.tittle {font: italic 700 20px "黑体"}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

③ 执行效果

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )相关推荐

  1. html css标记文本,HTML图像标记和CSS核心基础和文本相关样式

    HTML常用图像格式 1.GIF格式 GIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失.再加上GIF支持透明(全透明或全不透明),因此很适 ...

  2. css英文文本转化属性的是,css文本属性_CSS教程_郭隆邦技术博客

    CSS文本属性 字体font属性针对的是单个字的字体格式font-family.大小font-size.粗细font-weight等样式, 文本text属性针对的是文本,不是单个字符,比如文本的字符间 ...

  3. CSS文字文本样式（font字体、css外观属性）

    1. font字体 1.1. font-size:大小 作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...

  4. css字体 text,css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

  5. html的font字号1-7,CSS 字体大小font-size设置

    CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS7为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...

  6. 怎样通过font属性控制CSS字体样式？

    为了更方便地控制网页中各种各样的字体,CSS提供了一系列的字体样式属性,具体如下. (1)font-size属性:字号 font-size属性用于设置字号,该属性的属性值可以为像素值.百分比数值.倍率 ...

  7. css的font修改颜色,css的font字体颜色如何设置

    css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...

  8. php如何导入字体样式,css怎么引入外部字体？css 字体样式设置的方法（实例）...

    在浏览器显示中,页面上不同的字体样式,不仅提升了页面的美观度,也提升了用户的浏览交互性.那么这些不同的字体样式是怎么用css设置的?本章就给大家带来css如何引入外部字体?css 字体样式设置的方法( ...

  9. 怎么设置php的css颜色代码,CSS的文本字体颜色如何设置

    这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使用RGB模式颜色 网页中颜色的运用是网页必不 ...

最新文章

  1. RDKit | 基于Lipinski规则过滤化合物库
  2. 深圳大学李猛教授报告：海洋古菌的微生物组学(11月17日晚7点)
  3. Python实战案例，pyecharts模块，Python实现5G数据
  4. 全新的 flow.ci Dashboard 上线
  5. 洗礼灵魂，修炼python（54）--爬虫篇—urllib2模块
  6. linux生成免密码登录
  7. Go中对两个 nil 进行比较的结果是什么？
  8. C#综合揭秘——深入分析委托与事件(上)
  9. 通过CMD命令行获取文件夹下的所有文件名称（电脑小白专用）
  10. eclipse adt如何切换到设计界面_如何设计出优秀的UI界面？这4个方面帮你快速优化...
  11. hustoj 忘记admin密码的解决方案
  12. badboy设置中文_录制脚本badboy工具使用手册
  13. m1也能用的视频无损放大软件：topaz video enhance ai mac版
  14. 如何在两台服务器之间传输文件
  15. HTML2——图像、超链接
  16. 银屑病与大肠相关机制（调研手稿五）
  17. 实用又方便电脑快捷键
  18. Nginx Web 基础入门
  19. 三层架构和SpringMVC概述
  20. 利用python写一个简单的双色球彩票系统

热门文章

  1. ES的ik分词器ik_smart和ik_max_word区别
  2. 蓝牙常用的profile
  3. final修饰局部变量
  4. java script error_java script error 错误解决方法
  5. mmclassification
  6. 常见功能测试点的测试用例大全
  7. Citavi、Endnote、Mendeley 功能大比拼！到底哪一款才是众望所归的终极文献管理软件？
  8. centos6.2安装Opera
  9. Linux 下 输入账号 密码 显示 last login:Mon Apr 1 05:49:00 on tty1 但是跳转不进去系统？
  10. 揭秘家用路由器0day漏洞挖掘技术读书笔记 D-Link DIR-645 authentication.cgi溢出漏洞分析