前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体
- 可选值：
- normal，默认值，文字正常显示
- italic 文字会以斜体显示
- oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique它们的效果往往是一样的
- 一般我们只会使用italic
font-weight可以用来设置文本的加粗效果
可选值：
- normal，默认值，文字正常显示
- bold，文字加粗显示
该样式也可以指定100-900之间的9个值，
但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
font-variant可以用来设置小型大写字母
可选值：
- normal，默认值，文字正常显示
- small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写，
要比大写字母的大小小一些。
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
第一个示例：利用font设置字体相关的所有样式。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: red;
font: small-caps bold italic 20px "微软雅黑";
}
</style>
</head> <body>
<p>
日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！ABC abc
</p>
</body> </html>
看下效果：
第二个示例：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
/*设置一个文字大小*/
font-size: 55px;
/*设置一个字体*/
font-family: "agency fb";
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
</style>
</head> <body>
<p class="p1">日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！ABC abc</p>
</body> </html>
看下效果：
前端学习 -- Css -- 字体的几个属性学习的更多相关文章
- 前端之CSS字体和文本类属性
一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...
- 前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的 ...
- 前端学习 -- Css -- 字体分类
在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这 ...
- 前端之CSS列表及背景类属性
一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style) ...
- css字体样式
css字体样式(Font Style) 属性 css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight f ...
随机推荐
- 64位RHEL5系统上运行yum出现"This system is not registered with RHN”的解决方法
在红帽EL5上运行yum,提示“This system is not registered with RHN”,意思是没有在官网上注册,不能下载RH的软件包,替代方案是采用centos源. 1.卸载r ...
- python基础——类定义（转）
一.类定义: class <类名>: <语句> 类实例化后,可以使用其属性,实际上,创建一个类之后,可以通过类名访问其属性.如果直接使用类名修改其属性,那么将直接影响到已经实例 ...
- 20155236范晨歌_Web安全基础实践
20155236范晨歌_Web安全基础实践 目录 实践目标 WebGoat BurpSuite Injection Flaws Cross-Site Scripting (XSS) 总结 实践目标 ( ...
- 20155236范晨歌_Web基础
20155236范晨歌_Web基础 目录 实践目标 Apache 前端编程 后端编程 PHP MYSQL & 后端 简单SQL注入与XSS 发帖和会话管理 实践目标 (1)Web前端HTML ...
- [转]Linux 系统挂载数据盘
原文地址:http://blog.csdn.net/jeep_ouc/article/details/39289643 *Linux的云服务器数据盘未做分区和格式化,可以根据以下步骤进行分区以及格式化 ...
- S5PV210 DDR2初始化 28个步骤总结
看了一套视频,感觉DDR这个部分将的非常细致也很好,于是把视频内容花了一个多星期作了总结. 这个视频就是不知道是谁讲的,做好事不留名啊---那位知道告诉我哈-- 平台:S5PV210 DDR: 兼容 ...
- python 回溯法 子集树模板 系列 —— 6、排课问题
问题 某乡村小学有六个年级,每个年级有一个班,共六个班. 周一到周五,每天上6节课,共计30节课. 开设的课程 一年级:语(9)数(9)书(2)体(2)美(2)音(2)德(2)班(1)安(1) 二年级 ...
- 设计模式 笔记 迭代器模式 Iterator
//---------------------------15/04/26---------------------------- //Iterator 迭代器模式----对象行为型模式 /* 1:意 ...
- phpmyadmin连接MySQL服务器被拒绝
显示: phpMyAdmin 尝试连接到MySQL服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因: 可能是修改了 ...
- .NET Core容器化开发系列（一）——Docker里面跑个.NET Core
前言 博客园中已经有很多如何在Docker里面运行ASP.NET Core的介绍了.本篇主要介绍一些细节,帮助初学的朋友更加深入地理解如何在Docker中运行ASP.NET Core. 安装Docke ...