前端各类知识点总结：H5、CSS、JS ( 更新：多样字体、渐变色字体设置 )

最新推荐文章于 2024-01-15 15:51:35 发布

明空Minempty

最新推荐文章于 2024-01-15 15:51:35 发布

阅读量268

点赞数

分类专栏：前端学习文章标签： css idea html5 java

本文链接：https://blog.csdn.net/ke1494057235/article/details/120325862

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 5 各类知识点总结

前言
- 基础类

前言

这个是我个人在前端学习路上，用来累积知识点的帖子。

上方的链接可以帮助大家快速跳转到想要了解的知识点。

PS：本帖中出现的代码均为 关键代码块 ，其余的的代码需要大家理解后补齐。

零基础的小伙伴如果理解有困难可以看我的JavaWeb入门学习帖：

Java学习之路之 JavaWeb (含项目创建+配置Tomcat)

基础类

● 背景图设置

最开始学习H5的时候就一心想设置背景图片装饰一下自己的网页。
接下来介绍几种简单的设置背景图片的方法：
【具体的代码解释和效果阐述都在下面表格中统一汇总】

< 1 > HTML结构：使用<body>设置

<!-- background中填写图片地址 -->
<body background="../resource/image/弥散渐变.jpg"   
      style="  background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%;
               ">
</body>

在这里插入图片描述

< 2 > HTML结构：使用 CSS <style>进行全局设置

<style>
    /* url中填写图片地址 */
    body{background-image: url("../resource/image/弥散渐变.jpg");
        background-attachment:fixed;
        background-size:100% 100%;}
</style>

在这里插入图片描述

< special > HTML结构：使用 CSS <style>设置段落背景图

<head>
	<style>
		p {
 		  /* url中填写图片地址 */
  		 background-image: url("..resource/image/弥散渐变.jpg");
  			}
	</style>
</head>

<body>
<p align="center">我是一个有背景的段落</p>
</body>

在这里插入图片描述

以下是关于背景图设置的各种指令

效果	指令
图片不重复	`background-repeat:no-repeat`
图片固定	`background-attachment:fixed`
图片的填充百分比	`background-size: _% _%`

● 多样字体设置

我们在设计网页的时候往往想加入一些更加艺术更加美观的字体。
下面讲一个简单的多样字体的设置方法。
我们会用 谷歌字体 作为例子。

HTML结构：使用 CSS <style> 全局设置

1.我们先在<head>头文件中设置样式表链接

2.接下来在<head>头文件中添加<style>全局设置引用 谷歌字体库 中指定的字体类别

3.设置全体<p>段落为：文本居中、引用Sofia字体库、字体大小为40像素。

<head>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
      <style>
        p{
            text-align:center;
            font-family: "Sofia";
            font-size: 40px;}
      </style>
</head>

<body>
<p>I am a Sofia Font</p>
</body>

在这里插入图片描述

● 渐变色字体设置

你是否厌倦了只能用纯色块作为你网页中字体的颜色呢！

你是否…

编不下去了，我们直接开始教学。

HTML结构：使用 CSS <style> 全局设置

1.在<head>头文件中添加<style>全局设置。

2.设置全体<p>段落为：
文本居中、字体大小为40像素、设置文本背景渐变色、将背景色转为文本内部背景、填充色转换。

<head>
    <style>
        p{
            text-align:center;
            font-size:40px;
            background:-webkit-gradient(linear, 0 0, 0 100%, 
            from(rgba(241, 137, 253, 0.9)), to(rgba(119, 20, 181, 0.9)));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;}
    </style>
</head>

<body>
	<p>我是一个有渐变色的字体</p>
</body>

在这里插入图片描述

小鹦鹉提醒您：我还在学习的不归路上，更多内容还在探索中，敬请期待。

明空Minempty

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端各类知识点总结：H5、CSS、JS ( 更新：多样字体、渐变色字体设置 )

HTML 5 各类知识点总结前言HTML 5 基础类● 背景图设置CSS 知识类前言这个是我个人在H5学习路上用来累积知识点的帖子。我会用锚点链接来帮助大家跳转到想要了解的知识点。HTML 5 基础类● 背景图设置使用<body>设置· 图片不会随着窗口移动而移动<body background="../resource/image/3.jpg" style=" background-repeat:no-repeat;
复制链接

扫一扫