CSS从入门到精通之选择器的声明

简介:
 
-------------------------------------------回顾---------------------------------------------------------------------
上一次我们说了两点内容,一起来回顾一下
1 css的分类:
                          a  外部样式:
                                         (独立存在的后缀为.css的文件。需要在页面内用链接或者导入的方式引入,才能对该页面生效;可作用的范围甚大,甚至另外一台服务器上的CSS文件都可以被当前页连接调用;实现了页面内容和样式在文件上的分离。)
                                        b 内嵌样式
                                          (写在当前页面内的<head></head>标记中的<style></style>标记中,作用的范围只是当前页面。实现了页面内容和样式在标记结构上的分离【样式在head 部分内容在body部分】)
                                        c 行内样式
                                            (写在标记内,用style属性引出,作用范围只针对该标记内容生效。)
 
以上三种CSS样式写的位置不同,作用范围也不同。而其中外部样式和内嵌样式都很好的体现了样式表的作用 :内容和样式的分离。
2  选择器
                      a 标记选择器(针对某一个标记生效,如例子中针对当前页面内的所有h1标记生效):
                      b  类别选择器(在内容标记中用class属性引出,并对该标记的内容生效)
                       c  id选择器(在某个标记的属性中,用id 属性引出,并针对该标记的内容生效)
------------------------------------------回顾完毕--------------------------------------------------------------
 
说到声明我们来看下面这个图解
那么我们今天关心的就是声明部分:
 
声明分为两种:
                    一  集体声明
                    二 全局声明(*特殊的集体声明)
 
一   下面我们来看看 集体声明的例子:

h1, h2, h3, h4, h5, p{   /* 集体声明 */
 color:purple;    /* 文字颜色 */
 font-size:15px;    /* 字体大小 */
}
h2.special, .special, #one{  /* 集体声明 */
 text-decoration:underline; /* 下划线 */
}
上面就是针对前面的几个选择器进行了依次集体声明.定义他们的文字颜色\字体大小等属性.
所以, 声明就是一种对于选择器进行的动作(概念).
 
二 接着再看全局声明:
 
*{        /* 全局声明 */
 color: purple;    /* 文字颜色 */
 font-size:15px;    /* 字体大小 */
}

h2.special, .special, #one{  /* 集体声明 */
 text-decoration:underline; /* 下划线 */
}
 
以上用*号表示全局,针对所有选择器进行声明,但是全局声明的优先级最低,所以一旦定义的属性冲突,那么全局声明就退位让闲了.
 
 
好了今天就说这么两个例子.
 
关于CSS选择器的嵌套,继承等关系...我们下回分解.....




本文转自 angerfire 51CTO博客,原文链接:http://blog.51cto.com/angerfire/117364,如需转载请自行联系原作者
目录
相关文章
|
9天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0
|
14天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
4天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
15 1
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
N..
|
25天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0
|
1月前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
19 1