年度实用技巧 | 日常浏览的页面为什么可以五颜六色

原创

叶一一

发布于 2025-01-27 20:14:26

1060

文章被收录于专栏：趣学前端趣学前端

背景

我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上一篇结尾留了一个小习题，我们先来看一下，品字形的布局如何实现。

品字形的布局实现方式有多种，这里主要介绍两种：

今日主要讲讲前端样式相关的知识点。

我们平时看到页面上的展示文字是各种颜色和大小，有些文字下面会有下划线等特殊样式。

比如这样：

这样：

还有这样：

上面三种类型，文字内容没有变，但是文字大小、颜色、样式均不相同，这些都是通过样式实现的。我前一篇文章介绍了标签，标签定义了元素的类型，元素的展现形式通过样式实现。

以下知识点来自于w3school

样式	作用	属性值
font-style	属性主要用于指定斜体文本。	normal ：文字正常显示。italic：文本以斜体显示。oblique：文本为“倾斜”（倾斜与斜体非常相似，但支持较少）。
font-weight	属性指定字体的粗细。	normal：正常。bold：加粗。
font-size	属性设置文本的大小。	以 px 设置字体大小。用 em 设置字体大小。

以下知识点来自于w3school

样式	作用	属性值
color	可以设置文本的颜色可以设置边框的颜色	在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色。

以下知识点来自于w3school

样式	作用	属性值
position	属性规定应用于元素的定位方法的类型。	static：元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。relative：元素相对于其正常位置进行定位。fixed：元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。absolute：元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。sticky：元素根据用户的滚动位置进行定位。

以下知识点来自于w3school

样式	作用	属性值
background-color	属性指定元素的背景色。	通过 CSS，颜色通常由以下方式指定：有效的颜色名称 - 比如 "red"十六进制值 - 比如 "#ff0000"RGB 值 - 比如 "rgb(255,0,0)"
background-image	属性指定用作元素背景的图像。	背景的图像。
background-repeat	默认情况下，background-image 属性在水平和垂直方向上都重复图像。	repeat-y：垂直重复图像。repeat-x：水平重复图像。no-repeat：指定只显示一次背景图像。
background-position	属性用于指定背景图像的位置。	可以指定top、bottom、left、right值，也可以指定为百分比值。

以下知识点来自于w3school

样式	作用	属性值
border	简写属性在一个声明设置所有的边框属性。	可以按顺序设置如下属性：border-widthborder-styleborder-color
border-style	属性指定要显示的边框类型。	dotted - 定义点线边框dashed - 定义虚线边框solid - 定义实线边框double - 定义双边框groove - 定义 3D 坡口边框。效果取决于 border-color 值ridge - 定义 3D 脊线边框。效果取决于 border-color 值inset - 定义 3D inset 边框。效果取决于 border-color 值outset - 定义 3D outset 边框。效果取决于 border-color 值none - 定义无边框hidden - 定义隐藏边框
border-width	属性指定四个边框的宽度。	可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。
border-color	属性用于设置四个边框的颜色。	name：指定颜色名，比如 "red"。HEX：指定十六进制值，比如 "#ff0000"。RGB：指定 RGB 值，比如 "rgb(255,0,0)"。HSL：指定 HSL 值，比如 "hsl(0, 100%, 50%)"。transparent：透明。
border-radius	属性用于向元素添加圆角边框。	length：定义弯道的形状。%：使用%定义角落的形状。