CSS

CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。

CSS作用

CSS样式表是一种网页内容的格式化技术,用于对网页显示内容进行效果装饰,它可以控制HTML中的几乎所有标记或者对其进行输出格式的重新设定,并且CSS可以将所修改的设定储存成一个独立的文件,提高其复用性。
CSS不仅可以控制网页的输出格式,还可以控制其他的输出终端,常见的电视机,显示器,投影仪等均可以使用CSS进行控制(CSS2具有该功能)。 

CSS定义规则

1、直接对HTML文件内所使用的标签进行样式修改 
应用范围:对某个具体的标签进行临时样式的修改,应用于该标签
定义格式:
<标签名 style="属性名1:属性值1; 属性名2:属性值2;……属性名n:属性值n;">

2、在HTML文件内部的文件头定义处对标签样式进行总体定义
应用范围:对某个网页中的某种标签进行样式的修改,应用于本网页内
定义格式:

 

<head>
    <style type="text/css">
    标签名1{
    属性名1:属性值1;
    属性名2:属性值2;
    ……
    }
    标签名2{
    属性名1:属性值1;
    属性名2:属性值2;
    ……
    }
    标签名N{
    属性名1:属性值1;
    属性名2:属性值2;
    ……
    }
    </style>
</head> 
    

3、将对标签样式的重定义制作成独立的CSS样式表文件(*.css)
应用范围:定义一个独立的样式表文件,设定标签属性,应用于所有使用该文件的HTML文件
定义格式:定义一个文件类型为css类型的文件

CSS样式表与HTML结合方式

直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作,样式将直接应用到被修改的标签中
在HTML文件内部文件头<HEAD>标签内定义的样式将在使用到该标签时自动应用其定义效果,无需再做其他操作

使用独立制作的CSS样式表文件(*.css),讲该样式定义引入HTML文件的方式有如下两种:  
在<HEAD>标签内使用<LINK>标签导入外部定义的CSS样式表文件
 <link rel=stylesheet href="mystyle.css" type="text/css">
使用CSS 规则“@import”标记来导入样式表单
 <style>
   @import *.css;
 </style>

选择符

选择符即进行CSS样式表设定时的基础符号,用于定义被CSS样式表修饰的标记符号,共有四种类型  
类型选择符
包含选择符
id选择符
class选择符

类型选择符

以标签作为选择符
 p{ color:blue; }
 <p>类型选择符</p>

包含选择符

以被某个对象E包含的F作为选择符
p b{ color:blue; }
<p><b>包含选择符</b></p>
<i><b>非包含选择符</b></i><br>
<b>非包含选择符</b>
<p>非包含选择符</p>

id选择符

以对象的唯一标识符的ID作为选择符
#idselect{ color=red; }
<b id=" idselect">ID选择符</b><br><b>非ID选择符</b>

class选择符

以对象的class属性作为选择符
.class1{ color=red; }
.class2{ color=blue; }
<b class="class1"> class1类选择符</b><br>
<b class="class1"> class1类选择符</b><br>
<b class="class2"> class2类选择符</b><br>
<b class="class2"> class2类选择符</b><br>
<b>非类选择符</b>

页面元素分类

页面中的各种HTML标签对应的每个实体称为HTML元素,HTML元素根据页面效果分为两种
块状元素(bolck)
块状元素的宽度默认为占据一整行,常见的块状元素有div,h1-h6,hr,ul/ol,table,p等
行内元素(inline)
行内元素没有默认的宽度与高度,以行内元素的内容决定其大小,常见的行业元素有a,span,img,input,b,i等
各种元素可以使用display样式修改其显示方法
display:block/inline/none

页面容器

HTML语言提供了两种常用的容器元素
div/DIV
 div也称为层,常用于将若干个组件组合在一起,DIV布局模式与早期的表格布局模式并称为两大布局模式
span/SPAN
 span描述了一种没有任何样式、没有任何效果的行内组件,主要用于自定义样式组件的开发

 总结:

在同一个HTML页面内使用多个CSS样式定义时,遵从就近原则,所谓就近原则是离被修饰的目标越近的定义将取代相对较远的定义

 

 

 

 

 

 

posted @ 2013-11-15 19:46  小痞  阅读(220)  评论(0编辑  收藏  举报