《Head First HTML与CSS》笔记——8 增加字体和颜色样式

最新推荐文章于 2024-10-04 13:52:58 发布
最新推荐文章于 2024-10-04 13:52:58 发布
阅读量156 收藏 1
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45182000/article/details/110671295
版权

前言

我们已经掌握了CSS的基础知识，而且知道了如何创建CSS规则来选择和指定一个元素的样式。本节我们扩大词汇量，学习一些新的属性。

文本的CSS

文本的字体

  • 用font-family属性定制页面中使用的字体
    在这里插入图片描述

  • 用font-size属性控制字体大小
    在这里插入图片描述

  • 用color属性为文本设置颜色
    在这里插入图片描述

  • 用font_weight属性影响字体粗细
    在这里插入图片描述

  • 使用text-decoration属性为文本增加更多风格
    在这里插入图片描述

了解字体系列

在这里插入图片描述

用 @font-face定制字体

@font-face规则允许使用者定义一种字体的名字和位置。Woff(Web open font formant)是作为Web字体的标准字体格式出现的。如果想为Web上的用户提供字体，就需要把这些文件放在一个服务器上（可以用Google的字体托管服务，这个是免费的）。

如何为页面增加Web字体（太长先不看，等以后用到了再细看）：

在这里插入图片描述
在这里插入图片描述

调整字体大小

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

其他

  • 改变字体粗细
    比如加粗：font-weight:bold; 去掉粗体：font-weight:normal;
  • 改变字体风格
    比如斜体：font_style: italic; 倾斜文本：font_style: oblique;

颜色的CSS

在这里插入图片描述

按名指定颜色
在这里插入图片描述

用红绿蓝值指定颜色
在这里插入图片描述

使用十六进制码指定颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小结

在这里插入图片描述

FlamingCook
关注
Head First HTML与CSS中文版高清版带书签 带源码
01-12
深入浅出HTML与CSS、XHTML》能让你避免认为Web-safe颜色还是紧要问题的尴尬，以及不明智地把标记放入你的页面。最大的好处是，你将毫无睡意地学习HTML、XHTML 和CSS。如果你曾经读过深入浅出（Head First）系列图书中的任一本
Head First HTML and CSS-增加字体和颜色样式
liuyiting的博客
05-09 317
定制字体大小 5个字体系列 1.Sans-serif字体系列（常用） 包括没有衬线的字体，与serif字体相比，通常认为sans-serif字体在计算机屏幕上更容易识读。 2.Serif字体系列 包括有衬线的字体，很多人一看到这种字体就想到新闻报纸的文字排版。 3.Monospace字体系列 包括固定宽度的字符，这些字体主要用于显示软件代码示例。 4.Cursive字体系列 包括看似手写的字体，有时会看到标题中使用这些字体。 5.Fantasy字体系列 包括有某种风格的装饰性字体。
Head First HTML与 CSS 中文版、高清
10-12
当前文档为经典教材head first 系列中的HTML 与CSS 版，以图文并茂的形式将HTML 、CSS的世界以一种充满趣味性的方式呈现在我们眼前，适合刚接触前端 、WEB的新手程序猿们！博主从朋友处得到较新的成体系的Web教程，有需要的可留言，届时发博文分享百度云链接。。。。
Head First HTML 与 CSS（第二版）学习笔记
qq_41805514的博客
06-10 6225
第一个聊天室文件<!DOCTYPE html> <html lang="en"><!-- 告诉浏览器HTML从这里开始 --> <head>页面head开始 <meta charset="UTF-8"> <title>Head First Lounge</title&amp
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记Head...
Head First HTML&CSS 学习笔记.zip
12-29
CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS ...
Head+First+HTML与CSS、XHTML读书笔记
08-07
### Head First HTML与CSS、XHTML读书笔记 #### 第一章 了解HTML - **1. Web语言** - **1.1 浏览器创建了什么？** 浏览器阅读HTML时，根据不同的标签（例如`<head>`）来解析文档结构及其意义。HTML允许开发者...
CSS画出三角形的做法
mingangel的博客
10-01 388
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 383
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
【CSS】position
小秀的博客
10-02 323
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 239
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS中的font-variation-settings：探索字体的可变性
艾恩小灰灰的博客
09-30 454
可变字体允许字体文件包含一系列的设计轴（Design Axes），如宽度（Width）、倾斜度（Slant）、粗细（Weight）等。通过调整这些轴的值，可以实现从一种样式到另一种样式的平滑过渡，而无需加载多个独立的字体文件。为设计师提供了前所未有的灵活性，在保持页面加载性能的同时，能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及，这一功能将在未来成为Web设计中的重要工具之一。
css的背景background属性
Citrus的博客
09-28 1178
background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。background属性还可以设置不同的子属性。
CSS 中 object-fit 的 cover 和 contain
weixin_64684095的博客
09-30 418
object-fit 属性用于指定可替换元素（如`<img>`、`<video>`等）如何适应其容器。
CSS计数器
最新发布
2401_82561004的博客
10-04 790
CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上，在早期的网站上应用比较广泛。下面我们就来看一下 CSS 中的计数器是如何使用的。
html+css+js实现轮播图
weixin_62831076的博客
10-01 341
【代码】html+css+js实现轮播图。
27 Vue3之unocss原子化
qq_37550440的博客
09-29 471
原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 现在你可以直接使用class="m-1"来设置边距。但正如你所见，用这种方法的情况下，你不能使用除了 1 到 10 之外的边距，而且，即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。如果之后你还想支持不同的 margin 方向，使用比如mt代表margin-top，mb代表margin-bottom等，加上这 4 个方向以后，你的 CSS 大小会变成原来的
CSS宽度和高度
2401_82561004的博客
09-29 960
CSS 尺寸属性指的就是元素的宽度和高度属性，虽然说非常简单，但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度，这些元素使用起来非常简单，下面我们就来简单介绍一下。
CSS给一行按钮统一设置间隔
qq_35641191的博客
09-29 276
CSS给一行按钮统一设置间隔，相邻兄弟选择器
CSS基础入门：选择器、样式设置与优先级详解
本文档是一份关于级联样式表（CSS）的学习笔记，详细介绍了CSS的设置方式、各种选择器的应用以及相关概念。以下是主要内容的概要： 1. CSS设置方式： - 内联样式：直接在HTML元素的`style`属性中定义，如 `;color:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值