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样式定义时,遵从就近原则,所谓就近原则是离被修饰的目标越近的定义将取代相对较远的定义