css学习笔记（一）

saybody

浏览: 907577 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

一 css样式表基础

1，css基本概念

css（cascading style sheet）即层叠样式表，简称样式表，要理解样式表的概念先要理解样式的概念，样式是对网页中的元素（字体，段落图像，列表等）属性的整体概括，即描述所有网页对象的显示形式（例如文字的大小，字体，背景及图像的颜色，大小等都是样式）。层叠，就是指当HTML文件引用多个css文件时，如果css文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。

2，css基本语法

css语法包括三部分：选择符，样式属性和属性值

css基本语法：

selector{property:value; property:value;.... proerty:value}

selector代表选择符，property代表属性，value代表属性值

选择符包括多种样式，所有HTML标记都可以作为选择符，如body，p，table等都是选择符。但在利用css的语法给他们定义属性和值时，其中属性和值要用冒号隔开。

例如：body{color:red}

如果属性值由多个单词组成，并且单词间有空格，那么必须给值加上引号，如字体的名称经常是几个单词组成

例如：p{font-family:"Courier New"}

如果需要对一个选择符指定多个属性时，用分号将属性隔开

例如：p{text-align:center; color:red; font-family:calibri}

为了提高代码的可读性，上面的例子也可以分行写

{

text-align:center;

color:red;

font-family:calibri

}

相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值，只要用逗号将选择符组分开即可，这样可以减少重复定义样式

例如：

p,table{font-size:10pt}

其效果完全等效于：

p{font-size:10pt}

table{font-size:10pt}

3，类选择符

用户类选择符可以把相同的元素分类定义成不同的样式，在定义类选择符时，在自定义类名称的面前加一个句点（.）。

类选择符语法：

标记名.类名{样式属性:取值; 样式属性:取值;...}

例如：要设置两个不同文字颜色的段落，一个为红色，一个为蓝色，可以利用如下代码预定义两个类

p.red{color:red}

p.blue{color:blue}

以上的代码中定义了段落选择符p的red和blue两个类，即red和blue成为类选择符，其中类得名称可以是任意英文字母或是字母开头的数字组合。要注意的是，这里的p（HTML）标记是可以省略的。而且在实际应用中，这种省略HTML标记的类选择符是最常用的css方法，因为这种方法定义的类选择符没有适用范围的限制。而不省略HTML标记的类选择符，其适用范围仅限于该标记所包含的内容，例如下面省略了HTML标记的类选择符。

.red{color:red}

.blue{color:blue}

但是要怎么样才能在不同的段落里应用这些样式呢？只要在HTML标记里加入已经定义的class参数即可，如下应用了刚才定义的两个类选择符

4，id选择符

在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便哎对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id

id选择符语法：标记名#标识名{样式属性:取值; 样式属性:取值;...}

例如，如果要在页面中定义一个id为salary的元素，并要设置这个元素为红色，那么只要添加如下代码

#salary{color:red}

由于id选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用

5，包含选择符

包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。例如：

table b{font-size:11px}这里只是说明表格b内的字号为11像素，对表格外的字号没有影响

6，伪类

伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性，之所以称为“伪”，是因为它指定的对象在文档中并不存在，他们指定的是元素的某种状态

应用最广泛的伪类是链接的4个状态——未链接状态（a:link）,已访问链接状态：（a:visited）,鼠标指针悬停在链接上的状态（a:hover）以及被激活（在鼠标单击与发生的事件）的链接状态（a:active）。在HTML页面内，使用<a>标记链接元素并没有设置4个状态的代码，但是可以通过设置链接的伪类来使其呈现这些状态。选择符和伪类之间用英文分号隔开

7，选择符优先级

在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。通常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。因为id选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。!important语法主要用来提升样式规则应用优先级。只要使用了!important语法声明，浏览器就会优先选择它声明的样式显示。所以若想打破已定义的优先级顺序们可以使用!important声明

8，插入css样式表

插入css样式表到HTML文件中有4种方法，分别是：链入外部样式表，内部样式表，嵌入样式表和导入外部样式表。单在应用这4种方法将css文件插入到HTML文件时，由于css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。

css文件定义在HTML文件头部的方法：内部样式表

css文件定义在HTML文件主体的方法：嵌入样式表

css文件定义在HTML文件外部的方法：链入外部样式表，导入外部样式表

9，链入外部样式表

链入外部样式表先把样式表保存为一个单独的文件，然后在HTML文件中使用<link>标记链接，同时这个<link>标记必须放到HTML代码的<head>区域内

基本语法：

view plain

<
head
>
  


...  

<
link
 
rel
=
"stylesheet"
 
type
=
"text/css"
 
href
=
"样式表文件的地址"
>
  


</
head
>
  


...  

rel="stylesheet"是指在HTML文件中使用的是外部样式表

type="text/css"指明该文件的类型是样式表文件

href中的样式表的地址，可以为绝对地址或相对地址

外部样式表文件中不能含有任何HTML标签，如<head>或<style>等

css文件要和HTML文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表来显示其风格

一个外部样式表可以应用于多个HTML文件。当改变这个样式表文件时，所有网页的样式随之改变，因此常用在制作大量相同的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载

10，内部样式表

内部样式表是通过<style>标记把样式表内容直接定义在HTML文件的<head>标记之内

基本语法：

view plain

<
head
>
  
<
style
 
type
=
"text/css"
>
  
<!--  

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

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

...  

-->
  
</
style
>
  
</
head
>

type="text//css"说明这是一段css代码

标记的加入是为了防止一些不支持css的浏览器，将<style>与</style>之间的css代码当成普通字符串显示在网页中

选择符也就是样式的名称，这领的选择符可以选用HTML标记的所有名称

内部样式表方法就是将所有的样式信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，即可选用该方法

11，嵌入样式表

嵌入样式表是在HTML代码的主体，即<body>标记中直接加入样式表的方法，所以这种方法可以很直观地对某个元素直接定义样式

基本语法：

view plain

<
head
>
  
...  

</
head
>
  
<
body
>
  
...  

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

</
body
>

HTML标记就是页面中标记HTML元素的标记，例如body，p等

style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont，param和script之外的任何元素

利用这种方法定义的样式，其效果只能控制某个标记，所以比较适用于指定网页中某个小段文字的显示风格，或某个元素的样式

12，导入外部样式表

导入外部样式表是指在样式表的<style>区域内引用一个外部的样式表文件，和链入外部样式表方法相似，但导入时需要使用@import做声明。@import声明可以放到head外也可放到head内，但根据语法规则，一般都放在head内来使用

基本语法：

view plain

<
head
>
  
<
style
 
type
=
"text/css"
>
  
@import url（外部样式表地址）;  

...  

</
style
>
  
...  

</
head
>

import语句后面的“;”是不可以省略的

外部样式表文件的文件扩展名必须为.css

样式表地址可以是绝对地址，也可以是相对地址

在使用中，某些浏览器可能会不支持导入外部样式表的@import声明。所以此方法不经常用到

上面四种方法优先级最高的是嵌入样式表方法，其余三中方法顺序相同，若同时出现，浏览器会遵守“最近优先原则”，即与内容最靠近的那个样式表插入方法

1
顶

1
踩

分享到：

同事的微博编程与生活 | css学习笔记（二）

2011-07-22 13:45
浏览 1093
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论