📝 CSS教程

2362篇技术文档
  布尔玛 |文件

📅  最后修改于: 2021-08-29 12:49:23        🧑  作者: Mango

Bulma 是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。file元素用于上传自定义文件输入。 “文件”组件由几个子元素组成,我们必须专门添加这些子元素才能很好地设计我们的内容。下面列出了这些元素。文件标签——它是文件元素的实际交互式和可点击部分。文件输入–它是本机文件输入,出于样式目的隐藏。file-cta –这是上...

  CSS |背景

📅  最后修改于: 2021-08-29 12:49:40        🧑  作者: Mango

CSS 背景属性用于定义元素的背景效果。CSS背景属性如下:背景颜色背景图片背景重复背景附件背景位置背景颜色:此属性指定元素的背景颜色。句法 :颜色名称也可以表示为:“绿色”,十六进制值表示为“#5570f0”,RGB 值表示为“rgb(25, 255, 2)”。例子 :输出:背景图像:此属性指定用作元素背景的图像。默认情况下,图像是重复的,因此它覆盖了整个元素。句法:例子:输出:背景重复:默认情...

  如何使用 HTML5 创建内嵌框架?

📅  最后修改于: 2021-08-29 12:49:59        🧑  作者: Mango

在本文中,我们将通过在文档中使用 <iframe> 标签创建一个内联 iframe。它代表文档内的一个固定矩形区域,浏览器可以在其中显示单独的文档以及滚动条和边框。内嵌框架用于在当前 HTML 页面中嵌入另一个文档。句法 :例子:输出:示例 2:输出:支持的浏览器如下:谷歌浏览器IE浏览器火狐歌剧苹果浏览器...

  如何使用 CSS 使 div 跨越网格中的两行?

📅  最后修改于: 2021-08-29 12:50:14        🧑  作者: Mango

假设我们在一行中有 5 个元素,并且任务是在一行的中间放置一个更大的元素。如何在 CSS 的帮助下使 DIV 跨越网格的 2 行。方法一:先获取 ID(‘outer’)的外层 DIV 的高度。我们知道现在可以使用带有flex-direction: column和flex-wrap: wrap 的CSS Flexbox 设计外部元素的高度。容器上的固定高度告诉 flex 项目在哪里包装。例子:输出:...

  CSS | border-top-color 属性

📅  最后修改于: 2021-08-29 12:50:31        🧑  作者: Mango

border-color 属性用于将容器的所有边框着色为相同的颜色。border-top-color 属性提供了填充不同颜色的选项,从父边框颜色到容器的顶部边框。注意:在 CSS 中编写语句时要注意顺序,即 CSS 将采用属性的最后一个值,因此,对于预期输出,始终在 border-color 下方写入 border-top-color。句法:属性值:颜色:它设置元素顶部边框的颜色。句法:例子:ht...

  如何使用 HTML 和 CSS 为背景创建波浪图像?

📅  最后修改于: 2021-08-29 12:50:48        🧑  作者: Mango

这种类型的背景通过避免常规矩形大小的背景或标题在您的网页上创建独特性。以下标题设计将展示您的创造力。这种设计可以通过两种方式实现:在 CSS 中的 div 元素上使用::before和::after 选择器。在 HTML 中使用SVG。示例:此示例::before和::after选择器为背景创建波浪图像。输出:使用 before 和 after 的问题是我们必须在像素中定义它们的位置,因此随着屏幕...

  使用 CSS 显示调整大小和裁剪的图像

📅  最后修改于: 2021-08-29 12:51:06        🧑  作者: Mango

它有助于为网页上的预定义位置动态调整大小和裁剪任何图像。在网页中使用调整大小和裁剪的图像。有一种方法可以让我们在 div 内移动裁剪后的图像。压缩图像以适合该预定义位置的常规宽度和高度。例子:输出:使用图像作为适合该预定义位置(随机裁剪)的背景图像的常规宽度、高度和背景位置。例子:输出:这是裁剪图像的最后一步,也可以调整大小。在这个方法中,我们可以在 div 内移动图像。使用负边距在 div 内移...

  使用 HTML/CSS 将图像转换为 Blur

📅  最后修改于: 2021-08-29 12:51:23        🧑  作者: Mango

