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字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...
随机推荐
- php cmd命令行 导入 与备份
- 源码分析--dubbo服务端暴露
服务暴露的入口方法是 ServiceBean 的 onApplicationEvent.onApplicationEvent 是一个事件响应方法,该方法会在收到 Spring 上下文刷新事件后执行服务 ...
- [Spring cloud 一步步实现广告系统] 2. 配置&Eureka服务
父项目管理 首先,我们在创建投放系统之前,先看一下我们的工程结构: mscx-ad-sponsor就是我们的广告投放系统.如上结构,我们需要首先创建一个Parent Project mscx-ad 来 ...
- nginx单机1w并发优化
目录 ab工具 整体优化思路 具体的优化思路 编写脚本完成并发优化配置 性能统计工具 tips 总结 ab工具 ab -c 10000 -n 200000 http://localhost/index ...
- AI资源对接需求汇总：第3期
更好的阅读体验,请查看首发原文链接:AI资源对接需求汇总:第3期 平台介绍 平台由人工智能领域几个知名原创公众号发起,总读者约25万. 主要面向人工智能领域的从业者,涵盖图像处理.三维计算机视觉.机器 ...
- 吃货眼中的sqlalchemy外键和连表查询
前言 使用数据库一个高效的操作是连表查询,一条查询语句能够查询到多个表的数据.在sqlalchem架构下的数据库连表查询更是十分方便.那么如何连表查询?以及数据库外键对连表查询有没有帮助呢?本篇文章就 ...
- hive 四种表，分区表，内部，外部表，桶表
Hive四大表类型内部表.外部表.分区表和桶表 一.概述 总体上Hive有四种表:外部表,内部表(管理表),分区表,桶表.分别对应不同的需求.下面主要讲解各种表的适用情形.创建和加载数据方法. 二.具 ...
- [python] - profilers性能分析器
1. 性能分析器: profile, hotshot, cProfile 2. 作用: 测试函数的执行时间 每次脚本执行的总时间
- [python] - 读取文件内容，并输出
1.读取文件,并逐行输出内容,代码如下: # coding=gbk import os path = 'E:\python_practice' os.chdir(path) fname = raw_i ...
- [python]python中的if, while, for
python中的代码块,通过缩进对齐,来表达代码逻辑. 1. if语句 if expression1: if_suite elif expression2: elif_suite else: else ...