字体颜色、类型与大小
第1关：字体颜色、类型与大小
- 本关任务
- 相关知识
- 字体颜色 color
- 字体类型 font-family
- 字体系列
- 字体栈
- 字体大小 font-size
- 设置方式
- 常用单位
- 像素
- em
- 百分比结合em
- 编程要求
- 测试说明
本关任务
本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下：
相关知识
一般而言，用于文本的CSS属性可以分为如下两类：
字体样式：用于字体的属性，包含字体类型、大小、粗细等；
文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。
在本关卡中，我们首先学习第一种字体样式属性。
字体颜色 color
字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>字体颜色</title><style type="text/css">p {font-size: 25px;}.main {color:lightslategray}.error {color: brown}.info {color:mediumseagreen}</style></head><body><p class="main">这是一行段落。</p><p class="error">这是一行段落。</p><p class="info">这是一行段落。</p></body></html>
显示效果如下：
提示：
- 在右侧编辑器左上方，点击代码文件，选择
font-color.html，修改任意代码之后，可以预览实时显示效果。你也可以自己尝试设置其他字体颜色。
字体类型 font-family
如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用font-family 属性定义文本的字体系列。
字体系列
CSS中， 有两种类型的字体系列：
通用字体系列 - 有相似外观的字体系统组合（比如
"Serif"或"Monospace"）；特定字体系列 - 具体的字体系列（比如
"Times"或"Courier"）。
通过设置HTML表格中不同格的字体属性，页面表格直观展示了字体类型： 表格HTML：
<body><table><thead><tr><th>通用字体系列</th><th>字体系列</th><th>描述</th></tr></thead><tbody><tr><td rowspan=2>Serif</td><td class="times">This is Times New Roman font.</td><td class="times">Serif字体中字符在行的末端拥有额外的装饰</td></tr><tr><td class="georgia">This is Georgia font.</td><td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td></tr><tr class="arial"><td>Sans-serif</td><td>Arial Verdana</td><td>Sans字体在末端没有额外的装饰</td></tr><tr><td rowspan=2>Monospace</td><td class="courier">This is Courier New font.</td><td class="courier">所有的等宽字符具有相同的宽度</td></tr><tr><td class="lucida">This is Lucida Console font.</td><td class="lucida">所有的等宽字符具有相同的宽度</td></tr></tbody></table>
使用CSS设置字体属性：
.times {font-family: "Times New Roman";}.georgia {font-family: "Georgia";}.arial {font-family: "Arial";}.courier {font-family: "Courier New";}.lucida {font-family: "Lucida Console";}
不同类型字体的效果如下：
字体栈
在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack)给浏览器提供多种选择。例如：
font-family: "Trebuchet MS", Verdana, sans-serif;
使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。
字体大小 font-size
在CSS中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。
设置方式
我们可以使用绝对和相对两种方式设置字体的大小，两种设置不同在于：
绝对大小：
将文本设置为指定的字体大小；
用户不能在不同的浏览器中改变文本大小；
绝对大小在确定用户设备大小时很有用。
相对大小：
相对于周围的元素来设置大小；
允许用户在不同的浏览器中改变文本大小。
常用单位
设置字体大小时，会使用到不同的单位。下面，我们来了解几种设置字体的常用单位。
像素
像素即px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。 例如， HTML:
<body><h1>一级标题通常最大</h1><h2>二级标题次之</h2><p>段落文字大小适中</p></body>
CSS:
h1 {font-size: 40px;}h2 {font-size: 30px;}p {font-size: 18px;}
设置字体之后的显示效果：
这种方式可以在Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。但是，这种调整是整个页面，而不仅仅是文本。
em
em的方式可以解决在部分Internet Explorer 中无法调整文本。
浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。
em 单位与像素转换公式为：
px/16=em
所以刚才同样的大小，通过em的方式设置为：
h1 {font-size:2.5em; /* 40px/16=2.5em */}h2 {font-size:1.875em; /* 30px/16=1.875em */}p {font-size:1.125em; /* 18px/16=1.125em */}
百分比结合em
为body元素设置默认大小时，可以使用百分百，同样是相对于16px：
body {font-size:100%;}
编程要求
学习了字体的颜色、大小和类型之后，让我们来使用CSS丰富九寨沟介绍页面吧，请在右侧的编辑框中修改style.css文件。
设置
h1，h2的font-family为：PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;字体大小： 使用**
em**的方式设置（需要转换px与em单位）：h1元素为35px的字体大小；h2元素为28px的字体大小；h3元素为20px的字体大小；.intro .subhead（intro类下的subhead子类）为18px的字体大小。
字体颜色：
设置
h2元素的字体颜色为：#7d717c；设置
h3元素的字体颜色为：green；设置
.intro类元素的字体颜色为#fefefe。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
//题目是简单的，不过我们刚开始要点击右上角的那个文件符号，进入下面这个编辑区
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
/* ********** BEGIN ***********/
font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/* ********** END ***********/
}
h1 {
/* ********** BEGIN ***********/
font-size:2.1875em;
/* ********** END ************/
}
h2 {
background-color: #eaebef;
/* ********** BEGIN ***********/
color:#7d717c;
font-size:1.75em;
/* ********** END ************/
}
h3 {
background-color: white;
/* ********** BEGIN ***********/
color:green;
font-size:1.25em;
/* ********** END ************/
padding-left: 10px;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
footer {
margin: 10px auto;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* ********** BEGIN ***********/
color:#fefefe;
/* ********** END ************/
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* ********** BEGIN ***********/
font-size:1.125em;
/* ********** END ************/
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
a:link {
color: #e10000;
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}
字体颜色、类型与大小相关推荐
- 论如何改变csdn中字体的类型和大小以及颜色
论如何改变csdn中字体的类型和大小以及颜色 csdn的简单了解 修改字体的类型 修改字体的大小 修改字体的颜色 csdn的简单了解 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类 ...
- 【java奇思妙想】一个能够改变字体颜色、字号大小、字体样式的html网页
代码实现 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
- python写excel标记文字颜色_python3使用xlwt时写入文档字体颜色和边框样式
转自:https://www.cnblogs.com/xiaodingdong/p/8012282.html 可借鉴的网址:https://www.programcreek.com/python/ex ...
- python写excel标记文字颜色_[知识积累]python3使用xlwt时写入文档字体颜色和边框样式--转载...
可借鉴的网址:https://www.programcreek.com/python/example/39979/xlwt.Alignment 可以直接通过pip安装xlwt 个人理解: xlwt中对 ...
- python3 字体颜色_python3使用xlwt时写入文档字体颜色和边框样式
转自:https://www.cnblogs.com/xiaodingdong/p/8012282.html 可借鉴的网址:https://www.programcreek.com/python/ex ...
- python设置excel字体颜色_[知识积累]python3使用xlwt时写入文档字体颜色和边框样式...
可借鉴的网址:https://www.programcreek.com/python/example/39979/xlwt.Alignment 可以直接通过pip安装xlwt 个人理解: xlwt中对 ...
- Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为多个子图添加总标题（main title）、自定义设置主标题字体类型、字体大小、字体颜色等
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为多个子图添加总标题(main title).自定义设置主标题字体类型.字体大小.字体颜色等 目录
- python使用matplotlib可视化、使用rcParams参数调整可视化图像中线条宽度、线条类型、文本字体、字体大小、字体颜色、字体类型、文本颜色等
python使用matplotlib可视化.使用rcParams参数调整可视化图像中线条宽度.线条类型.文本字体.字体大小.字体颜色.字体类型.文本颜色等 目录
- CSDN发布文章如何设置字体颜色、类型、大小和字体背景
一.字体颜色 常见的颜色: 黑色:000000 蓝色:0000FF 绿色:00FF00 墨绿:00FFFF 红色:FF0000 洋红:FF00FF 黄色:FFFF00 白色:FFFFFF 例如红色 更 ...
最新文章
- 一文详解CMakeLists文件编写语法规则详解
- Velocity语法大全
- 【python 3.6】python读取json数据存入MySQL（一）
- Web开发-Django初识及实战
- 鸿蒙概念爆发,叶子看盘：华为鸿蒙概念爆发，这两只龙头已启动！
- wxPython python3.x下载地址
- 排序 —— 希尔排序（Shell sort）
- 输入法黑科技：语音识别准确率98% 用户超过6亿
- @Autowired @Qualifier
- 哈夫曼编码(Huffman coding)的那些事,(编码技术介绍和程序实现)
- 轻松学网络设备之思科交换机搭建虚拟局域网
- JAVA核心基础笔记(上)
- 同一服务器不同端口网页,Apache Web服务器，在同一服务器上的不同端口上的多个应用程序...
- css里的英文翻译,css常见英文翻译
- 利用Freemarker模板生成doc或者docx文档（转载整理）
- 古月 ROS移动机器人实战 二维slam地图构建 笔记
- linux 创建线程 execvp,execvp使用实例
- 【嵌入式开发基础】gn ninja命令安装
- android通知栏广告
- 欢迎使用淘宝API接口