我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
首先看一下使用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大选择器、选择器优先级的更多相关文章
- 我给女朋友讲编程html系列(4) -- html常用简单标签
今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...
- 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset
我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...
- 我给女朋友讲编程html系列(2) --Html标题标签h1
Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...
- 我给女朋友讲编程html系列(1) -- Html快速入门
Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- css系列教程--css文件的创建
css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- 我给女朋友讲编程CSS系列(4) CSS盒子模型
什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论] 的方式来写. 1, 看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...
- 我给女朋友讲编程总结建议篇,怎么学习html和css
总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...
随机推荐
- 使用Python开发环境Wing IDE设立项目注意事项
使用Wing IDE的第一步是建立一个项目文件,这样Wing IDE就可以找到并分析源代码,存储工作. Wing IDE会自动以默认的项目进行启动.在本教程中用户也可以使用这个默认项目进行示例操作.如 ...
- 使用kvm制作Eucalyptus镜像(CentOS 6.5为例)
1.前言 Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus) ...
- 【Android开发笔记】返回上层Activity的正确打开方式
技术支持 http://stackoverflow.com/questions/12276027/how-can-i-return-to-a-parent-activity-correctly 首先, ...
- 开发Maven插件
Mojo: Maven plain Old Java Object 1.插件命名规则:maven-<yourplugin>-plugin是Maven的保留字段,不允许使用,我们可以用< ...
- PowerShell (407) Proxy Authentication Required
$Client = New-Object -TypeName System.Net.WebClient $Client.Proxy.Credentials = [System.Net.Credenti ...
- cmd中不能输入中文
在命令行窗口下不能输入中文,只能输入英文,这是因为cmd.exe窗口启动时并没有启动conime.exe进程.事实上,这个进程容易被后门病毒利用,因此网上很多人都把它当成病毒看待,一些网上下载的系统就 ...
- 爬虫系统Lucene分词
思路:查询数据库中信息,查询出id和name把那么进行分词存入文件 package com.open1111.index; import java.io.IOException;import java ...
- ARM实验1 —— 流水灯实验
实验内容: 编写GPIO模块程序,实现对FS_4412平台的上的led2,led3,led4 ,led5,的流水灯实现. 实验目的: 熟悉开发环境的使用. 掌握Exynos 4412处理器GPIO功能 ...
- Select与SelectMany
SelectMany在MSDN中的解释:将序列的每个元素投影到 IEnumerable(T) 并将结果序列合并为一个序列. 不用去用foreach进行两次遍历,就可以将子循环需要的元素过滤出来... ...
- python_29_三级菜单2
menu={'河北':{ '石家庄':{ '平山':{ '县城':{}, '寨北':{}, '苏家庄':{}, }, '灵寿':{}, '鹿泉':{} }, }, '北京':{ '昌平':{ '沙河' ...