慕容屠苏-CSDN博客

原创 css零到一高级教程029：CSS 媒体查询 - 实例

CSS 媒体查询 - 更多实例让我们看看使用媒体查询的更多例子。媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。下面演示一个简单的例子，让我们来更改不同设备的背景色：实例<!DOCTYPE html><html><head><style>body { background-color: tan; color: black;}/* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */@m.

2022-04-01 21:19:50 452

原创 css零到一高级教程028：CSS 媒体查询

CSS2 引入了媒体类型CSS2 中引入了@media规则，它让为不同媒体类型定义不同样式规则成为可能。例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。CSS3 引入了媒体查询CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。媒体查询可用于检查许多事情，例如：视口的宽度和高度设备的宽度和高度方..

2022-04-01 21:04:24 353

原创 css零到一高级教程027：CSS Flexbox

CSS Flexbox 布局模块在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：块（Block），用于网页中的部分（节）行内（Inline），用于文本表，用于二维表数据定位，用于元素的明确位置弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。浏览器支持所有现代浏览器均支持flexbox属性。Flexbox 元素如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。上面的元素表示一个带有...

2022-04-01 18:52:58 451

原创 css零到一高级教程026：CSS Box Sizing

CSS Box SizingCSSbox-sizing属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。假如不指定 CSS box-sizing 属性默认情况下，元素的宽度和高度是这样计算的：width + padding + border = 元素的实际宽度 height + padding + border = 元素的实际高度这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。下图展示了两个..

2022-03-30 15:16:13 239

原创 css零到一高级教程025：CSS 在媒体查询中使用变量

在媒体查询中使用变量现在，我们希望在媒体查询中修改变量值。提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。在这里，我们首先为 .containe 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后，我们创建一个 @media 规则，内容为“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsi

2022-03-30 15:08:20 244

原创 css零到一高级教程024：CSS 使用 JavaScript 更改变量

