史上最全的css常用class名
class样式写法
class样式写法在前端开发中，CSS（层叠样式表）用于定义网页的样式和布局。
为HTML 元素添加样式的方式之一是通过为其指定一个或多个CSS 类。
以下是使用CSS 创建和应用类样式的基本语法：创建类样式：```css/* 创建名为"example" 的类样式*/.example {/* 样式属性和值*/color: red;font-size: 16px;font-weight: bold;}```上述CSS 代码定义了一个名为"example" 的类样式，其中包含了一些样式属性和相应的值。
应用类样式：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 将"example" 类样式应用于具有"my-element" 类的元素*/.my-element {/* 引用名为"example" 的类样式*//* 这里可以包含更多的样式，或者覆盖"example" 类样式中的某些属性*//* 例如：background-color: yellow; */}</style></head><body><!--使用具有"my-element" 类的div 元素--><div class="my-element"><!--内容--></div></body></html>```在上述HTML 代码中，通过`<style>` 元素内部的CSS 规则，将名为"example" 的类样式应用于具有"my-element" 类的`<div>` 元素。
css 前缀class选择器用法
css 前缀class选择器用法CSS 前缀 Class 选择器用法在 CSS 中，使用 Class 选择器可以为 HTML 元素添加样式。
然而，可能会出现多个 CSS 文件或者库同时使用同一个 Class 名称的情况，为了避免样式冲突，可以使用前缀来区分不同的 Class。
下面是一些常见的 CSS 前缀 Class 选择器的用法：•.myapp-container：以.myapp-为前缀的 Class 选择器可以用于标识属于某个应用程序的特定容器。
例如，在一个大型网页中，可以使用该选择器来命名容器类，如.myapp-header、.myapp-sidebar和.myapp-footer。
•.btn 和 .btn-primary：.btn是一个通用的按钮样式类，而.btn-primary是基于.btn的一个特定样式类。
这种前缀的使用方法可以让我们更方便地复用和扩展样式。
•.feature 和 .feature-：.feature选择器可以用于某个特定模块的整体样式，而.feature-something可以用来表示该模块的不同子元素或变化状态的样式。
•.grid 和 .grid-1, .grid-2：.grid选择器可以用来表示整个网格系统的样式，而.grid-1和.grid-2选择器则可以分别用来表示该网格系统的不同列样式。
•.media 和 .media-object：.media选择器用于表示一个媒体对象，而.media-object则用于表示该媒体对象的不同部分或变化状态。
•.error 和 .error-message：.error选择器用于表示错误提示的整体样式，而.error-message可以用于表示该错误提示的具体消息样式。
•.container 和 .container-fluid：.container选择器可以用来表示一个固定宽度的容器，而.container-fluid则用来表示一个流式宽度的容器。
class样式写法
class样式写法在现代网页设计中，CSS（层叠样式表）扮演着重要的角色，其中class样式是一种常见的选择器，在为网页添加样式和布局时经常用到。
本文将介绍class样式的写法和使用方法，以帮助读者更好地理解和应用CSS。
一、class样式的基本写法在HTML标记中，可以使用class属性来定义一个元素的class样式。
其基本写法为：```<元素名 class="样式名">```其中，元素名为要应用样式的HTML元素，样式名为自定义的样式名称。
二、在CSS中定义class样式在CSS样式表中，使用.（点号）来定义class样式。
例如，要定义一个叫做“text-center”的居中样式，可以写成：```.text-center {text-align: center;}```这样所有添加了class为“text-center”的元素都会居中对齐。
三、在HTML中使用class样式要在HTML中使用class样式，只需在对应元素的class属性中添加定义好的样式名即可。
例如，在一个段落中应用上述的“text-center”样式：```<p class="text-center">这是一个居中的段落。
</p>```这样该段落中的文本就会居中显示。
四、多个class样式的应用一个元素可以同时应用多个class样式，只需要在class属性中使用空格分隔不同的样式名即可。
例如，将一个段落同时应用“text-center”和“text-red”两个样式：```<p class="text-center text-red">这是一个既居中又红色的段落。
</p> ```这样该段落中的文本将同时具有居中对齐和红色字体样式。
五、class样式的优先级当多个class样式同时应用到一个元素上时，可能会出现样式冲突的情况。
css中class的用法
css中class的用法CSS（Cascading Style Sheets）是一种用于描述HTML（HyperText Markup Language）文档样式的语言。
在CSS中，我们可以使用class来定义一组具有相同样式属性的元素，以便于管理和复用样式。
下面我们将详细介绍class在CSS中的用法。
一、定义class在HTML中，我们可以使用class属性来为元素定义一个类名。
类名可以使用连字符或下划线分隔，并且不能包含空格。
例如，我们可以为一段文本定义一个名为"my-text"的class：```html<p class="my-text">这是一段带有my-text类的文本。
</p>```二、使用class在CSS中，我们可以使用类选择器来选择具有特定类名的元素，并为其指定样式属性。
类选择器由一个点号和一个类名组成。
例如，要为具有my-text类的元素设置字体颜色为红色，我们可以使用以下CSS代码：```css.my-text {color: red;}```这将把所有具有my-text类的元素字体颜色设置为红色。
三、类名的应用场景类名在CSS中有很多应用场景，例如：1. 复用样式：通过定义一组具有相同样式的元素，我们可以复用这些样式，减少代码冗余，提高开发效率。
2. 样式分组：可以将具有相似样式的元素分组，方便管理。
例如，可以将具有相同背景颜色的元素放在一个组中，并为其定义一个类名。
3. 响应式设计：可以通过定义不同的类名来适应不同的屏幕尺寸和设备类型，实现响应式设计。
4. 定制化设计：可以为不同的人群或特定场景定义不同的类名，实现定制化设计。
四、注意事项在使用class时，需要注意以下几点：1. 类名应尽量简短且具有描述性，避免使用过于模糊或难以理解的类名。
2. 在使用类选择器时，应注意避免选择器之间的冲突，如避免使用相同类名的元素。
css class选择器用法
css class选择器用法CSS（层叠样式表）是用于描述网页外观和布局的一种语言。
它可以与HTML文档结合使用，使网页的外观更加美观和易于阅读。
在CSS中，class选择器是一种非常重要的选择器，它可以帮助我们对网页中的元素进行样式设置，并且可以让我们更好地管理网页的外观。
一、CSS class选择器的基本语法CSS class选择器是通过class属性来选择元素的。
class属性是一个用于指定元素类别的属性，可以用来为元素设置样式。
在CSS 中，class选择器以“.”开头，后面跟着类名，类名可以是任何名称，但是必须是唯一的。
例如：```.my-class{color: red;}```上面的代码中，`.my-class`就是一个class选择器，它选择了一个类名为“my-class”的元素，并为它设置了颜色为红色的样式。
二、CSS class选择器的优点使用CSS class选择器的主要优点在于它可以让我们更好地管理网页的样式。
通过使用class选择器，我们可以将网页中的元素分组，然后为每个组指定相同的样式。
这样，我们就可以轻松地修改网页的样式，而不必对每个元素进行繁琐的修改。
例如，如果我们想要为网页中的所有标题设置相同的字体样式，可以使用以下代码：```.title{font-size: 24px;font-weight: bold;color: #333;}```上面的代码中，`.title`是一个class选择器，它选择了所有类名为“title”的元素，并为它们设置了字体大小、字体粗细和颜色等样式。
这样，我们就可以轻松地修改标题的样式，而不必对每个标题进行单独的修改。
三、CSS class选择器的高级用法除了基本的用法之外，CSS class选择器还有一些高级用法，可以让我们更好地管理网页的样式。
1. 多个class选择器一个元素可以有多个class属性，它们之间用空格分隔。
在CSS 中，我们可以使用多个class选择器来选择这个元素，并为它设置样式。
30个最常用css选择器解析讲解
30个最常用css选择器解析作者：iiduce 文章来源： 点击数：835 更新时间：2011-7-31你也许已经掌握了id、class、后台选择器这些基本的css选择器。
但这远远不是cs s的全部。
下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。
掌握了它们，才能真正领略css的巨大灵活性。
1.以下是代码片段：* {margin: 0;padding: 0;}星状选择符会在页面上的每一个元素上起作用。
web设计者经常用它将页面中所有元素的margin和padding设置为0。
*选择符也可以在子选择器中使用。
以下是代码片段：#container * {border: 1px solid black;}上面的代码中会应用于id为container元素的所有子元素中。
除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera2. #X以下是代码片段：#container {width: 960px;margin: auto;}井号作用域有相应id的元素。
id是我们最常用的css选择器之一。
id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera3. .X以下是代码片段：.error {color: red;}这是一个class(类)选择器。
class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera4. X Y以下是代码片段：li a {text-decoration: none;}这也是我们最常用的一种选择器——后代选择器。
css中class的命名规则
css中class的命名规则CSS中class的命名规则可以参考以下几点：1. 为了增加代码的可读性和可维护性，class的命名应该具有描述性，能够准确地表示该元素的作用或特征。
可以使用有意义的名词、形容词或动词短语来命名，避免使用无意义的字符或数字。
2. class的命名应具备一定的层级结构，以便于理解和组织样式。
可以使用连字符或下划线来分隔不同层级的名词，如`.header-nav`或`.header_nav`。
3. 避免使用过长的class命名，一般不建议超过三个单词。
可以使用缩写或简化的词汇来表示，但要确保不会造成混淆。
4. 尽量使用具体的名词来描述元素的作用，而不是使用抽象的词汇。
例如，使用`.btn`表示按钮，而不是使用`.click`或`.action`。
5. 在命名class时，可以根据元素的用途或功能来添加前缀，以避免与其他元素的class冲突。
例如，使用`.sidebar-`作为侧边栏相关元素的前缀。
6. 避免使用纯数字或纯字母的class命名，以防止与其他命名规则冲突。
7. 在命名class时，可以使用BEM（Block Element Modifier）方法来表示元素的层次关系和状态。
例如，`.block`表示块级元素，`.block__element`表示元素，`.block--modifier`表示元素的状态或变体。
8. 尽量避免使用过于具体或具有限制性的命名，以增加代码的灵活性和可复用性。
例如，使用`.red-text`表示红色文本，而不是`.error-text`，因为后者只能用于表示错误信息。
9. 在命名class时，可以使用命名空间来表示不同的模块或组件。
例如，使用`.header-`作为头部模块的命名空间，使用`.footer-`作为底部模块的命名空间。
10. 最后，要遵循团队内部的命名约定和规范，以确保代码的一致性和可维护性。
以上是关于CSS中class的命名规则的一些建议，希望能对你的创作有所帮助。
CSS常用的ClassName表
CSS常⽤的ClassName表ClassName含义about关于account账户arrow箭头图标article⽂章aside边栏audio⾳频avatar头像bg,background背景bar栏（⼯具类）branding品牌化crumb,breadcrumbs⾯包屑btn,button按钮caption标题，说明category分类chart图表clearfix清除浮动close关闭col,column列comment评论community社区container容器content内容copyright版权current当前态，选中态default默认description描述details细节disabled不可⽤entry⽂章，博⽂error错误even偶数，常⽤于多⾏列表或表格中fail失败（提⽰）feature专题fewer收起field⽤于表单的输⼊区域figure图filter筛选first第⼀个，常⽤于列表中footer页脚forum论坛gallery画廊group模块，清除浮动header页头help帮助hide隐藏hightlight⾼亮home主页icon图标info,information信息last最后⼀个，常⽤于列表中links链接login登录logout退出logo标志ClassName含义main主体menu菜单meta作者、更新时间等信息栏，⼀般位于标题之下module模块more更多（展开）msg,message消息nav,navigation导航next下⼀页nub⼩块odd奇数，常⽤于多⾏列表或表格中off⿏标离开on⿏标移过output输出pagination分页pop,popup弹窗preview预览previous上⼀页primary主要progress进度条promotion促销rcommd,recommendations推荐reg,register注册save保存search搜索secondary次要section区块selected已选share分享show显⽰sidebar边栏，侧栏slide幻灯⽚，图⽚切换sort排序sub次级的，⼦级的submit提交subscribe订阅subtitle副标题success成功（提⽰）summary摘要tab标签页table表格txt,text⽂本thumbnail缩略图time时间tips提⽰title标题video视频wrap容器，包，⼀般⽤于最外层wrapper容器，包，⼀般⽤于最外层。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<ul> <li class="one"><a href="#">Home</a></li> <li class="two"><a href="#">About</a>
...</li> </ul>
9.class=”even”, class=”odd”
用来实现隔行换样式，一般用在表格 和列表：
一、标签选择器： 顾名思议，标签选择器是直接将 HTML 标签作为选择器，可以是 p、h1、dl、strong 等 HTML 标签。如：
p { font:12px;} em { color:blue;} dl { float:left; margin-top:10px;}
二、id 选择器： 我们通常给页面元素定义 id。例如定义一个层 ＜div id="menubar">＜/div> 然后在样式表里这样定义：
1） 开头字母一律小写
2） 尽量不要用缩写英文除非可 以一目了然的
3）如果遇到相差不大 class 或者 id，主功能识别字母在前，位置识别 字母在后，位置识别字母第一个可大
1.class=”fixed”
fixed 这个 class 几乎出现在没个样式 文件中，用在为包含浮动子元素的容 器元素清除浮动，样式如下
6. class=”inner”
inner 也是经常使用的 class，而且大 部分上是用来制造视觉上的额外效 果，用来给嵌套在容器里的子容器定 义样式（比如制作双背景图片效果）：
7.class=”link”
10.class=”section”
一般用在为指定内容中特定部分添 加特定的样式：
以下为引用的内容：
文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id 的命名: (1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度： wrapper 左右中：left right center
(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list
以下为引用的内容：
.fixed:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;
} .fixed{
display:block; } /* \*/ .fixed{ min-height:1%; } * html .fixed{ height:1%; }
提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright (四)class 的命名: (1)颜色:使用颜色的名称或者 16 进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } (2)字体大小,直接使用"font+字 体大小"作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英 文名称,如 .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用"类别+功能"
的方式命名,如 .barnews { } .barproduct { } 注意事项::
写（如：navTop，menuLeft） 4） 必须使用英文开头 css 文件内容注释写法：
1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写，除非一看就明白 的单词. 主要的 master.css 模块 module.css
首先讲一下 div+css 样式表的 id 的常用命名规则如下表所示:
实际上上面的 div+css 样式表的 id 命名也会经常用大小写和_来区分，比如主导航就是 MainNav,如果还有必要在区分就 是 MainNav_1,MainNav_2 等等。也可以使用"类型+变量名称"的规则来命名，比如写一个红色字体的 class,可以.f_red {}(f 是 font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。
This is me trying to look cool!
The rest of the content here ...
<a href="#">Read more...</a>
8.class=”one”, class=”two”, class=”three”… 这些 class 用在需要区别每个子元素 的列表项，比如用移动背景图片来制 作导航菜单：
以下为引用的内容：
<ul> <li class="even">Content</li> <li class="odd">Content</li> <li class="even">Content</li> <li class="odd">Content</li> </ul>
#content img{ float:left; display:inline; margin-right:10px; border:1px solid #ccc; padding:1em 0; background:#fff; } #content img.alt{ float:right; margin-right:0; margin-left:10px; }
alt 是”e”（交替）的简称，这 个 class 用在有一组样式一样的元素， 需要为其中的某几个设定特别的样 式，比如一组向左浮动的图片中需要 有一张是向右浮动,可以这样：
以下为引用的内容：
4.class=”first”, class=”last”
直到 99.9% 的浏览器支持:first-child 和:last-child 这两个伪类之前， class=”first”, class=”last”用的地方还 是很多的。
#menubar { margin:0 auto; background:#ccc; color:#c00; }
其中"menubar"是你自己定义的 id 名称。注意在前面 加"#"号。
id 选择器也同样支持后代选择器，例如： #menubar p { text-align:center; line-height:20px;; } 这个方法 主要用来定义层和那些比较复杂，有多个“唯一后代”的 元素。
<div class="section"> content here...</div>
link 跟 image 类似，我用来嵌套一个 A 标签，最经常用来制作”Read More” 链接：
以下为引用的内容：
要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的 首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。div+css 样式表的 id 和 class 的区别:就一句来概括, class 可以定义多个值并且可以应用到多个标签上，但 id 只能是一个。所以就开始查一些相关的 div+css 样式表 id 和 class 的常用命名规则，请大家参考一下：
当然像 div+css 样式表的 id 和 class 的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一 些来命名,如果您有更好的 div+css 样式表的 id 和 class 的命名规则的话,请留言，多多指教.
CSS 最常用的五类选择器
转载
准确而简洁的运用 CSS 选择器会达到非常好的效果。不必通篇给每一个元素定义类（class）或 ID，通过合适的组织， 可以用最简单的方法实现同样的效果。在实际工作中，最常用的选择器有以下五类：
三、类（class）选择器：
在 CSS 里用一个点开头表示类别选择器定义，例如：
.da1 { color:#f60; font-size:14px ; }
5.class=”image”
平常选择图片元素一般用类似 (#container img)这样的标签选择器， 但是我这里的 class=”image”是用在包 含图片的容器元素，假如你正在做一 个新闻列表，需要在新闻标题下面加 一行带图片和说明文字，并且向右浮 动，可以这样做：