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字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...
随机推荐
- cmd命令行界面运行python脚本显示的中文不正确
在notepad++中编写了一个脚本(如图一),在cmd命令行界面中运行却发现显示的中文不正确(如图2).图3显示的是cmd界面的默认编码. 解决方案:将脚本的注释语言改为GBK,编码格式改为ANSI ...
- Go 语言基础——go语言如何优雅的进行测试
我们可以为Go程序编写三类测试,即:功能测试(test).基准测试(benchmark),也称性能测试(example) #### 测试文件的约定 1. 测试文件的主名称应该以被测试文件主名称为先导, ...
- windows和linux下的本机IP的获取(亲测有效)
package com.handsight.platform.fras.util; import org.apache.log4j.Logger; import javax.servlet.http. ...
- node.js的Promise对象的使用
Promise对象是干嘛用的? 将异步操作以同步操作的流程表达出来 一.Promise对象的定义 let flag = true; const hello = new Promise(function ...
- pip3 Traceback (most recent call last)错误调试
百度找的答案不知道是否正确反正不适用于deepin,就手动调试了一下,结果修复了原理不清楚. 调试环境: OS:deepin 15.11 Python3-pip 错误提示: python@python ...
- Mybatis的一级缓存和二级缓存的理解以及用法
程序中为什么使用缓存? 先了解一下缓存的概念:原始意义是指访问速度比一般随机存取存储器快的一种RAM,通常它不像系统主存那样使用DRAM技术,而使用昂贵但较快速的SRAM技术.对于我们编程来说,所谓的 ...
- 关于ionic app $http.get()无法请求，导致页面没有数据的问题
ionic app 打包后在真机上运行,无法用正常使用http.get(),这种情况被称为“白名单”,解决方法:切换到项目根目录,执行命令:cordova plugin add cordova-plu ...
- （五十二）c#Winform自定义控件-LED数字
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- 解决 java Could not resolve resource location pattern [classpath:sql/*.xml] 的问题
时间过的真快,转眼间已经有2年了.2年里发生了太多的事,有些事依稀还记得,但更多的已经忘记.忘记了那些烦恼与忧愁,以为自己会快乐,才发现一切并不是以自己的意志为转移.终于在迷途中迷失了自己, 再也回不 ...
- 《快照读、当前读和MVCC》
1.快照读 快照读是基于 MVCC 和 undo log 来实现的,适用于简单 select 语句,避免了幻读. 读已提交:一个事务内操作一条数据,可以查询到另一个已提交事务操作同一条数据的最新值.( ...