头歌--CSS从入门到精通——文本与字体样式

最新推荐文章于 2025-02-01 16:41:33 发布
最新推荐文章于 2025-02-01 16:41:33 发布
阅读量2.6k 收藏 19
点赞数 11
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74303175/article/details/136892390
版权
这篇文章详细介绍了CSS中的字体颜色、类型、大小、粗细、风格以及文本装饰和布局的设置，包括了h1、h2、h3等元素的样式和链接的样式调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第1关 字体颜色、类型与大小

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 ***********/
font-size: 1.75em;
color: #7d717c;
    /* ********** END ************/
}

h3 {
    background-color: white;
    /* ********** BEGIN ***********/
font-size: 1.25em;
color: green;
    /* ********** 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;
}

第2关 字体粗细与风格

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 {
    /* 设置h1, h2 的font-family*/
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /* ********** BEGIN ***********/
font-weight: normal;
    /* ********** END ***********/
}

h1 {
    /* 设置h1元素为 35px 的字体大小 */
    font-size: 2.1875em;
    /* 35px/16px */
}

h2 {
    background-color: #eaebef;
    /* 设置h2元素的字体颜色为：#7d717c */
    color: #7d717c;
    /* 使用em的方式设置h2元素为 28px 的字体大小 */
    font-size: 1.75em;
    /*28px/16px */
}

