CSS是什么?
CSS是一个名称,是一个功能,用于对HTML文件功能的补充及扩展。其作用就是对HTML文件中各种排版进行设置,达到对网页中字体、颜色、背景、图片等的控制,使网页能够完全依照设计者的想法来显示。
为什么要有CSS?
CSS可以控制网页的显示,HTML标签中的属性也可以控制其显示,为什么还要有CSS呢?其中一个原因如下描述,以前几乎一个人就可以完成一个网站的设置,非常的简单,现在不是了,一个网站需要很多的人一起工作才可以完成,如果每个人都按照自己的喜好制作网页,那么开发出来的网页的风格就会不一样,那么这些网页很难放在同一个网站中了,CSS可以方便地设置所有网页的风格,然后交友不同部门、不同地方的人制作网页。
CSS就是HTML中标签属性独立出来的东西,当然CSS也有自己特有的东西。将HTML语言中内容显示的部分独立的形成一个整体(CSS),然后,我们编写网页的时候,使用HTML语言设置网页内容的结构,使用CSS语言设置网页内容的显示,从而达到使网页编程的灵活性和复用性增强的目的。注意,HTML语言仍具有网页内容显示的功能,但是,我们在具体做网页的时候,通常只用它对网页内容结构控制的功能。
怎么使用CSS?
CSS不同于JavaScript,CSS不能单独的存在,必须依靠HTML中的“标签”而存在,“标签”即CSS中的选择器,CSS样式表的基本语法结构为:选择器{属性一:值一;属性二:值二;……};选择器可以为HTML标签名称,也可以是标签的属性id值,或class值。
HTML使用CSS有四种方式:行内样式、内嵌式、导入式和连接式。行内样式和内嵌式的CSS代码都存放在HTML文档里,导入式和连接式的CSS代码存放在单独的文件中。
<html>
<head>
<title>页面标题</title>
<!--内嵌式-->
<style type="text/css">
<!--
@import url(2.css); /*导入式*/
/*HTML标签名作为选择器*/
p{
color:#FF00FF;
}
/*HTML的class属性值作为选择器*/
.first{
background-color:#00FF00; /*设置背景颜色*/
}
/*HTML的id属性值作为选择器*/
#second{
background-color:#0000FF; /*设置背景颜色*/
}
-->
</style>
<!--链接式-->
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">行内式</p>
<h1 class="first">标题一</h1>
<h2 id="second">标题二</h2>
</body>
</html>
注意:“连接式”会在装载页面主体部分之前装载CSS文件,这样网页显示内容的时候就会显示其相应的样式了;“导入式”会在整个页面装载完成后再装载CSS文件,这样网页先显示内容,后再规定其相应的样式。
为什么是CSS+DIV?
DIV是HTML中的块标记,就是把一些HTML标签作为一个块。CSS可以通过DIV标签,使被操作的对象的颗粒度可以灵活的改变。span标签是行内标签,div可以通过设置达到span的效果,但是,span很难达到div的一些效果。
盒子模型
HTML中的所有元素,不论其元素是块级元素,还是行集元素,在CSS看来都是一个盒子,这个就是盒子模型。这里需要说的是,我们最好把这个“盒子”理解成没有高度的盒子,这样有利于我们理解下面层的概念,当然,你也可以把这个“盒子”理解成有高度的盒子,这样的话,我们需要将下面“层”理解成有一定高度的层。具体的盒子模型如下
块级元素和行集元素
块级元素在标准文档流中是单独的占一行的,而行集元素在标准文档流中占得是行的一部分。但是当他们完全脱离标准文档流的时候,他们就不再具有该特性。块级元素和行集元素之间是可以相互改变的,通过display属性,当属性值为block时,就可以转换为块级元素,当属性属性值为inline时,就可以转换为行集(内联)元素。
层的概念
HTML文档内容的布局和显示不仅仅在一个平面上,而是可以在多个平面上进行布局和显示,各个平面(层)之间的布局有的并没有完全的断离关系,有的就完全脱离了关系,当然,其显示效果我们可以通过z-index属性进行设置,最后我们从最外的那个层面看到的重叠效果就是最终显示的效果。
文档流
在这里我们不需要太多的关心文档的输入流,应该多了解些文档的输出流,因为程序进程输出各个层的先后顺序的不同,就会导致最终我们看到层的重叠效果的不同。
根据文档流对层的一些控制的不同,我们可以把文档流分为常规流、绝对定位流和浮动流。现在我们可以把这个流当成层的意思。
常规流:最原始的那一层,最初该层包含所有的元素,其它层的元素都是从这个层里面弄走的,当然,弄走人家的东西,你得给人家一个说法;绝对定位流:该层弄走原始层元素时,给人家说,我弄走的东西就完全是我的了,以后你这关于它的任何东西都不能存在;浮动流:该层还算厚道,不像绝对定位流那样,说弄走人家东西,就连个毛也不给人家留,浮动流在弄走人家东西的时候,会告诉常规层,你们可以给它留个墓地或者把它原来的家留着,要是留墓地(够它住就行)的话,墓地的位置由我来定,“好处”就是它的真身会在墓地的上方,要是留它原来的家的话,它的真身可以任意的漂流,具体你们留墓地还是流家,会告诉你们的。
注意:行集元素作为盒子被使用的时候,其本质还是在常规流上,但该元素的上方会形成一个突起,这样我们从上方看的时候会出现一些覆盖的现象;块集元素作为盒子被使用的时候,它作用于整体,不会出现什么突起,什么覆盖的现象发生。绝对定位流和浮动流,是在重新定位元素位置(float和position属性设置)的时候出现的。