CSS学习: 基础

最新推荐文章于 2024-09-15 19:00:01 发布

weixin_33795833

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/niuniu1985/archive/2009/09/22/1570902.html

版权

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标记)是可以省略的, 省略以后没有适用范围的限制.

.red { color : red }
.blue { color : blue }

在HTML里引用:

< p class =red >
< p class =blue >

2. ID选择符在HTML文档中, 需要唯一标识一个元素时, 就会赋予它一个id标识, 以便在对整个文档进行处理时能够很快地找到这个元素, 而ID选择符就是用来对这个元素定义单独的样式. (只在特殊情况下使用)
语法: 标记名 #标识名{样式属性:取值; 样式属性:取值...}

#salary { color : red }
<p id="salary">
<!段落p中所有ID为salary的元素均显示为红色>

#salary { color : red }
<id="salary">
<!页面中所有ID为salary的元素均显示为红色>

3. 包含选择符
包含选择符是对某种元素包含关系(如元素1里包含元素2)定义的样式表. 这种方式只对在元素1里的元素2定义, 对单独的元素1或元素2无定义.

table b { font-size : 11px }
<!--设置表格b内的字号,对表格外的字号没有影响>

4. 伪类
最广泛的伪类是链接的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" 指明该文件的类型是样式表文件
外部式样表文件内不能含有任何HTML标签,如<head>,<style>等.
特点: 一个外部式样表文件可以应用于多个HTML文件, 当改变这个样式表文件时, 所有网页的样式都随之改变.
适用于制作大量相同样式的网页中.
2. 内部样式表
通过<style>标记把样式表的内容直接定义在HTML文件的<head>标记内.

< head >
< style type ="text/css" >
<!--
选择符 { 样式属性 : 取值 ; 样式属性 : 取值 ;

}
选择符 { 样式属性 : 取值 ; 样式属性 : 取值 ;

}

-->
</ style >
</ head >

< head >

</ head >
< body >

< HTML 标记 style ="样式属性:取值; 样式属性:取值;

</body>

HTML标记就是页面中标记HTML元素的标记, 例如body,p等.
特点: 这样样式表, 效果只能控制某个标记.
适用于指定网页中某小段文字的显示风格或某个元素的样式.
4. 导入外部样式表
在样式表的<style>区域内引用一个外部的样式文件, 和链入外部样式表方法相似, 但导入时需要使用@import做声明. @import一般放在head内来使用.
不经常用到.

转载于:https://www.cnblogs.com/niuniu1985/archive/2009/09/22/1570902.html