📝 CSS教程

2362篇技术文档
  CSS |向下导航属性

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

CSSnav-down属性用于通过键盘导航键进行导航。此属性定义当用户使用导航键进行导航时聚焦的位置。nav-down可以与nav-right、nav-up和nav-left属性一起使用。句法:属性:auto:这是浏览器定义要导航的元素的默认值。<id>:它定义了要导航的 id。<target-name>:它定义要导航的目标。initial:这是默认值。继承:它从其父元素继承。注意:此属性仅支持 ...

  如何使用 JavaScript 获取直接应用于元素的所有 CSS 样式?

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

可以使用 JavaScript 中的getComputedStyle元素函数获取元素的 CSS。它返回一个包含 CSS 属性及其值的 JavaScript 对象。这个对象被索引并且可迭代属性名称。getPropertyValue(property)用于获取属性的值。在下面的代码中,将元素对象传递给getCSS(element)使用 getComputedStyle(element) 和 getPr...

  CSS 将图标放在表单中的输入元素内

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

为了在 input 元素内添加图标,<i>标签和<span>标签被广泛用于在网页上添加图标。要在网页上或某些特定区域添加任何图标,它需要 head 标签内的 fontawesome 链接。 fontawesome 图标可以通过在图标名称前使用 fa 前缀来放置。fontawesome 链接:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4....

  语义UI |统计数据

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

Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 来构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可以用来使您的网站看起来更神奇。它使用一个类向元素添加 CSS。统计数据显示属性的当前值。示例 1:输出:示例 2:统计数据组输出:示例 3:带有图像和图标的统计信息输出:示例 4:水平输出:示例 5:彩色统计数据输出:...

  如何改变水平线的颜色(<hr>元素)使用 CSS ?

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

HTML<hr>标签用于在 HTML 页面中插入水平线或主题分隔符以划分或分隔文档部分。 <hr> 标签的颜色可以通过 CSS 中的 background-color 属性来设置。例子:输出:下面列出了支持的浏览器:谷歌浏览器IE浏览器火狐苹果浏览器歌剧...

  布尔玛 |标签

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

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。Bulma 标签是一个小元素,对于将信息附加到块或其他组件非常有用。示例 1:简单标签元素输出:示例 2:彩色标签元素输出:示例 3:不同尺寸的标签元素输出:示例 4:圆形标记元素输出:示例 5:带有删除标记元素的文本标记元素示例 6:标签连接在一起输出:...

  哪些字符在 CSS 类名/选择器中有效?

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

在 CSS 中选择有效的类名或选择器非常容易,只需遵循规则即可。有效名称应以下划线 (_)、连字符 (-) 或字母 (az)/(AZ) 开头,后跟任何数字、连字符、下划线、字母。它不能以数字开头,以数字开头是 HTML5 可以接受的,但 CSS 不可以接受。两个连字符后跟一个数字是有效的。示例 1:此示例描述了使用 CSS 的有效 id 选择器列表。输出:示例 2:此示例描述了使用 CSS 的有效...

  CSS | [属性$=值] 选择器

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

[attribute$=”value”] 选择器用于选择那些属性值以指定值“value”结尾的元素。该值不需要作为单独的词出现。它可能是另一个词或表达的一部分,但它需要出现在末尾。句法:示例 1:输出:示例 2:输出:支持的浏览器:[attribute$=value] 选择器支持的浏览器如下:谷歌浏览器 4.0浏览器 7.0火狐 3.5Safari 3.2歌剧 9.6...

  如何使用 jQuery EasyUI 设计网页日历?

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

EasyUI 是一个 HTML5 框架,用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。在本文中,我们将学习如何为我们的网页界面设计日历功能。EasyUI for jQuery 下载:示例 1:下面的示例演示了使用jQuery EasyUI框架的基本日历功能。开发人员可以根据需要将它们...

  CSS Web 安全字体

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

CSS 中有多种可用的字体,可以在其样式表中使用任何类型的字体。但是,用户的浏览器或操作系统可能不支持所有字体。为了克服这个问题,使用具有 Web 安全字体的后备系统来确保最大的兼容性。我们为“font-family”属性分配了几个字体名称。我们首先指定首先需要的字体,并以通用字体系列结束。因此,与第一种字体不兼容,它不断尝试可以显示的下一种字体,最终以可以在大多数浏览器上可靠显示的通用字体结束。...

  CSS | border-image 属性

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

CSS 中的border-image 属性用于设置元素的边框。句法:border-image 属性是下面列出的许多属性的组合:边框图像源边界图像切片边框图像宽度边界图像开始边框图像重复属性值:border-image-source:该属性用于设置边框图片的来源位置。句法:border-image-slice:border-image-slice 属性用于分割或切片由 border-image-so...

  CSS element()函数

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

CSS 的element()函数用于将图像放置在页面中另一个元素的一个标签中。该图像显示了在另一个 HTML 元素中进行的更改时的更改。句法:参数:此函数采用 HTML 元素的 id。注意:此函数不适用于 class 标签,请在 Firefox 中运行代码。例子:输出:支持的浏览器:火狐浏览器火狐安卓版...

  CSS |特异性

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

当多个 CSS 规则应用于同一个元素时,浏览器必须决定将哪个特定的规则应用于元素。浏览器遵循的规则统称为Specificity特殊性规则包括:内嵌 CSS>内部 CSS>外部 CSS通过引用外部样式表应用的 CSS 样式具有最低优先级,并被内部和内联 CSS 覆盖。内部 CSS 被内联 CSS 覆盖。内联 CSS 具有最高优先级并覆盖所有其他选择器。例子:示例 1 的“external.css”:...

  如何使用 jQuery 设置平滑滚动以停止在顶部的特定位置?

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

jQuery 中的scrollTop()方法用于滚动到页面的特定部分。使用可用的内置动画为该方法设置动画可以使滚动更流畅。并且,从中减去指定的值将使滚动从顶部停止。方法:首先使用 hash 属性提取锚链接的哈希部分,并使用offset()方法找到它在页面上的位置。然后对该哈希值调用 scrollTop()方法以滚动到该位置。此方法通过将其包含在animate()方法中并指定要使用的动画持续时间(以...

  如何使用 CSS 设置插入阴影?

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

在 CSS 中,box-shadow属性在元素的框架周围添加阴影效果。我们可以围绕用逗号分隔的元素设置多个效果。box-shadow被定义为元素的 X 和 Y 相对偏移值、模糊和扩散半径以及颜色。在本文中,我们将学习如何使用 CSS 设置插入阴影。 Inset 属性将外部阴影更改为内部阴影。注意:默认情况下,阴影生成在框外,但通过使用inset,我们可以在框内创建阴影。句法:box-shadow:...