开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

html元素类命名的css技巧

在 HTML 中，可以使用元素类名称来定义 CSS 样式。这种命名方法可以使样式定义更具描述性，易于理解。以下是一些常见的 HTML 元素类命名技巧：

使用语义化命名：使用反映元素功能的名称来定义类名，例如 button、input、div 等。
使用缩写：可以使用元素的缩写来定义类名，例如 btn、input、div 等。
使用单词缩写：可以使用单词的缩写来定义类名，例如 btn、input、div 等。
使用动画名称：可以使用动画名称来定义类名，例如 fadeIn、fadeOut、slideDown 等。
使用颜色名称：可以使用颜色名称来定义类名，例如 red、blue、green 等。

以下是一些示例：

<!-- 使用语义化类名 -->
<div class="button">点击我</div>
<input class="input" type="text" placeholder="输入框">

<!-- 使用缩写类名 -->
<div class="btn">点击我</div>
<input class="input" type="text" placeholder="输入框">

<!-- 使用单词缩写类名 -->
<div class="btn">点击我</div>
<input class="input" type="text" placeholder="输入框">

<!-- 使用动画名称类名 -->
<div class="fadeIn">点击我</div>
<input class="input" type="text" placeholder="输入框">

<!-- 使用颜色名称类名 -->
<div class="red">红色背景</div>
<input class="input" type="text" placeholder="输入框">

请注意，使用元素类名定义 CSS 样式时，需要将类名添加到 HTML 元素上，如 <div class="red">。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 伪元素技巧

伪元素技巧在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。...清除浮动如果一个元素内部的子元素全部都是浮动的话，那么这个元素会出现高度塌陷，这个时候就需要清除浮动。...常见的用法是在父元素结束之前，统一引入一个元素 clear: both 用来清除浮动。...html: click css: .btn { position: relative; } .btn:before { content:...，非常有趣，既能减少 DOM 元素数量，还能用 CSS 实现一部分 JS 的功能，非常酷炫，后面见到有趣的用法会不断记录。

8661 0

HTML5+CSS3命名规范

前言任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。...css文件名命名规范模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css...补丁：mend.css 打印：print.css 页面结构元素div命名规范头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column...submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧....bottom {float:bottom;} 标题栏样式命名-使用“类别+功能”的方式命名 .barnews { } .barproduct { } 注释书写规范行间注释-直接写于属性值后面，如：

7322 0

HTML&CSS Table元素详细解说

不需要你对每一个css属性都了如指掌，你只要大概理解意思，然后掌握一些基本的css属性就可以了。普通的网页能自己画出来，复杂的网页能从别的地方拷贝过来，并且看懂，就可以了。...那么今天呢，我带大家用table来做一个简单的demo，通过一个具体的例子，来看一下table怎么用？首先，打开Eclipse，新建一个HTML页面。 ? ?...2.编写工具类样式文件 tool.css 在刚才的例子中，我们把一个div元素或者span元素都相对于父元素居中显示了，我现在请问一下大家，在实际开发中，让一个元素相对于父元素居中显示，这样的需求是不是很常见呀...那有没有什么办法，让我们下次再遇到这个需求的时候，直接用起来就行了呢？答案肯定是有的，我们可以封装一个通用的工具类，然后把一些经常要用到的样式放进去，就OK了。...现在我们来编写一个tool.css工具类。 ? ? 1489026181387098368.png 引入这个css： ? 然后，在span元素上绑定对应的class： ? 这样就OK啦。

1.1K8 0

Html和CSS布局技巧（转）

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是...CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。...我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平...我对css-vertical-align的一些理解与认识在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell...4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性

4.8K2 0

css中的伪类与伪元素

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类伪元素的种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。....first-child {color: red} first second 即我们给第一个子元素添加一个类...，然后定义这个类的样式。... 总结伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

2.5K8 0

CSS中的伪类和伪元素

定义伪类 CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...区别下面是一个简单的html列表片段：我是第一个我是第二个如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式...因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素

2.8K1 0

CSS伪类与伪元素

CSS伪类与伪元素每日更新前端基础，如果觉得不错，点个star吧 ?...https://github.com/WindrunnerMax/EveryDay CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。状态性伪类是基于元素当前状态进行选择的。...结构性伪类 CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。

2K2 0

CSS入门3-认识html之元素

（注2：更多内容请查看我的目录。） 1. 元素的定义 html元素，指的是从开始标签（start tag）到结束标签（end tag）的所有代码。...其拥有如下特点： HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭...（以开始标签的结束而结束）大多数 HTML 元素可拥有属性 2....块级元素默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。...当然内联元素也能变成块级元素，那就是通过css的display:inline;和float来实现。内联元素依附其他块级元素存在，紧接于被联元素之间显示，而不换行。

8973 0

【Emmet —— HTML CSS】超实用开发技巧

Emmet 介绍 Emmet (前身为： Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。...特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的...HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发（源：Wikipedia）简单来说，Emmet 能帮助我们快速进行前端代码的编写，在主流开发工具 Vscode 中也已集成。...我们只需要键入相应标签的缩略语，按 Tab 键就可快速生成对应代码，下面介绍几组开发中常用的语法常用语法格式名称 Emmet 格式效果类选择器 .blue <...标准 Emmet 格式效果 html:4s 生成 html4 严格文档类型，DOCTYPE 为 html 4.01 html:5 生成 html5 标准的包含 body 为空基本 DOM html:

3211 0

React技巧之获取元素类名

bobbyhadz.com/blog/react-get-class-name-of-element[1] 作者：Borislav Hadzhiev[2] 正文从这开始~ 总览在React中，获取元素的类名...={handleClick}> Hello world ); } 上面的代码片段向我们展示了，当组件挂载或者事件被触发时，如何获取元素的类名...} else { console.log('Element does NOT contain class'); } }, []); 我们使用className属性，以编程方式来获取元素的类名...event 如果你需要当事件触发时来获取元素的类名，可以使用event.currentTarget.className 。...event的target属性给了我们一个对触发事件的元素的引用（可以是一个后代）。这意味着，如果你需要访问实际被点击的元素的类名，而不是事件监听器所连接的元素，你可以使用target属性来代替。

