首先看一下使用Css设置h1标签字体颜色和大小的例子，效果图如下：

新建一个网页test.html,然后复制粘贴下面的内容：

<html>

<head>

<style type="text/css">

h1 {color:red; font-size:14px;}

</style>

</head>

<body >

<h1>使用Css让h1标签字体变红</h1>

</body>

</html>

在浏览器中打开test.html，效果如上图。

改变标签h1字体的是下面这句Css代码：

h1 {color:red; font-size:14px;}

h1是选择器，它代表了本页面所有的h1标签，大括号{}内是针对h1标签进行的操作，比如color:red设置了h1标签的字体为红色；font-size:14px设置h1标签字体大小为14像素。

Color是属性，表示字体颜色，red是对应的值，这样可以设置字体为红色；color:red合起来的专业叫法是“声明”，本质上就是一对属性值，Css本质上也就是通过设置标签的属性值，来改变标签的外在表现，这就叫样式。

注意下面的几个规则：

(1)    每一对属性声明都要放在大括号中，多对使用分号隔开；

(2)    属性与值中间使用英文的冒号隔开，代码中的标点符号基本都需要使用英文输入法状态下的，输入中文下的标点符号会错误。

(3)    CSS代码中增加一些空格，不影响效果，比如为了增加可读性，可以这样写：

h1

{

color:red;

font-size:14px;

}

(4)    CSS对大小写是不敏感的，比如H1和h1这两个选择符对CSS来说，选择的都是<h1>标签，不过如果使用id或class标识标签，这时就要区分大小写了，比如#Top和#top选择的是不同id的标签。

(5)    一条CSS规则可以包含多个声明，比如h1 {color:red; font-size:14px;}就包括两条声明，最后一个声明后的分号可以去掉，良好的编码习惯是加上最后的分号；

(6)    多个选择符可以组合起来。比如需要设置h1到h5标签的字体都设置为红色，14像素，那么可以这样设置：

h1, h2, h3, h4, h5 {color:red; font-size:14px;}

这样，h1到h5标签的字体都是红色，大小都是14像素，这对于需要相同样式的标签十分重要，比如可以把一些公共的部分写到一块。

只需要在h1标签后面添加逗号，就可以添加多个选择符，它们中间可以增加一些空格，增加可读性。

(7)    一个选择符可以设置多次样式。比如要求h1到h5标签的字体都为红色，另外要求h1的字体加粗，那么可以这样设置：

h1, h2, h3, h4, h5 {color:red; }

h1 { font-weight : bold; }

这是CSS编码中十分重要的一个技巧，先把需要相同的样式写到一起，然后写需要特殊处理的样式，而且浏览器是按照从上到下的顺序设置标签样式的，即便设置了相同的属性值，下面的属性值也会覆盖上面的。

下面介绍一下CSS的3大选择器。

1，  标签选择器

顾名思义，标签选择器就是直接把标签的名字当做选择器。

常用的标签选择符如下：

标签名

CSS选择器

备注

body

body

body标签选择符

h1,h2,h3,h4,h5,h6

h1,h2,h3,h4,h5,h6

标题h1到h6标签选择符

table

table

表格table标签选择符

td

td

单元格td标签选择符

a

a

超链接a标签选择符

img

img

图像img标签选择符

div

div

块标签div选择符

p

p

段落p标签选择符

ul

ul

无序列表ul标签选择符

li

li

列表项li标签选择符

使用的时候，直接写标签名称就行，比如body。

当设置了某个标签的样式时，这个设置会对本页面所有的相同标签起作用。

2，  ID选择器

ID代表了唯一，就像身份证号一样，每一个人的都不相同。页面元素的ID也不能相同，一个ID在html中只能出现一次。

设置标签的id，相当于把id和值当做一对属性值，比如<p id=”p1”> 段落1 </p>，这就设置了段落标签p的id为p1。

Id选择符，直接使用 #id，把id替换为对应标签的id值，就可以精确的选择某个标签。比如选择刚才的p标签：#p1 。

注意：

(1)    一个Html网页中id只能出现一次；

(2)    id是区分大小写的，#p1和#P1代表的是不同的id选择器，选择的元素不同；

(3)    id选择器是最精准的选择器，可以定位到某个具体的唯一元素。

3，Class类选择器

Class类选择器，代表了某一类相同的样式，“物以类聚，人以群分“，比如可以把红色字体定义为一类，所有需要设置红色字体的标签都加上这个类。

给标签添加类，实际也是把类和类值当做一对属性值添加到标签中，比如<p class=””red”> 段落1 </p>，这就设置了这个段落的class为red。

class类选择器，直接使用 .class，把class替换为对应的类值。这样就可以为具有相同类的标签应用相同的样式了。比如：

.red { color : red; }  这设置了类red的标签字体颜色为红色。

注意：

(1)    多个标签可以使用相同的类，相当于给它们设置了相同的样式，比如：

