CSS——字体
1、字体样式font-family、颜色color
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class1 {
font-family: "楷体";
font-size: 20px;
color: black;
}
</style>
</head> <body bgcolor="aquamarine">
<center>
<p class=class1>
举头望明月，低头思故乡。
</p>
</center>
</body> </html>
如果定义多种字体的话，第1种字体样式系统没有，就会使用第2种，第2种没有的话，使用第三种，依次类推
2、字体大小font-size（绝对大小）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class1 {
font-size: 20px;
} .class2 {
font-size: 30px;
} .class3 {
font-size: 40px;
} .class4 {
font-size: xx-small;
} .class5 {
font-size: x-small;
} .class6 {
font-size: large;
} .class7 {
font-size: x-large;
}
</style>
</head> <body bgcolor="aquamarine">
<center>
<p class=class1>
举头望明月，低头思故乡。（20px）
</p>
<p class=class2>
举头望明月，低头思故乡。（30px）
</p>
<p class=class3>
举头望明月，低头思故乡。（40px）
</p>
<p class=class4>
举头望明月，低头思故乡。（xx-smaall）
</p>
<p class=class5>
举头望明月，低头思故乡。（x-small）
</p>
<p class=class6>
举头望明月，低头思故乡。（large）
</p>
<p class=class7>
举头望明月，低头思故乡。（x-large）
</p>
</center>
</body> </html>
绝对大小定义字体大小有两种方式：
（1）直接以px（像素）为单位定义字体大小。
（2）以关键字：xx-small，x-small，small，medium，large，x-large，xx-large定义字体大小。
3、字体的显示形式font-style
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css"> .class3 {
font-style:italic;
}
.class4 {
font-style:normal;
} .class5 {
font-style:oblique;
} </style>
</head> <body bgcolor="aquamarine">
<center> <p class=class3>
举头望明月，低头思故乡。
</p>
<p class=class4>
举头望明月，低头思故乡。
</p>
<p class=class5>
举头望明月，低头思故乡。
</p> </center>
</body> </html>
4、字体样式
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class4 {
text-decoration: line-through;
} .class5 {
text-decoration: none;
} .class6 {
text-decoration: overline;
} .class7 {
text-decoration: underline;
}
</style>
</head> <body bgcolor="aquamarine">
<center> <p class=class4>
举头望明月，低头思故乡。
</p>
<p class=class5>
举头望明月，低头思故乡。
</p>
<p class=class6>
举头望明月，低头思故乡。
</p>
<p class=class7>
举头望明月，低头思故乡。
</p> </center>
</body> </html>
5、字体加粗（九级）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class1 {
font-weight: 100;
} .class2 {
font-weight: 300;
} .class3 {
font-weight: 600;
} .class4 {
font-weight: 800;
} .class5 {
font-weight: 900;
}
</style>
</head> <body bgcolor="aquamarine">
<center> <p class=class1>
举头望明月，低头思故乡。
</p>
<p class=class2>
举头望明月，低头思故乡。
</p>
<p class=class3>
举头望明月，低头思故乡。
</p>
<p class=class4>
举头望明月，低头思故乡。
</p>
<p class=class5>
举头望明月，低头思故乡。
</p> </center>
</body> </html>
6、复合属性
普通的方式书写：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-style: inherit;
font-weight: ;
font-size: 30px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div>
床前明月光，疑是地上霜.
</div>
<div>
举头望明月，低头思故乡.
</div>
</body>
</html>
复合的方式书写：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font: italic 400 30px "arial black";
}
</style>
</head>
<body>
<div>
床前明月光，疑是地上霜.
</div>
<div>
举头望明月，低头思故乡.
</div>
</body>
</html>
在以复合的形式书写的时候，要注意属性之间的顺序，不能随意颠倒，并且，各个属性之间要以空格分隔。有些属性可以省略，但是size和family属性不能省略
7、取消掉链接的下划线
（1）普通方式：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
（2）取消掉下划线：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
CSS——字体的更多相关文章
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- Css字体中英文对照表
css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...
- css字体设置
css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...
- 2.css字体单位
这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...
- Css - 字体图标
Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...
- CSS 字体(font)实例
CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
- css字体中英文对照表（转）
在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style) ...
- css字体图标的制作和使用。
css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...
随机推荐
- Nunit与Xunit介绍
Nunit安装 首先说下,nunit2.X与3.X版本需要安装不同的vs扩展. nunit2.x安装 安装如上3个,辅助创建nunit测试项目与在vs中运行单元测试用例 . 1.Nunit2 Test ...
- 谷歌hack
0x00 网上搜集整理的一些可能会用到的Googlehack语法 0x01 intitle: 从网页标题中搜索指定的关键字,可专门用来搜索指定版本名称的各类 web 程序,也可用 allintitle ...
- 如何使用WorkManager执行后台任务(上)
0x00 简述 WorkManager 是 Android Jetpack中的一部分,它主要是封装了 Android 后台任务的调度逻辑.在前文<Android后台任务处理指南>一文中知道 ...
- error LNK2001: unresolved external symbol "__declspec(dllimport)
作为C++的小白,出现这个错误,是最头痛的.针对这种问题,我搜了网上的相关答案,很多都是在教Project ---> Settings中改动相关设置.我改了之后,问题依旧没有解决.后面查了这种问 ...
- Redis 学习笔记（篇九）：主从复制
Redis 中,可以通过执行 savleof 命令或者设置 slaveof 选项,让一个服务器去复制另一个服务器,我们称被复制的服务器为主服务器,而对主服务器进行复制的服务器则被称为从服务器. Red ...
- 多线程之pthread, NSThread, NSOperation, GCD
关于多线程会有一系列如下:多线程之概念解析 多线程之pthread, NSThread, NSOperation, GCD 多线程之NSThread 多线程之NSOperation 多线程之GCD p ...
- 2018年蓝桥杯b组国赛真题
1.标题:换零钞x星球的钞票的面额只有:100元,5元,2元,1元,共4种.小明去x星旅游,他手里只有2张100元的x星币,太不方便,恰好路过x星银行就去换零钱.小明有点强迫症,他坚持要求200元换出 ...
- 学习Lowdb小型本地JSON数据库
Lowdb是轻量化的基于Node的JSON文件数据库.对于构建不依赖服务器的小型项目,使用LowDB存储和管理数据是非常不错的选择. 一:lowdb 使用及安装 在项目中的根目录安装 lowdb 命令 ...
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
- egret之moveclip 序列帧动画
废话不多说,直接上代码: private addEffect(name, x: number, y: number, act?: string) { let data = RES.getRes(nam ...