CSS从入门到精通——文本与字体样式1.0

最新推荐文章于 2024-07-05 17:37:33 发布

少年游四方

最新推荐文章于 2024-07-05 17:37:33 发布

阅读量3.2k

点赞数 3

分类专栏： # Web技术应用基础——CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_45823118/article/details/115353316

版权

Web技术应用基础——CSS 专栏收录该内容

13 篇文章 22 订阅

订阅专栏

1.字体颜色、类型与大小

任务描述
相关知识

任务描述

请在右侧的编辑框中修改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。

本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下：
在这里插入图片描述
【这本来是动图的，但是上传大小受限了，然后，我并不想开通几百块钱的VIP，所以将就着截了图】

相关知识

一般而言，用于文本的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%;
}

代码文件：

step7/CSS/style.css:

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;
}

step7/font-color.html:

<!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>

step7/font-family.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Font</title>
  <style type="text/css">
    body {
      font-size: 1.1em;
    }

    table {
      border-collapse: collapse;
    }

    caption {
      font-weight: bold;
      margin-bottom: .5em;
    }

    th,
    td {
      padding: .5em .75em;
      border: 1px solid #000;
    }

    tfoot {
      font-weight: bold;
    }

    .tiems {
      font-family: "Times New Roman";
    }

    .georgia {
      font-family: "Georgia";
    }

    .arial {
      font-family: "Arial";
    }

    .courier {
      font-family: "Courier New";
    }

    .lucida {
      font-family: "Lucida Console";
    }
  </style>
</head>

<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>

</body>

</html>