<h1 class=””red”> 标题1 </h1>

<p class=””red”> 段落1 </p>

这样可以把h1和p都设置为红色字体。

(2)    一个标签可以设置多个类，相同于讲一个标签设置了多种样式，比如：

<p class=””red bold”>  段落1，红色，加粗 </p>

定义粗体为一类样式  .bold { font-weight : bold; } font-weight意思是字体重要性，bold就是加粗的意思。

这样段落p会同时具有类red和类bold的样式。

注意：多个类名中间使用空格间隔。

CSS选择器的优先级

1，  标签选择器

对标签p应用样式，效果图如下：

新建一个网页a.html，复制粘贴下面的代码：

<html>

<head>

<style type="text/css">

p { color:red;}

</style>

</head>

<body >

<p class="green" id="p1">

这是一个段落，class="green"，id="p1"，设置p标签为红色

</p>

</body>

</html>

说明：

代码中给p标签添加了id和class，但是使用的是标签选择器p设置的样式。

2，  Class类选择器

对类green应用样式，效果图如下：

修改a.html的代码，修改后如下：

<html>

<head>

<style type="text/css">

.green { color:green;}

p { color:red;}

</style>

</head>

<body >

<p class="green" id="p1">

这是一个段落，class="green"，id="p1"，设置p标签为红色

</p>

</body>

</html>

说明：.green { color:green;} 为类green设置字体颜色为绿色。

从代码中可以看到，.green的设置在先，p的设置在后，但是结果仍然显示的为.green的样式，这说明了类选择器的优先级大于标签选择器。

结论：类选择器优先级 > 标签选择器优先级

3，  id选择器

对id为p1的标签应用样式，效果图如下：

修改a.html的代码，修改后如下：

<html>

<head>

<style type="text/css">

#p1 { color:blue;}

.green { color:green;}

p { color:red;}

</style>

</head>

<body >

<p class="green" id="p1">

这是一个段落，class="green"，id="p1"，设置p标签为红色

</p>

</body>

</html>

说明：#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。

从代码中可以看到，#p1在最前面，但是结果仍然显示的为#p1的样式，这说明了id选择器具有最高优先权。

结论：id选择器优先级 > 类选择器优先级 > 标签选择器优先级

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级的更多相关文章

  1. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  2. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  3. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  4. 我给女朋友讲编程html系列(1) -- Html快速入门

    Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...

  5. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  6. css系列教程--css文件的创建

    css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...

  7. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  8. 我给女朋友讲编程CSS系列(4) CSS盒子模型

    什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...

  9. 我给女朋友讲编程总结建议篇，怎么学习html和css

    总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...

随机推荐

  1. 使用Python开发环境Wing IDE设立项目注意事项

    使用Wing IDE的第一步是建立一个项目文件,这样Wing IDE就可以找到并分析源代码,存储工作. Wing IDE会自动以默认的项目进行启动.在本教程中用户也可以使用这个默认项目进行示例操作.如 ...

  2. 使用kvm制作Eucalyptus镜像（CentOS 6.5为例）

    1.前言 Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus) ...

  3. 【Android开发笔记】返回上层Activity的正确打开方式

    技术支持 http://stackoverflow.com/questions/12276027/how-can-i-return-to-a-parent-activity-correctly 首先, ...

  4. 开发Maven插件

    Mojo: Maven plain Old Java Object 1.插件命名规则:maven-<yourplugin>-plugin是Maven的保留字段,不允许使用,我们可以用< ...

  5. PowerShell (407) Proxy Authentication Required

    $Client = New-Object -TypeName System.Net.WebClient $Client.Proxy.Credentials = [System.Net.Credenti ...

  6. cmd中不能输入中文

    在命令行窗口下不能输入中文,只能输入英文,这是因为cmd.exe窗口启动时并没有启动conime.exe进程.事实上,这个进程容易被后门病毒利用,因此网上很多人都把它当成病毒看待,一些网上下载的系统就 ...

  7. 爬虫系统Lucene分词

    思路:查询数据库中信息,查询出id和name把那么进行分词存入文件 package com.open1111.index; import java.io.IOException;import java ...

  8. ARM实验1 —— 流水灯实验

    实验内容: 编写GPIO模块程序,实现对FS_4412平台的上的led2,led3,led4 ,led5,的流水灯实现. 实验目的: 熟悉开发环境的使用. 掌握Exynos 4412处理器GPIO功能 ...

  9. Select与SelectMany

    SelectMany在MSDN中的解释:将序列的每个元素投影到 IEnumerable(T) 并将结果序列合并为一个序列. 不用去用foreach进行两次遍历,就可以将子循环需要的元素过滤出来... ...

  10. python_29_三级菜单2

    menu={'河北':{ '石家庄':{ '平山':{ '县城':{}, '寨北':{}, '苏家庄':{}, }, '灵寿':{}, '鹿泉':{} }, }, '北京':{ '昌平':{ '沙河' ...