CSS学习: 基础
CSS:Cascading Style Sheet 层叠样式表, 简称样式表
样式就是对网页中的元素属性的整体概括.
层叠就是当HTML应用多个CSS文件时, 如果CSS文件之间所定义的样式发生了冲突, 将依据层次的先后来处理其样式对内容的控制.
CSS的基本语法:
CSS语法包括三部分:选择符, 样式属性, 属性值
基本语法: selector {proterty:value; property:value...property:value}
selector:选择符, 所有的HTML标记都可以作为选择符, 如body, p, table等.
property: 属性
value:属性值
CSS选择符类型:
1. 类选择符: 用类选择符可以把相同的元素分类定义成不同的样式. 在自定义类名称前加一个句点(.)
如:
p.red
{
color
:
red
}
p.blue { color : blue }
这里的p(HTML标记)是可以省略的, 省略以后没有适用范围的限制.
p.blue { color : blue }
.red
{
color
:
red
}
.blue { color : blue }
在HTML里引用:
.blue { color : blue }
<
p
class
=red
>
< p class =blue >
2. ID选择符 在HTML文档中, 需要唯一标识一个元素时, 就会赋予它一个id标识, 以便在对整个文档进行处理时能够很快地找到这个元素, 而ID选择符就是用来对这个元素定义单独的样式. (只在特殊情况下使用)
< p class =blue >
语法: 标记名 #标识名{样式属性:取值; 样式属性:取值...}
#salary { color : red }
<p id="salary">
<!段落p中所有ID为salary的元素均显示为红色>
#salary { color : red }
<id="salary">
<!页面中所有ID为salary的元素均显示为红色>
包含选择符是对某种元素包含关系(如元素1里包含元素2)定义的样式表. 这种方式只对在元素1里的元素2定义, 对单独的元素1或元素2无定义.
table b
{
font-size
:
11px
}
<!--设置表格b内的字号,对表格外的字号没有影响>
4. 伪类
<!--设置表格b内的字号,对表格外的字号没有影响>
最广泛的伪类是链接的4个状态:
a:link 未链接状态
a:visited 已访问链接状态
a:hover 鼠标指针悬停在链接上的状态
a:active 被激活(在鼠标单击与释放之间发生的事件)的链接状态
在HTML页面内, 使用<a>标记来标识链接元素.
插入CSS样式表:
插入CSS样式表到HTML文件有4种方法: 外部式样表, 内部式样表, 嵌入式样表, 导入式样表
按其在HTML文件中的位置,分为: 头部, 主体, 外部
CSS文件定义在HTML文件头部的方法: 内部样式表
CSS文件定义在HTML文件主体的方法: 嵌入样式表
CSS文件定义在HTML文件外部的方法: 链入外部式样表, 导入外部式样表
1. 链入外部式样表
先把样式表保存为一个单独的文件, 然后在HTML文件中使用<link>标记链接, 同时这个<link>标记必须放到HTML代码的<head>区域内.
<
head
>
< link rel ="外部式样表名称" type ="text/css" href ="式样表文件地址" >
</ head >
type="text/css" 指明该文件的类型是样式表文件
< link rel ="外部式样表名称" type ="text/css" href ="式样表文件地址" >
</ head >
外部式样表文件内不能含有任何HTML标签,如<head>,<style>等.
特点: 一个外部式样表文件可以应用于多个HTML文件, 当改变这个样式表文件时, 所有网页的样式都随之改变.
适用于制作大量相同样式的网页中.
2. 内部样式表
通过<style>标记把样式表的内容直接定义在HTML文件的<head>标记内.
< head >
< style type ="text/css" >
<!--
选择符 { 样式属性 : 取值 ; 样式属性 : 取值 ;
}
选择符 { 样式属性 : 取值 ; 样式属性 : 取值 ;
}
-->
</ style >
</ head >
<!--与-->标记的加入是为了防止一些不支持CSS的浏览器, 将<style>与</style>之间的CSS代码当成普通的字符串显示在网页中.
选择符, 也就是样式的名称, 可以选用HTML标记的所有名称.
特点: 将所有的样式表信息都列于HTML文件的头部, 这些样式表可以在整个HTML文件中调用.
适用于对网页一次性加入样式表.
3. 嵌入样式表
在HTML代码的主体, 即<body>标记中直接加入式样表的方法. 可以很直观地对某个元素直接定义样式.
<
head
>
</ head >
< body >
< HTML 标记 style ="样式属性:取值; 样式属性:取值;>
</body>
HTML标记就是页面中标记HTML元素的标记, 例如body,p等.
</ head >
< body >
< HTML 标记 style ="样式属性:取值; 样式属性:取值;
></body>
特点: 这样样式表, 效果只能控制某个标记.
适用于指定网页中某小段文字的显示风格或某个元素的样式.
4. 导入外部样式表
在样式表的<style>区域内引用一个外部的样式文件, 和链入外部样式表方法相似, 但导入时需要使用@import做声明. @import一般放在head内来使用.
不经常用到.