css样式规则定义类别,css规则类型

CSS规则的三个类型怎么分 什么情况用什么类

类：.abc{.....}用的时候div class="abc"/div有针对性，可以和其他方式配合使用，进行特殊化设置，可以多个一起使用 标签：div{...}对该页面所有div有效，范围很广，适合开头及大范围定义，如body,ul,li,dd,dl,dt{....}统一整体样式 ID：#div1{......}ID用的时候div id="div1"/div因为ID可能被其他语言使用，如JS，所以一个页面尽量不要出现重复的ID，因此，针对性很强。 伪类：a:hover{.....}伪类最明显的是有个:号，可以实现一些特殊效果，比如上面这个a:hover就是鼠标悬停时显示何种样式 层叠样式表，就体现在这些选择器的层叠优先级上，一般：标签类ID行内，越特殊的优先级越高！ 可以看看《CSS 设计彻底研究》，前两天刚看完，哥们讲的还行！

相关问答

Q1: 说一下css规范？

一、Css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)　

4.背景(background, border等)

5.其他(animation, transition等)

二、Css语法：

命名一般为小写英文字母。

为了代码的易读性，在每个声明块的左花括号前添加一个空格。

每条声明语句的 : 后应该插入一个空格。

所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

十六进制值应该全部小写，例如，#fff。

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

Css常用的一些命名：

可参考：CSS 常用命名 - 彼岸时光 - 博客园。

三、Css的引入：

Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

四、Css的命名规范(BEM,OOCSS)：

什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下：

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

优点：

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点：

这样类名过于长，且复杂。

什么是OOCSS（面向对象CSS）：

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

OOCSS的优点：

减少CSS代码。

具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。

语义标记，有助于SEO。

更好的页面优化，更快的加载时间（因为有很多组件重用）。

可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。

能轻松构造新的页面布局，或制作新的页面风格。

OOCSS的缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

  欢迎到优就业来了解

Q2: CSS样式表有哪几类规则?

1、内联样式表

直接在HTML标记内，插入sytle属性，再定义要显示的样式，这是最简单的样式定

义方法。不过，利用这种方法定义样式时，效果只可以控制该标记，其语法如下：

标记名称 style="样式属性:属性值;样式属性:属性值"

如：body style=" color:#FF0000;font-family:"宋体";cursor:url(3151.ani);"

2、 嵌入样式表

style type="text/css"

内部样式表是把样式表放到页面的head区里，这些定义的样式就应用到页面中了，样式表是用style标记插入的

head

……

style type="text/css"

!--

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

--

/style

……

/head

style元素是用来说明所要定义的样式。TYPE属性是指定style元素以css的语法定义。有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式!-- 注释 --隐藏内容而不让它显示。

3、外部样式表

link href="样式表地址" rel="stylesheet" type="text/css" /

4、输入样式表

可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的style/style标签对中，被输入的css文件中的样式规则定义语句就成了style/style标签对中的语句。

style

@import url(http://……)

/stypel

Q3: CSS规则有哪四种类型，各有什么特点

1. 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式

2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式

3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id

4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签