step7/font-size.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>font-size</title>
  <style type="text/css">
    h1 {
      font-size: 40px;
    }

    h2 {
      font-size: 30px;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>

<body>
  <h1>一级标题通常最大</h1>
  <h2>二级标题次之</h2>
  <p>段落文字大小适中</p>
</body>

</html>

step7/index.html:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>九寨沟简介</title>
	<link rel="stylesheet" href="step7/CSS/style.css"> 
</head>
<body>
<article class="architect">
	<div class="intro">
		<h1>九寨沟简介</h1>
		<p class="subhead">五岳归来不看山,九寨归来不看水</p>
		<p><a href="#">九寨沟</a>位于四川省西北部岷山山脉南段的阿坝藏族羌族自治州九寨沟县漳扎镇境内，地处岷山南段弓杆岭的东北侧。距离成都市400多千米，系长江水系嘉陵江上游白水江源头的一条大支沟。 九寨沟自然保护区地势南高北低，山谷深切，高差悬殊。北缘九寨沟口海拔仅2000米，中部峰岭均在4000米以上，南缘达4500米以上，主沟长30多公里。</p>
		<p>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、国家级自然保护区、国家地质公园、世界生物圈保护区网络，也是中国第一个以保护自然风景为主要目的的自然保护区。</p>
	</div>

	<section class="chapter origin">
		<h2 id="origin">九寨沟由来</h2>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189497/20171114052.jpg" width="320" height="213" alt="Red bubbles" />
			<img src="https://www.educoder.net/attachments/download/189498/20171114053.jpg" width="320" height="213" alt="Tile Pieces" />
		</div>

		<p>九寨沟的得名来自于景区内九个藏族寨子（树正寨、则查洼寨、黑角寨、荷叶寨、盘亚寨、亚拉寨、尖盘寨、热西寨、郭都寨），这九个寨子又称为“何药九寨”。由于有九个寨子的藏民世代居住于此，故名为“九寨沟”。</p>
		<p>世界自然遗产组织的官员，在1992年第一次到九寨沟考察时，从沟口进去时，大家被大雨蒙住了视线。当他们一行来到火花海景点时，天空突然放睛，阳光穿过空中的雾霭，在天空中画出了一道美丽的彩虹，妖娆艳丽的火花海呈现在这些世界级官员的眼前，他们被眼前的美景惊呆了。随即，他们俯下身跪在海子边上，向这大自然的造化叩拜。事后他们回忆说，这里的景色太美了，让他们太吃惊了。他们不曾想象过，大自然竟有如此的鬼斧神工，将中国的九寨沟点画得如天仙般的美丽。</p>
		<p>他们的叩拜，是对大自然的敬仰；他们的叩拜，是感谢中国，为世界留下了一块瑰宝，为人间留住了一片仙境。</p>
	</section>

	<section class="chapter guell">
		<h2 id="park-guell">童话世界</h2>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189480/308.jpg" width="320" height="213" alt="Blue Mosaic" />
			<img src="https://www.educoder.net/attachments/download/189494/323.jpg" width="320" height="213" alt="Glass Mosaic" />
		</div>
		<p>目前，九寨沟景区仅保留了树正寨、荷叶寨、则查洼寨这三个村寨，善良淳朴的他们，用微笑迎接着前来九寨沟的每一个人。而在这些村寨中，最壮观的莫过于树正寨前的<a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>“九宝莲花菩提塔”</cite></a>，七彩经幡随风飘荡，圣洁的白塔在阳光下仿若闪着光，这里也是众多游客到来时，都会双手合十，轻声祭拜的地方。</p>
		<p>九寨沟是大自然鬼斧神工之杰作。这里四周雪峰高耸，湖水清澈艳丽，飞瀑多姿多彩，急流汹涌澎湃，林木青葱婆娑。蓝蓝的天空，明媚的阳光，清新的空气和点缀其间的古老村寨、栈桥、磨坊，组成了一幅内涵丰富、和谐统一的优美画卷，历来被当地藏族同胞视为<em>“神山圣水”</em>。九寨沟景区享誉中外，东方人称之为“人间仙境”，西方人则将之誉为“童话世界”。</p>
	</section>

	<hr>

	<section class="season spring">
		<h3 id="spring-flower">春和景明，花开浪漫</h3>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189481/310.jpg" width="215" height="143" alt="星光点芦苇" />
			<img src="https://www.educoder.net/attachments/download/189482/311.jpg" width="215" height="143" alt="碧蓝映彩池" />
			<img src="https://www.educoder.net/attachments/download/189483/312.jpg" width="215"  height="143" alt="一树桃花摇曳" />
		</div>
		<p>春风吹拂，沉睡的九寨沟苏醒了。冰雪融化，新绿发芽，春水的颜色映着山色，娇嫩得让人不忍探视，仿佛只要轻轻地一口气都能让它消失。水边道旁，闹哄哄开满了不知名的美丽山花，桃红、绛紫、靓蓝、鹅黄，繁华似锦，烂漫一路。温柔而慵懒的春阳吻接湖面，爱抚春芽，也悸动了你久闭的心门......</p>
		<p>嫩芽悄然出现，一抹抹新绿因重获生机而生长得日益茂盛，春风吹醒了封冻的海子，吹皱了一汪碧水，水色是幽静的蓝、清新的绿、浅浅的黄。无风的晴日，山林树色尽数倒映其中，呈现出对称之美。</p>
		<p>春日，九寨沟呈现着季节更替的慌忙景象，山林还是一片残冬，长海尚未解冻，山脚下却早已是一幅初春画卷，野桃花开得如火如荼，在春阳下摇摆着一树花枝，将浓烈的春意诉说。天空湛蓝碧净，更衬得一树的花朵玲珑可爱，一簇簇拥挤在一起，争抢着呼吸春的气息。</p>
	</section>

	<section class="season autumn">
		<h3 id="autumn-leaf">彩林漫漫，炫雅妩媚</h3>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189484/313.jpg" width="215" height="143" alt="星光点芦苇" />
			<img src="https://www.educoder.net/attachments/download/189485/314.jpg" width="215" height="143" alt="碧蓝映彩池" />
			<img src="https://www.educoder.net/attachments/download/189486/315.jpg" width="215"  height="143" alt="一树桃花摇曳" />
		</div>
		<p>浪漫的秋风也吹来了九寨沟最为灿烂的时节。山林晕染成色，除了绿色以外，还呈现出金黄、火红等色彩，五彩缤纷，倒映在明丽的湖水中，湖山同色，湖水也斑斓似锦了，一时间竟然不能分清哪里是山哪里是水，十分迷人。</p>
		<p>五彩斑斓的世界深沉且厚重，彩色的湖水、彩色的天空、彩色的世界，她似一个少女，藏着五彩斑斓的心事；她秀美婉约，灵动优雅，秋阳点染着静谧的山谷，树树含着秋韵，山山堆着落晖。</p>
		<p>缤纷的落叶在湖光流韵间漂浮，悠远的晴空碧净而湛蓝，秋天的九寨沟美得仿佛不真实，无时无刻不在演绎着赤、橙、黄、绿、青、蓝、紫的梦幻组合，古人说的“造化钟神秀”，也就不过如此吧。</p>
	</section>

	<section class="season summer">
		<h3 id="summer-water">夏绿九寨，恣意清凉</h3>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189487/316.jpg" width="215" height="143" alt="星光点芦苇" />
			<img src="https://www.educoder.net/attachments/download/189488/317.jpg" width="215" height="143" alt="碧蓝映彩池" />
			<img src="https://www.educoder.net/attachments/download/189489/318.jpg" width="215"  height="143" alt="一树桃花摇曳" />
		</div>
		<p>炎炎夏日，似火骄阳与粘湿汗水笼罩了整个大地，而此时的九寨沟却截然不同。她掩映在整片整片苍翠欲滴的浓阴之中，茂盛的林木守卫着海子，欢快的流水梳理着树枝与水草，一切都透着清爽。</p>
		<p>森林树脂的清新，海子浓淡相宜的妆容，银帘般的瀑布抒发四季中最为恣意的激情，凉爽的夏风吹拂着经幡。此时此刻，天是蓝的，树是绿的，海子是斑斓不可言说的，心情是自由的……</p>
		<p>骄阳流金，蝉鸣踏歌，萤火森森，这样的九寨总是让人仿佛置身在桃花源的仙境里，不禁感叹，十里轻风不如你，七米暖阳不及卿。</p>
	</section>

	<section class="season winter">
		<h3 id="winter-snow">冰雪童话，灵韵冬色</h3>
		<div class="photos">
			<img src="https://www.educoder.net/attachments/download/189490/319.jpg" width="215" height="143" alt="星光点芦苇" />
			<img src="https://www.educoder.net/attachments/download/189491/320.jpg" width="215" height="143" alt="碧蓝映彩池" />
			<img src="https://www.educoder.net/attachments/download/189492/321.jpg" width="215"  height="143" alt="一树桃花摇曳" />
		</div>
		<p>寂静的冬日，九寨沟变得尤为宁静，也更具诗情画意。山峦与树林银装素裹，瀑布变成了一幅幅巨大的天然艺术冰雕，湖泊冰清玉洁，湖面的蓝色冰层在日出日落的温差中，变幻着奇妙的冰纹。</p>
		<p>除长海、熊猫海冰冻60厘米外，其他的海子都不会完全结冰，冰块与冰花，有的像丝锦，有的像哈达，有的像流云，有的像青纱……</p>
		<p>那撩人心魄的飞雪，纷纷扬扬、飘飘洒洒，如同春天的柳絮一般，不停地飞舞着，放肆地亲吻着山峦，亲吻着海子，亲吻着你的脸宠。如此洁白而高雅的世界，真的可以让你忘却世间无畏的纷争和烦恼。</p>
	</section>

</article>
</body>
<footer>Copyright (c) 2002 - 2018 <a target="_blank" href="https://www.jiuzhai.com/about/jiuzhai-valley">九寨沟风景名胜区管理局</a> Holder All Rights Reserved.</footer>
</html>