1.2K2 0

前端必看的8个HTML+CSS技巧

8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。...这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1....我们直接上HTML和CSS代码看看是怎么实现的。...使用content 属性插入的内容都是匿名的可替换元素。 :first-child — CSS伪类表示在一组兄弟元素中的第一个元素。...:last-child — CSS伪类代表父元素的最后一个子元素。 ---- 公众号回复“前端教程源码”获取源码地址 5.

1.7K6 1

CSS-伪类和伪元素

背景写了这么多年代码，对CSS中的伪类和伪元素竟然没有细致的进行过学习总结，由此可见在实际代码开发中，用的也确实不多，也就用过一些:first-child,:hover之类的吧，其它的连before...什么的都没用过，于是迫切需要大于伪元素与伪类进行一个系统整体的学习。...伪类和伪元素伪类：是以一个冒号作为前缀，被添加到选择器的末尾，当你希望在特定状态下(:hover)才被呈现到指定元素时，可以往元素的选择器后面加上伪类。...常用的伪类和伪元素伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。...url：引用媒体文件(比如图片) attr:可以调用当前元素内的某个属性(比如a标签的href属性) counter计数器：可以不使用列表元素实现序号功能。

1K2 0

提升CSS技巧：:is(), :where(), 和:has()伪元素的运用

它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素，例如元素的类型、元素的位置和元素的后代。...例如，如果你想要针对所有类名为 isPink 或 isPretty 的元素进行定位，可以使用:is()伪类。...HTML/CSS div:is(.isPink, .isPretty) { color: pink; } Pink </...例如，如果你想要定位所有类名以 bold 开头的元素，可以使用 :where()伪类来实现：将以下伪类添加到上述CSS文件中，将导致任何具有以 bold 开头的CSS类的子元素渲染为粗体。...它以选择器作为参数，并在元素具有与选择器匹配的后代时返回 true。例如，如果你想要定位所有包含元素的元素，可以使用 :has() 伪类来实现。在这一步中，我们的 HTML 没有任何变化。

2443 0

CSS 基础系列：伪类和伪元素

CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。...active 选择正在活动的链接 :focus input:focus 选择获得焦点的输入框 3.2 结构化伪类结构化伪类是 CSS3 新增选择器，利用 DOM 树进行元素过滤，通过文档结构的互相关系来匹配元素...实际上，lang=” “ 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。 :dir 匹配指定阅读方向的元素。当 HTML 元素中设置了 dir 属性时该伪类才能生效。...3.5 其他选择器示例示例说明 :root 匹配文档的根元素一般的 html 文件的根元素是 html 元素。

1.9K1 0

Html5+CSS3命名规范（前端web开发命名规范，符合SEO规范）

任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。 ?...css文件名命名规范模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css...补丁：mend.css 打印：print.css 页面结构元素div命名规范头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column...search　　友情链接：friendlink　　页脚：footer　　版权：copyright　　滚动：scroll　　内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧...大家在日常的页面设计中要逐步养成规范命名的好习惯。

1.7K1 0

CSS伪类与伪元素「建议收藏」

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素：用于创建一些不在文档树中的元素，并为其添加样式。...结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...(::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

1.6K2 1

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。 HTML 文档由相互嵌套的 HTML 元素构成。 ---- HTML 文档实例 <!...---- HTML 实例解析元素: 这是第一个段落。这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签以及一个结束标签 ....元素内容是: 这是第一个段落。元素: 这是第一个段落。元素定义了 HTML 文档的主体。...---- 不要忘记结束标签即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：这是一个段落这是一个段落以上实例在浏览器中也能正常显示，因为关闭标签是可选的。...忘记使用结束标签会产生不可预料的结果或错误。

2K1 0

CSS进阶-CSS选择器高级：伪类与伪元素

在CSS的探索之旅中，伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素，还能实现丰富的交互反馈和视觉效果。...本文旨在深入浅出地探讨CSS伪类与伪元素的核心概念、常见问题、易错点及其规避策略，并通过实例代码加深理解。...双冒号与单冒号的使用问题描述：CSS3规范中，伪元素推荐使用双冒号(::)，而伪类仍使用单冒号(:)，但在旧版浏览器中，双冒号可能不被支持。...注意事项：保持逻辑清晰，通常先写伪类再写伪元素，并注意CSS特性的优先级规则。 4. 使用content属性问题描述：在伪元素中忘记使用content属性，导致样式不生效。...实践技巧利用:not()排除特定元素：伪类:not()可以帮助我们更精准地选择元素，排除不必要的样式应用。

1401 0

我可能学到了“假”的CSS：伪类伪元素

CSS的选择器除了根据id、class、属性等从DOM中获取元素的以外，还有很重要的一类，用来获取元素的特别内容或特别状态，这就是伪元素(Pseudo-elements) 和伪类(Pseudo-classes...[1.1] ::before 和 ::after 相比于其他伪元素大都是对文档中已有部分的选择，::before 和 ::after 则是向文档树中加入内容，这些内容并不存在于HTML源代码中，但确是可见的...正确理解样式权重同样以上例的HTML结构说明，因为 ::first-letter 是伪元素，相当于 ::first-letter 选择的“第”字成为了 span 的子元素，故其权重大于span样式权重...如果元素中有空格等内容，不会被认为是:empty [2.4] 根据索引选择特殊类型的元素这一系列的伪类包括 :first-of-type,:last-of-type,:only-of-type,:nth-of-type....html https://web3canvas.com/an-in-depth-guide-to-css3-selectors/ http://www.cnblogs.com/kiracn/archive

1.5K1 0

HTML的行元素和块元素

行元素：整行排列，不能改变大小(宽度和高度)，宽度默认文字宽度，当行元素排列过多时（超过浏览器的宽度时自动强制换行）。块元素：一个块元素独占一行，宽度默认浏览器的宽度，可以改变宽度和高度。...行内块元素：属于行元素，但又有块元素的属性，横行排列但又可以设置宽度和高度。...HTML 表单定义最大的标题定义副标题定义标题定义标题定义标题定义最小的标题创建一条水平线元素为定义无序列表标签定义段落定义预格式化的文本标签定义 HTML 表格标签表格主体（正文）表格中的标准单元格定义表格的页脚...原文地址《HTML的行元素和块元素》

3.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