给定一个图像,任务是使用 CSS 属性将图像转换为模糊图像。在 CSS 中,filter 属性用于将图像转换为模糊图像。 Filter 属性主要用于设置图像的视觉效果。句法:示例 1:本示例使用模糊滤镜将图像转换为模糊图像。原图:输出:示例 2:此示例使用模糊滤镜创建背景模糊图像。原图:输出:...

  CSS 浮动

📅  最后修改于: 2021-08-29 12:51:46        🧑  作者: Mango

Float 是写在 CSS 文件中或直接在元素的样式中编写的 CSS 属性。 float 属性定义了内容的流向。以下是浮动属性的类型:Float typeUsagefloat: leftElement floats on left side of the containerfloat: rightElement floats on right side of containerfloat: inh...

  如何在SASS中将变量设置为不相等?

📅  最后修改于: 2021-08-29 13:04:18        🧑  作者: Mango

变量就像一个容器,我们可以在其中存储一些数据,然后在我们的代码中重用它。因此,可以定义一次,然后在任何地方重用它。变量的值可以在代码中随时更改,下次使用时会在任何地方生效。可能有一种情况,我们必须在 SASS 中声明一个等于空的变量。这可以通过两种方式完成:可以通过将其值设为“null”来声明变量。使用“null”的好处是当它与属性一起使用时,它会在编译后的 CSS 中完全消失。也可以通过将其值设...

  Tailwind CSS 环宽度

📅  最后修改于: 2021-08-29 13:04:41        🧑  作者: Mango

这个类在顺风 CSS 中接受多个值。所有属性都以类形式覆盖。该类用于设置按钮的环宽。环宽等级:* :这个类用来设置box-shadow 0 0 #000ring:该类用于设置响铃。ring-0:该类定义无环ring-1:使用该类创建的最细链接。ring-2:这个类用于在按钮周围创建中环。ring-4:这个类用于在按钮周围创建大环。ring-8:这个类用于在按钮周围创建最宽的环。ring-inset...

  SASS |负变量值

📅  最后修改于: 2021-08-29 13:05:03        🧑  作者: Mango

SASS 变量在为网页编写可维护的样式代码时非常有用。通常,我们要求页面的不同组件具有相同的样式属性值。在这种情况下,将值分配给变量并在需要的地方使用它可以减少将来更改样式所需的工作量。有时,我们可能还需要对属性的变量值取反。例如,考虑下面给出的 SASS 代码:属性值20px和-20px可以替换为 $marg 变量。解决这个问题的显而易见的方法是:但是,在编译时,这会生成以下 css:这是因为 ...

  CSS | :last-of-type 选择器

📅  最后修改于: 2021-08-29 13:05:19        🧑  作者: Mango

:last-of-typeSelector 用于定位与其父元素相同类型的最后一个子元素以进行样式设置。此选择器与“:nth-last-of-type”相同。句法:例子:输出:支持的浏览器:谷歌浏览器 4.0边缘9.0火狐 3.5Safari 3.2歌剧 9.6...

  CSS | column-rule-width 属性

📅  最后修改于: 2021-08-29 13:05:35        🧑  作者: Mango

CSS 中的 column-rule-width 属性用于更改列规则的宽度,即列之间的垂直线。句法:属性值:细:用于设置列之间的细规则。medium:用于在列之间创建中等宽度规则。它是默认宽度。厚:它在列之间创建一个粗的宽度规则。length:用于按长度设置宽度。它不接受负值。initial:用于将 column-rule-width 属性设置为其默认值。继承:此属性是从其父级继承的。例子:输出:...

  CSS | animation-iteration-count 属性

📅  最后修改于: 2021-08-29 13:05:52        🧑  作者: Mango

CSS 中的animation-iteration-count 属性用于指定动画重复的次数。它可以指定为无限以无限期地重复动画。句法:适当的价值:number:此属性值用于定义动画应播放的次数。默认值为 1。无限:此属性值指定动画应无限次播放(永远)。initial:该属性值用于将此属性设置为其默认值。继承:此值用于从其父元素继承此属性。示例:演示动画迭代计数的 HTML 程序支持的浏览器:ani...