CSS全称为层叠样式表。
CSS基本语法结构
CSS规则由两部分构成,即选择器和声明。声明必须放在大括号{}中,并且声明可以是一条或多条;每条声明由一个属性和值组成,属性和值用冒号分开,每条语句以英文分号结尾。如下所示。
h1{
font-size:12px;
color:#F000;
}
font-size:12px;和color:#F000;表示两条声明,声明中font-size和color表示属性,而12px和#F000则是对应的属性值。
注意:在CSS的最后一条声明中,用以结束的“;”可写可不写,但是基于W3C标准规范考虑,建议最后一条声明的结束;都要写上。
认识<style>标签
在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。<style>标签位于<head>标签中,它规定浏览器中如何呈现HTML文档。在<style>标签中,type属性是必须的,它用来定义style元素的内容,唯一值是text/css。
CSS选择器
在CSS中,有3中最基本的选择器,分别是标签选择器、类选择器和ID选择器。
1、标签选择器。
p{font-size:16px;}
2、类选择器。
.class{font-size:16px;}
3、ID选择器。
ID选择器的使用方法与类选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次。
#id{font-size:16px;}
ID选择器与类选择器不同,同一个id属性在同一个页面中只能使用一次。
注意:ID选择器在页面中只能使用一次,也就是说在同一个页面中同一个id属性只能设置一次;而类选择器可以在页面中多次使用。
在HTML中引入CSS样式
1、行内样式。
行内样式就是在HTML标签中直接使用style属性设置CSS样式。Style属性提供了一种改变所有HTML元素样式的通用方法。Style属性的用法如下所示。
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
这种使用style属性设置CSS样式仅对当前的HTML标签起作用,并且是写在HTML标签中的,因此这种方式不能是内容与表现分离,本质上没有体现出CSS的优势,因此不推荐使用。
2、内部样式表。
正如前面讲到的所有示例一样,把CSS代码写在<head>的<style>标签中,与HTML内容位于同一个HTML文件中,这就是内部样式表。
这种方式方便在同页面中修改样式,但不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。实际开发时,会在页面开发结束后,会将这些样式代码保存到单独的CSS文件中,将样式和内容彻底分离开,即下面介绍的外部样式表。
3、外部样式表。
外部样式表是把CSS代码保存为一个单独的样式表文件,文件扩展名为.css,在页面中引用外部样式表即可。HTML文件引用外部样式表有两种方式,分别为链接式和导入式。
1、链接外部样式表
链接外部样式表就是在HTML页面中使用</link>标签链接外部样式表,这个</link>标签必须放到页面的<head>标签内,语法如下所示。
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
其中,rel="stylesheet"是指在页面中使用这个外部样式表;type="text/css"是指文件的类型是样式表文本;href="style.css"是文件所在的位置。
外部样式表实现了样式和结构的彻底分离,一个外部样式表文件可以应用于多个页面。
2、导入外部样式表
导入外部样式表就是在HTML网页中使用@import导入外部样式表,导入样式表的语句必须放在<style>标签中,而<style>标签必须放到页面的<head>标签内,语法如下所示。
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
其中@表示导入文件,前面必须有一个@符号,url("style.css")表示样式表文件位置。
3、链接式与导入式的区别
/1/<link/>标签属于XHTNL防臭,而@import是CSS2.1中特有的。
/2/使用<link/>链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中,再进行编译显示,所以这种情况下显示出来的网页与用户预期的效果一样,即使网速再慢也是一样的效果。
/3/使用@import导入的CSS文件,客户端在浏览网页时先将HTML结构呈现出来,再把外部CSS文件加载到网页当中,当然最终的效果也与使用<link/>链接文件效果一样,只是当网速较慢时会先显示没有CSS统一布局的HTML网页,这样就会给用户很不好的感觉。这也是目前大多数网站采用链接外部样式表的主要原因。
/4/由于@import是CSS2.1中途而有的,因此对于不兼容CSS2.1的浏览器来说就是无效的。
综合以上几个方面的因素,大家可以发现,现在大多数网站还是比较喜欢使用链接外部样式表的方式引用外部CSS文件的。
样式的优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
行内样式>内部样式表>外部样式表,即“就近原则”。如果同一个选择器中样式声明层叠,那么后写的会覆盖先写的样式,即后写的样式优先于先写的样式。
CSS的高级应用
1、后代选择器
后代选择器的写法就是把外层的标签写在前面,内层的标签写在后面,之间用空格分隔。当标签发生嵌套时,内层的标签就成为外层标签的后代。
常用情况如下:
/1/按标签的嵌套关系,如本例中<h3>标签嵌套<strong>,直接按标签的嵌套关系编写样式。
/2/按选择器的嵌套关系,当最外层的类选择器名称为head,他最里面嵌套类选择器、ID选择器,这是直接按样式的嵌套关系编写,如head .menu或head #menu。
/3/3种互相嵌套关系,当最外层ID选择器名称为nav,它里面嵌套类选择器和标签选择器,如#nav .title或#nav li。
2、交集选择器
交集选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。
这种方式构成的选择器,将选中同时满足前后两者定义的元素,也就是前者所定义的标签类型,并且制定了后者的类型或者id的元素,因此被称为交集选择器。
3、并集选择器
与交集选择器相对应,还有一种选择器,它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标签选择器、类选择器、ID选择器等)都可以作为并集选择器的一部分。
并集选择器是多个选择器通过逗号连接而成的,在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。
CSS继承特性
在CSS语言中继承的概念并不复杂,简单地说就是将各个HTML标签看做一个个容器,其中被包含的小容器会继承包含它的大容器的风格样式,也称包含与被包含的标签为父子关系,即子标签会继承父标签的风格样式,这就是CSS中的继承。
继承的应用
CSS继承指的是子标签的所有风格样式,可以在父标签样式风格的基础上再加以修改,产生新的样式,而子标签的样式风格完全不会影响父标签。