使用 JavaScript 更改变量CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。这个例子说明了如何创建脚本来显示并更改上一页中使用的示例中的 --blue 变量。此刻，如果您不熟悉 JavaScript，不要担心。您可以在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识：实例<!DOCTYPE html><html><head><style>:root { --b

2022-03-30 15:03:45 988

原创 css零到一高级教程023：CSS 覆盖变量

用局部变量覆盖全局变量从上一页我们了解到，可以在整个文档中访问/使用全局变量，而局部变量只能在声明它的选择器内使用。请看上一页中的例子：实例<!DOCTYPE html><html><head><style>:root { --blue: #1e90ff; --white: #ffffff; }body { background-color: var(--blue);}h2 { border-bottom:

2022-03-30 15:01:22 333

原创 css零到一高级教程022：CSS 变量

CSS 变量var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。传统方式以下例子显示了在样式表中定义一些颜色的传统方式（通过为每个特定元素定义要使用的颜色）：实例<!DOCTYPE html><html>&lt

2022-03-30 14:56:44 108

原创 css零到一高级教程021：CSS 用户界面

CSS 用户界面在本章中，您将学到以下 CSS 用户界面属性：resize outline-offset浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。CSS 调整大小resize属性规定元素是否应（以及如何）被用户调整大小。注意：Internet Explorer 不支持 resize 属性。下例只允许用户调整 <div> 元素的宽度：实例<!DOCTYPE html><html><h...

2022-03-30 14:51:31 142

原创 css零到一高级教程020：CSS 多列

CSS 多列布局CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：CSS 多列属性在本章中，您将学到以下多列属性：column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。CSS 创建多列column-count..

2022-03-30 14:40:12 97

原创 css零到一高级教程019：CSS 分页实例

学习如何使用 CSS 创建响应式分页。简单的分页如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：实例<!DOCTYPE html><html><head><style>.pagination { display: inline-block;}.pagination a { color: black; float: left; padding: 8px 16px; text-decor..

2022-03-29 13:13:53 222

原创 css零到一高级教程018：CSS 按钮

学习如何使用 CSS 设置按钮样式。基本按钮样式实例<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-.

2022-03-28 23:12:29 258

原创 css零到一高级教程017：CSS object-fit 属性

CSSobject-fit属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。CSS object-fit 属性CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。请看下面来自上海鲜花港的郁金香图片，它...

2022-03-28 13:30:42 619

原创 css零到一高级教程016：CSS 图像样式

CSS 图像样式学习如何使用 CSS 设置图像样式。圆角图像使用border-radius属性创建圆形图像：实例圆角图像:<!DOCTYPE html><html><head><style>img { border-radius: 8px;}</style></head><body><h1>圆角图像</h1><p>请使用 ...

2022-03-28 13:18:49 317

原创 css零到一高级教程015：CSS 工具提示

通过 CSS 创建工具提示（Tooltip）。演示：工具提示实例当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：基础的工具提示创建一个鼠标移到元素上时显示的工具提示：实例<!DOCTYPE html><html><style>.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted blac.

2022-03-27 20:49:03 111

原创 css零到一高级教程014：CSS 动画

CSS 动画CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！在本章中，您将学习如下属性：@keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation对动画的浏览器支持.

2022-03-27 16:49:19 123

原创 css零到一高级教程013：CSS 过渡

CSS 过渡CSS 过渡允许您在给定的时间内平滑地改变属性值。请把鼠标移动到这个元素上，来查看 CSS 过渡效果：在本章中，您将学习如下属性：transition transition-delay transition-duration transition-property transition-timing-function对过渡的浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。如何使用 CSS 过渡？如需创建过渡效果，必须明确两件事：..

2022-03-27 15:39:54 108

原创 css零到一高级教程012：CSS 3D 转换

CSS 3D 转换CSS 还支持 3D 转换。在本章中，您将学习如下 CSS 属性：transform浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。CSS 3D 转换方法通过 CSS transform 属性，您可以使用以下 3D 转换方法：rotateX() rotateY() rotateZ()rotateX() 方法rotateX()方法使元素绕其 X 轴旋转给定角度：实例<!DOCTYPE html>&l...

2022-03-27 05:49:19 189

原创 css零到一高级教程011：CSS 2D 转换

CSS 2D 转换CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。把鼠标悬停在下面的元素上，可以查看 2D 转换：在本章中，您将学习如下 CSS 属性：transform浏览器支持表格中的数字指注明了完全支持该属性的首个浏览器版本。CSS 2D 转换方法通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：translate() rotate() scaleX() scaleY() scale() ske..

2022-03-27 05:38:23 216

原创 css零到一高级教程010：CSS Web 字体

CSS @font-face 规则Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户。您的“自有”字体在 CSS@font-face规则中进行定义。不同的字体格式TrueType 字体 (TTF)TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Window..

2022-03-27 05:17:09 283

原创 css零到一高级教程009：CSS 文本效果

CSS 文本溢出、整字换行、换行规则以及书写模式在本章中，您将学习如下属性：text-overflow word-wrap word-break writing-modeCSS 文字溢出CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。可以被裁剪：也可以将其呈现为省略号（...）：CSS 代码如下：实例<!DOCTYPE html><html><head><style> .

2022-03-26 15:35:40 621

原创 css零到一高级教程008：CSS Box Shadow

CSS box-shadow 属性CSS box-shadow 属性应用阴影于元素。最简单的用法是只指定水平阴影和垂直阴影：实例<!DOCTYPE html><html><head><style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px;}</s.

2022-03-26 15:26:07 190

原创 css零到一高级教程007：CSS 阴影效果

CSS 阴影效果通过使用 CSS，您可以在文本和元素上添加阴影。在我们的教程中，您将学习如下属性：text-shadow box-shadowCSS 文字阴影CSStext-shadow属性为文本添加阴影。最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：实例<!DOCTYPE html><html><head><style>h1 { text-shadow: 2px 2px;}&lt...

2022-03-26 15:19:58 494

原创 css零到一高级教程006：CSS 径向渐变

CSS 径向渐变径向渐变由其中心定义。如需创建径向渐变，您还必须定义至少两个色标。语法background-image: radial-gradient(shape size at position, start-color, ..., last-color);默认地，shape为椭圆形，size为最远角，position为中心。径向渐变-均匀间隔的色标（默认）下面的例子展示了带有均匀间隔的色标的径向渐变：<!DOCTYPE html><html...

2022-03-26 10:47:25 397

原创 css零到一高级教程005：CSS 渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型：线性渐变（向下/向上/向左/向右/对角线）径向渐变（由其中心定义）CSS 线性渐变如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);线性渐变 - 从上到下（默认...

2022-03-26 10:36:45 94

原创 css零到一高级教程004：CSS 颜色

CSS 支持140 多种颜色名称，以及十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。RGBA 颜色RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。下面的例子定义了不同的 RGBA 颜色：实例<!DOCTYPE html&g..

2022-03-26 10:21:43 110

原创 css零到一高级教程003：CSS 多重背景

在本章中，您将学习如何将多个背景图像添加到一个元素。您还将学到以下属性：background-size background-origin background-clipCSS 多重背景CSS 允许您通过background-image属性为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：实例<...

2022-03-26 10:11:20 231

原创 css零到一高级教程002：CSS 边框图像

CSS 边框图像CSS border-image 属性CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。该属性有三部分：用作边框的图像在哪里裁切图像定义中间部分应重复还是拉伸我们将使用这幅图像（"border.png"）border-image属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。注意：为了使 border-image 起作用，该元素还需要设置 borde...

2022-03-26 09:43:36 125

原创 css零到一高级教程001：CSS 圆角

CSS 圆角通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。CSS border-radius 属性CSS border-radius 属性定义元素角的半径。提示：您可以使用此属性为元素添加圆角！这里有三个例子：1. 带有指定背景颜色的元素的圆角：2. 带边框元素的圆角：3. 带有背景图像的元素的圆角：这是代码：实例<!DOCTYPE html><html><head&..

2022-03-26 09:32:30 285

原创 css零到一中级教程025：CSS 特异性

什么是特异性？如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。特异性层次每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：行内样式- 行内（内联）样.

2022-03-25 11:25:20 127

原创 css零到一中级教程024：CSS 单位

CSS 单位CSS 有几种表示长度的不同单位。许多 CSS 属性接受“长度”值，诸如width、margin、padding、font-size等。长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。实例使用 px（像素）设置不同的长度值：<!DOCTYPE html><html><head><style>h1 { font-size: 60px;}p { font-size: 25px; li..

2022-03-25 11:20:06 65

原创 css零到一中级教程023：CSS 网站布局

网站布局网站通常分为页眉、菜单、内容和页脚：有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。页眉页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：实例<!DOCTYPE html><html lang="en"><head><title>CSS Website Layout</title><...

2022-03-25 11:16:09 316

原创 css零到一中级教程022：CSS 计数器

CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。计数器使您可以根据内容在文档中的位置来调整其外观。带计数器的自动编号CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用 CSS 计数器，我们将使用以下属性：counter-reset- 创建或重置计数器 counter-increment- 递增计数器值 content- 插入生成的内容 counter()或counters(...

2022-03-25 11:06:28 60

原创 css零到一中级教程021：CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观：<!DOCTYPE html><html><style>input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: bo..

2022-03-24 17:02:41 189

原创 css零到一中级教程020：CSS 属性选择器

为带有特定属性的 HTML 元素设置样式我们可以设置带有特定属性或属性值的 HTML 元素的样式。CSS [attribute] 选择器[attribute] 选择器用于选取带有指定属性的元素。下例选择所有带有 target 属性的 <a> 元素；实例<!DOCTYPE html><html><head><style>a[target] { background-color: yellow;}</st

2022-03-24 11:35:37 179

原创 css零到一中级教程019：CSS 图像精灵

图像精灵图像精灵是单个图像中包含的图像集合。包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节约带宽。图像精灵 - 简单的例子我们使用以下单幅图像（"navsprites.gif"）而不是使用三幅单独的图像：通过使用 CSS，我们可以仅显示所需图像的某个部分。在下面的例子中，CSS 指定了显示 "navsprites.gif" 图像的哪部分：实例<!DOCTYPE html><ht

2022-03-24 11:21:57 111

原创 css零到一中级教程018：CSS 图片库

CSS 可用于创建图片库。<!DOCTYPE html><html><head><style>div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px;}div.gallery:hover { border: 1px solid #777;}div.gallery img { width: 100%; heigh

2022-03-24 11:15:27 220

原创 css零到一中级教程017：CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。演示：下拉式案例实例请把鼠标指针移动到下面的例子上：基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。实例<!DOCTYPE html><html><head><style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; po

2022-03-24 11:10:49 89

原创 css零到一中级教程016：CSS 水平导航栏

水平导航栏有两种创建水平导航栏的方法：使用行内或浮动列表项。行内列表项构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：实例<!DOCTYPE html><html><head><style>ul { list-style-type: none; margin: 0; padding: 0;}li { display: inli...

2022-03-24 11:01:23 347

原创 css零到一中级教程015：CSS 垂直导航栏

垂直导航栏如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：实例<!DOCTYPE html><html><head><style>ul { list-style-type: none; margin: 0; padding: 0;}li a { display: block; width: 60px; background-color: #dddddd;.

2022-03-24 10:36:34 196

空空如也

空空如也