【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
CSS 设置 文本 样式 手册 2.0 字体 写法
2023-09-14 09:07:26 时间
文章目录
一、 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 Flex弹性布局详解! (常用的12个属性)
- 怎么设置超链接网址css,css应该怎么设置超链接样式「建议收藏」
- Java web实现简登录页面(MyBatis+jsp+servlet+html+css+javascript)附源码「建议收藏」
- 【说站】css样式的组成
- 【说站】css module解决命名冲突
- CSS学习笔记:表格样式,图片样式【7/27】
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- css 指定孩子节点样式设置
- 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
- 【CSS】CSS 文本样式 ③ ( 文字排版案例一 | 设置标题 | div 中设置布局 | hr 标签设置横线 | p 标签分割段落 | 设置页面总体文字大小 | 修改 h1 标签样式 )
- 【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )
- 【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )
- CSS-绝对、相对、固定定位三者区别
- CSS 布局 – 水平 & 垂直对齐详解编程语言
- CSS颜色的四种写法
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- ss构建强大的网站:Linux、HTTP与CSS的结合(linuxhttpc)
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- CSS锦囊
- CSS代码缩写技巧
- 纯CSS实现上下左右都居中的代码
- 简单的加密css地址防止别人下载你的CSS文件的方法
- 通过javascript设置css属性的代码
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)