HTML 学习笔记 CSS样式(字体)
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了))
css字体系列
在css中 有两种不同类型的字体系列名称
1.通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
2.特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")
指定字体系列
font-family 属性定义字体系列
body {font-family: sans-serif;}
字体风格
属性 font-style规定了字体的属性
该属性有三个值
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
字体变形
font-variant属性可以设定小写字母大写
字体加粗
font-weight设置文本的粗细
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
字体大小
font-size属性可以控制字体的大小
css字体实例:
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
p.font {
/*设置字体样式*/
font-family: "bodoni mt condensed";
/*设置字体粗细程度*/
font-weight: 400;
/*设置字体大小*/
font-size: 30px;
/*设置字体显示风格*/
font-style: italic;
}
p.variant {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>这一段是正常的显示</p>
<p class="font">这是一段文本 哈哈哈哈哈哈</p>
<p class="variant">tianlianfeng</p>
</body>
HTML 学习笔记 CSS样式(字体)的更多相关文章
- HTML 学习笔记 CSS样式(简介和语法)
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式(边框)
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式(框模型)
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式(链接)
我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
- HTML 学习笔记 CSS样式(文本)
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- 前端学习笔记--CSS样式--文本
1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
- HTML 学习笔记 CSS样式(相对定位 绝对定位)
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
随机推荐
- JavaScript学习05 定时器
JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...
- 【代码笔记】iOS-淡出淡入效果
一,效果图. 二,工程图. 三,代码. ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIVie ...
- WPF学习之路(十二)控件(Range控件)
ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...
- IO流03--毕向东JAVA基础教程视频学习笔记
提要 16 读取转换流17 写入转换流18 流操作规律-119 流操作规律-220 改变标准输入输出设备21 异常的日志信息22 系统信息 16 读取转换流 字符流体系中的InputStreamRea ...
- C# 重载运算符
如果你想让自己定义的类型可以用运算符进行运算,那么可以通过重载运算符来实现: 示例: class Salary { public int RMB { get; set; } public static ...
- MYSQL-GroupCommit
组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...
- 导出HTML
版权声明:本文为博主原创文章,未经博主允许不得转载.
- 烂泥:高负载均衡学习haproxy之安装与配置
本文由秀依林枫提供友情赞助,首发于烂泥行天下 有关高负载均衡的软件,目前使用比较多的是haproxy.nginx和lvs.下面我们就开始学习haprxoy这款软件. 一.haproxy介绍 以下开始介 ...
- 烂泥:NFS做存储与KVM集成
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 以前有关NFS的文章,我们介绍的都是NFS的使用挂载等等.这篇文章我们介绍有关NFS作为存储使用. 既然本篇文章的主题是有关NFS的,我们还是先把NFS ...
- dyld: Library not loaded: @rpath/libswiftCore.dylib 解决方法
解决: 设置Build Setting - > 搜索 embe关键字 -> 修改属性 见如下图: 如果更新了Xcode 8 这里变成: