📝 CSS教程
2362篇技术文档📅  最后修改于: 2021-08-29 12:27:48        🧑  作者: Mango
要隐藏滚动条,请使用-webkit-,因为主要浏览器(Google Chrome、Safari 或更新版本的 Opera)都支持它。下面列出了其他浏览器的许多其他选项:-webkit-(Chrome、Safari、较新版本的 Opera):-moz-(火狐):-ms-(Internet Explorer +10):隐藏滚动条之前要考虑的要点:最好仅当所有内容都可见时才隐藏滚动条,否则用户可以跳过内...
📅  最后修改于: 2021-08-29 12:28:08        🧑  作者: Mango
Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。Bulma 支持很多类型的表格,例如有边框的表格、条纹表格、可悬停的表格、可滚动的表格等。只需在 HTML 中添加一些 Bulma 类,我们就可以实现非常互动的表格。示例 1:此示例使用 Bulma 创建一个简单的表。输出:示例 2:此示例使用 Bulma 创建带...
📅  最后修改于: 2021-08-29 12:28:27        🧑  作者: Mango
CSS 中的:after 选择器用于在其他元素的内容之后多次添加相同的内容。它在每个选定元素的内容之后插入一些内容。句法:示例 1:此示例使用 :after 选择器在元素后添加空格。输出:示例 2:此示例使用 :after 选择器在元素后添加空格。输出:...
📅  最后修改于: 2021-08-29 12:28:42        🧑  作者: Mango
在本文中,我们将学习如何使用 CSS 以百分比形式设置行高。行高是 CSS 的一个属性,用于在每个元素之后提供高度。方法:我们将使用CSS 中的 line-height属性并使用百分比设置值。百分比设置与元素字体大小相关的行高。设置的最终值是通过将元素的计算字体大小与给定的百分比值相乘来确定的。句法:例1:本例中使用不同的行高百分比值,字体大小相同。HTMLHTML输出:例2:在本例中,相同的行高...
📅  最后修改于: 2021-08-29 12:28:58        🧑  作者: Mango
在本文中,我们将单击一个按钮来使用 jQuery 为段落元素设置动画。要为段落元素设置动画,我们使用 animate() 方法。 animate() 方法用于更改具有 CSS 样式的元素的状态。此方法还可用于更改 CSS 属性以创建所选元素的动画效果。句法:例子:HTML输出:单击按钮之前:点击按钮后:...
📅  最后修改于: 2021-08-29 12:29:12        🧑  作者: Mango
发光的星星效果是用于深色主题网站的最酷的效果之一。它被称为星星效果,因为它具有以不同方式动画的小发光球,看起来像星星。此效果可用于图像滑块、加载器,也可用作展示 UI 元素。方法:方法是使用无序列表创建小球,然后使用关键帧和第 n 个子属性为它们设置动画。这两个属性的基本知识是在本文中进一步学习的先决条件。HTML 代码:在本节中,我们创建了一个无序列表。CSS 代码:对于 CSS,请按照以下步骤...
📅  最后修改于: 2021-08-29 12:29:31        🧑  作者: Mango
border-color 属性用于为元素的边框添加颜色。单独使用这个属性是不起作用的,所以首先使用“border-style”属性来设置边框。这可以分别为上边框、右边框、下边框和左边框取一到四个值。如果未设置此属性,则它将继承元素的颜色。句法:属性值:其中,颜色值可以是以下任意值:name– 指定颜色名称,如“blue”。Hex– 指定一个十六进制值,如“#0000ff”。RGB– 指定一个 RG...
📅  最后修改于: 2021-08-29 12:29:56        🧑  作者: Mango
给定一个图像,任务是将图像设置为在更大的 div 中对齐(垂直和水平)。它可以通过使用元素的位置属性来完成。示例 1:本示例使用position 属性使图像居中对齐。输出:示例 2:此示例使用center 属性将图像设置为在 div 中居中。输出:...
📅  最后修改于: 2021-08-29 12:30:11        🧑  作者: Mango
CSS 中的 background-size 属性用于设置背景图像的大小。句法:属性值:auto:用于将 background-size 属性设置为其默认值。它用于将背景图像显示为其原始大小。句法:例子:输出:length:用于设置背景图片的宽度和高度。第一个值表示宽度,第二个值表示背景图像的高度,如 px、pt、em 等。如果没有给出任何值,则将其设置为 auto。句法:例子:输出:百分比:用于...
📅  最后修改于: 2021-08-29 12:30:27        🧑  作者: Mango
任何排序函数的主要函数是比较两个字符串并检查两个字符串的哪一个必须在另一个之前。几乎每种编程语言都有一些内置的排序函数,但要在 Sass 中执行此操作,您需要创建自己的字符串比较函数。在第一步中,我们需要教 Sass,根据每个字符串包含的字符对字符串进行排序的正确顺序。我们使用一个变量来做到这一点。这将用于声明以a开头的字符串应该出现在以b 或 c开头的字符串之前,依此类推。您还可以添加其他值,如...
📅  最后修改于: 2021-08-29 12:30:41        🧑  作者: Mango
进度条是网页中的一个重要元素,进度条可以用于下载、获得的分数、技能测量单位等。我们可以使用HTML和CSS来创建进度条。要使进度条具有响应性,您将需要JavaScript。如何使用 JavaScript 创建进度条?在本文中,我们将学习使用 HTML 和 CSS 创建进度条。使用两个 HTML “div”、容器(父 div)和技能(子 div)创建进度条,如下例所示。示例 1:我们将文章分为两个编...
📅  最后修改于: 2021-08-29 12:30:57        🧑  作者: Mango
Scroll Padding 底部是 Scroll Snap 模块中的一个内置属性。此属性设置滚动填充。此属性充当滑动元素顶部的磁铁,贴在视口的顶部并在该位置停止滚动(强制)。Scroll Padding 属性是可选的,当 Scroll Snap type 属性设置为 none 时使用此属性。句法:属性值:此属性接受上面提到和下面描述的两个属性:length-percentage:此属性的工作方式...
📅  最后修改于: 2021-08-29 12:31:20        🧑  作者: Mango
image-rendering属性用于设置用于图像缩放的算法类型。当用户将图像缩放到原始尺寸之上或之下时,此属性可用于修改缩放行为。句法:属性值:auto:用于表示缩放算法将依赖于用户代理。不同的浏览器可能有不同的算法。例子:输出:比较清晰边缘值与自动值清晰边缘:用于指示算法将保留图像中的对比度和边缘。由于使用了抗锯齿,它不会平滑颜色或模糊图像。这里使用的一些算法是最近邻算法和其他非平滑缩放算法。...
📅  最后修改于: 2021-08-29 12:31:35        🧑  作者: Mango
我们已经看过文章,如何固定表格中的行高。表格中列的宽度即td可以很容易地固定。这可以通过在 <td> 标签中添加宽度属性来完成。如果不指定宽度,则列的宽度会根据内容的变化而变化。列的宽度规格可以以像素或百分比为单位。句法:方法:width属性用于设置列的宽度。它被添加到 <td> 标签中。宽度应根据内容指定,以像素或百分比为单位。如果列中的内容很大,就会溢出。例1:本例中,第一列的宽度是固定的,但...
📅  最后修改于: 2021-08-29 12:31:55        🧑  作者: Mango
shape-image-threshold属性用于设置在将图像用于 shape-outside 时用于提取形状的 alpha 通道的阈值。句法:属性值:alpha-value:用于设置提取形状的阈值。大于阈值的像素将被视为形状。 0.0 到 1.0 之间的十进制值可用于设置从完全透明到完全不透明的阈值。如果值超出范围,它们将被限制在此范围内。下面的例子说明了shape-image-threshol...