2021-01-15

最新推荐文章于 2021-10-17 08:42:46 发布

YiFan7575

最新推荐文章于 2021-10-17 08:42:46 发布

阅读量93

点赞数

分类专栏：前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_45018859/article/details/113242675

版权

前端学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

声明html的文档的文档类型
定义html文档的标题和正文
更改文本颜色
使用元素选择器来设置元素的样式
使用 class 选择器设置单个元素的样式
更改元素的字体大小
设置元素的字体家族
引入谷歌字体
字体优雅降级
调整图片的大小

1.声明html的文档的文档类型
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"…" 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。
!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但html大写小写都可以。
接下来，所有的 HTML 代码都必须位于html标签中。其中<html>位于<!DOCTYPE html>的后面，</html>位于网页的结尾。
例：

<!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>

2.定义html文档的标题和正文
html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。
比如link、meta、title和style都应该放入head标签。
这是网页布局的一个例子：

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <body>
    <!-- page contents -->
  </body>
</html>

CSS -Cascading Style Sheet（层叠样式表）
3.更改文本颜色
以下是改变h2元素为蓝色的方法：

<h2 style="color: blue;">CatPhotoApp</h2>

请注意行内style最好以;来结束。

4.使用元素选择器来设置元素的样式
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
通过行内样式<h2 style="color: red;">CatPhotoApp</h2>，就可以修改h2元素的颜色为红色。
当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。
在代码的顶部，创建一个style声明区域，如下方所示：

<style>
</style>

在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：

<style>
  h2 {color: red;}
</style>

注意，在每个元素的样式声明区域里，左右花括号（{和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

5.使用 class 选择器设置单个元素的样式
CSS 的class具有可重用性，可应用于各种 HTML 元素。
一个 CSSclass声明示例，如下所示：

<style>
  .blue-text {
    color: blue;
  }
</style>

可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。
你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

6.更改元素的字体大小
字体大小由font-size属性控制，如下所示：

h1 {
  font-size: 30px;
}

7.设置元素的字体家族
通过font-family属性，可以设置元素里面的字体样式。
如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：

h2 {
  font-family: sans-serif;
}

8.引入谷歌字体
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。
Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
因此，下一步，我们将引入和使用Google字体。
引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：

font-family: FAMILY_NAME, GENERIC_NAME;

GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

9.字体优雅降级
所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：

p {
  font-family: Helvetica, sans-serif;
}

通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

10.调整图片的大小
CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。
假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：

<style>
  .larger-image {
    width: 500px;
  }
</style>

YiFan7575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-01-15

目录声明html的文档的文档类型定义html文档的标题和正文更改文本颜色使用元素选择器来设置元素的样式使用 class 选择器设置单个元素的样式更改元素的字体大小设置元素的字体家族引入谷歌字体字体优雅降级调整图片的大小1.声明html的文档的文档类型在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。你可以通过<!
复制链接

扫一扫