h3 {
    background-color: white;
    /* 使用em的方式设置h3元素为 20px 的字体大小 */
    font-size: 1.25em;
    /* 设置h3元素的字体颜色为：green */
    color: green;
    padding-left: 10px;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

/* 子选择器 */

em,
a:link,
.intro .subhead {
    font-weight: bold;
}

footer {
    /* ********** BEGIN ***********/

font-weight: light;
font-style: italic;
    /* ********** END ***********/
    margin: 10px auto;
}

footer a {
    font-style: normal;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* 设置 .intro 类元素的字体颜色为 #fefefe */
    color: #fefefe;
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
    font-size: 1.125em;
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

a:link {
    /* 设置 a:link 元素的字体颜色为 #b44f4f */
    color: #e10000;
}

a:visited {
    color: #b44f4f;
}

a:hover {
    color: #f00;
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

第3关 文本装饰与文本布局

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 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: normal;
    /*********** BEGIN ***********/
text-align: center;
    /************ END ************/
}

h1 {
    /* 设置h1元素为 35px 的字体大小 */
    font-size: 2.1875em;
    /* 35px/16px */
}

h2 {
    background-color: #eaebef;
    /* 设置h2元素的字体颜色为：#7d717c */
    color: #7d717c;
    /* 使用em的方式设置h2元素为 28px 的字体大小 */
    font-size: 1.75em;
    /*28px/16px */
}

h3 {
    background-color: white;
    /* 使用em的方式设置h3元素为 20px 的字体大小 */
    font-size: 1.25em;
    /* 设置h3元素的字体颜色为：green */
    color: green;
    padding-left: 10px;
    /*********** BEGIN ***********/
    text-align: left;
    /************ END ************/
}

p {
    text-align: justify;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

/* 子选择器 */

em,
a:link,
.intro .subhead {
    font-weight: bold;
}

footer {
    font-weight: light;
    font-style: italic;
    /* ********** BEGIN ***********/
    text-align: center;
    /* ********** END ***********/
    margin: 10px auto;
}

footer a {
    font-style: normal;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* 设置 .intro 类元素的字体颜色为 #fefefe */
    color: #fefefe;
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
    font-size: 1.125em;
    text-align: center;
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

.photos {
    /*********** BEGIN ***********/
    text-align: center;
    /*********** END *************/
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

/* 默认显示样式 */

a:link {
    color: #e10000;
    /*********** BEGIN ***********/
text-decoration: none;
    /*********** END *************/
}

a:visited {
    color: #b44f4f;
}

/* 鼠标放在上面的显示样式 */

a:hover {
    color: #f00;
    /*********** BEGIN ***********/
text-decoration: underline;
    /*********** END *************/
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

CSS从入门到精通——基础知识
Junds0的博客
09-05 1993
第1关：初识CSS：丰富多彩的网页样式 通过编写CSS给网页添加基本的样式,补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：修改h1标题的text-align为居中显示，字体大小为40px；p段落的颜色为灰色:grey,字体大小为18px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</t
Educoder：CSS从入门到精通——文本与字体样式
QingNiaoJun的博客
04-06 3289
目录：第1关：字体颜色、类型与大小第2关：字体粗细与风格第3关：文本装饰与文本布局 第1关：字体颜色、类型与大小 本关任务 本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下： 参考答案 body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right
CSS--头歌（educoder）实训作业题目及答案
热门推荐
qq_35353972的博客
10-09 3万+
CSS--头歌（educoder）实训作业题目及答案
【CSS】：字体与文本样式
最新发布
Yui_的博客
02-01 671
【CSS】：字体与文本样式
头歌--CSS从入门到精通——基础选择器
m0_74303175的博客
03-21 3322
【代码】头歌--CSS从入门到精通——基础选择器。
CSS从入门到精通（CSS字体和文本样式）
weixin_33724659的博客
03-30 542
主要介绍css字体和文本样式 原文请访问我的技术博客番茄技术小栈 CSS字体 文字样式属性 字体:font-family 文字大小:font-size 文字颜色:font-color 文字粗细:font-weight 文字样式:font-style font-family字体属性 定义元素内文字以什么字体来显示 语法: font-family:[字体1][,字体2][,...] 复制代码...
头歌-CSS基础
qq_56355440的博客
03-06 1137
<!DOCTYPEhtml> <htmllang="zh"> <head> <metacharset="UTF-8"> <title>文本装饰</title> <styletype="text/css"> a{ text-decoration:none; } p{ text-orientation:line-through...
头歌——CSS从入门到精通——定位与布局
Changersh
12-15 2758
CSS从入门到精通——定位与布局
CSS从入门到精通——文本与字体样式
09-18
CSS从入门到精通的文本与字体样式包括字体颜色、文本装饰和字体风格。在CSS中，可以使用color属性设置字体颜色，例如使用`color:lightslategray`来设置字体颜色为lightslategray。可以使用text-decoration属性设置...
css从入门到精通——文本与字体样式
06-06
从入门到精通，CSS学习的重点在于理解选择器、属性和值的概念，并了解如何使用它们来定义样式。 文本样式方面，您可以学习如何设置字体、字体大小、字体颜色、加粗、倾斜、下划线等。 字体样式方面，您可以学习...
edu平台Web实训CSS3——文本字体样式1
Aime__的博客
12-13 376
edu平台Web实训CSS3——文本字体样式1
Head First HTML与CSS课后答案
06-25
前端入门书籍《Head First HTML与CSS》课后答案、示例代码等
Web-前端html+css从入门到精通 144. loading加载动画效果.zip
05-23
本课程"Web-前端html+css从入门到精通 144. loading加载动画效果"特别关注了一个重要的细节——loading加载动画，这是用户在等待网页内容完全加载时常见的一种交互元素。 首先，我们需要理解HTML和CSS的基本概念。...
头歌-CSS入门
somewon的博客
03-06 9731
四川师范大学 CSS 头歌
字体颜色、类型与大小
m0_51863774的博客
11-02 2057
使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。指定的字体都不可用时，便会使用浏览器的默认字体。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用。字体样式：用于字体的属性，包含字体类型、大小、粗细等；
CSS从入门到精通——背景样式（续）
qq_42212132的博客
07-31 1661
显示效果如图： 本例中，设置right top代表放置在元素内边距区的右上角。 对于具体位置，大家可以使用如下关键字的组合： 属性值 top left top center top right center left center center center right bottom left bottom center bottom right ...
CSS从入门到精通（基础篇）
weixin_34288121的博客
03-30 1307
从头学习了一遍css，包括：css基础, css选择器，css优先级，CSS继承和层叠、css样式命名等。 原文请访问我的技术博客番茄技术小栈 CSS基础 HTML、CSS、JavaScript关系 HTML是网页内容的载体 CSS样式是表现(外观控制) JavaScript是行为，用来实现网页特效效果 什么是CSS CSS 层叠样式表 (Cascading Style Sheets) 用...
头歌：使用 HTML/CSS 实现 Educoder 顶部导航栏
m0_61280105的博客
10-27 3423
头歌实践项目：使用 HTML/CSS 实现 Educoder 顶部导航栏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值