在线建站培训
您的位置: 魔客吧魔客学院网站建设教程查看内容

课时2-7:网站建设基础知识之div+css简介

讲师:moke | 课程:网站建设教程
   各位同学大家好,今天我们给大家讲解div+css知识。DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。在上节课程中我们已经给大家讲到div,div其实只是html中的一个标记。css是样式,主要控制页面的显示和样式,也是本节课程的关键。例如图片的大小,图片的排列,文字的颜色,背景颜色等等所有看到的页面样式都由css控制显示的。所以,如果想要自己设计制作一套模板的话,你必须懂得div+css知识。上节课程我们讲解的是html语言,主要是了解这些标记。而这节课程我们讲解的是div+css,也就是在了解了这些标记之后如何运用这些标记制作出一套漂亮的模板。

div布局
   div标记主要用于网页的布局,网站的框架。如下图所示,红色的框架一般就采用的div层标记,而这些层的高度宽度由css控制:
1.gif


css样式
   层叠样式表是一种用来表现HTML或XM等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言。

使用方法
有三种方法可以在站点网页上使用样式表:
    外联式Linking(也叫外部样式):将网页链接到外部样式表。
    嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
    内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。

外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

  

   

          

  1. <link rel="stylesheet" type="text/css" href="css/moke8css.css" />

  2.    

  

  复制代码

内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

  

   

          

  1. <style>
  2. a{ color: #FF0000}
  3. a:hover{ color:#000000}</style>

  4.    

  

  复制代码

内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

  

   

          
  1. <div id="moke2" class="moke1" style="background-color:#0000FF;">moke框架内联样式</div>
       

  

  复制代码

"id" 和 "class"选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
实例

  

   

          
  1. #moke2{ background-color:#666666; width:200px; height:100px; color:#FFFFFF; text-align:center; font-size:18px;}
       

  

  复制代码

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示
实例

  

   

          
  1. .moke1{ background-color:#FF0000; width:200px; height:100px; color:#FFFFFF; text-align:center; font-size:18px;}
       

  

  复制代码

CSS 样式
background  背景
color 颜色
width 宽度
height 高度
text-align 文本对齐方式
font-size  字体大小
链接的四种状态:
    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻

框架图:
ct_boxmodel.gif


border  边框
padding 内边距
margin 外边距

float 浮动

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

ct_css_positioning_floating_right_example.gif


再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

ct_css_positioning_floating_left_example.gif


如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

ct_css_positioning_floating_left_example_2.gif


css继承
继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。下面举例说明:
式定义:

  

   

          
  1. body{ font-size:14px;}
       

  

  复制代码

应用举例代码:

  

   

          
  1. <div id="moke2" class="moke1" style="background-color:#0000FF;">moke框架内联样式</div>
       

  

  复制代码

这段代码的应用结果是:“moke框架内联样式<”这段话的字体大小是14px。

有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。多数边框类属性,比如象padding(补白),margin(边界),背景和边框的属性都是不能继承的。

优先级问题
既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

统计选择符中的id属性个数。
统计选择符中的class属性个数。
统计选择符中的html标记名格式。

样式定义:

  

   

          
  1. .moke1{ background-color:#FF0000; width:200px; height:100px; color:#FFFFFF; text-align:center; font-size:18px;}
  2. #moke2{ background-color:#666666; width:200px; height:100px; color:#FFFFFF; text-align:center; font-size:18px;}
       

  

  复制代码

应用举例代码:

  

   

          
  1. <div id="moke2" class="moke1">
  2. moke框架3 class和id
  3. </div>
       

  

  复制代码

因为div框架同时调用了id为moke2选择器,也调用了class为1的选择,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这框架调用了#moke2这个样式,所以框架背景色为黑色。这是因为两条规则的特殊性不一样,css规则必须这样进行处理。

   以上内容只是对div+css知识的一个简介,让大家初步了解div+css知识。当你了解了这些基础知识,那么不管是你以后学习制作模板还是想更深入的了解div+css都会有很大的帮助。如果大家想自己设计页面的话,那么你必须深入学习div+css知识。当然,如果只是简单的修改和仿站,那些这些基础知识已经足够了。想深入了解div+css知识的同学请观看《div+css视频教程》。这是一门操作性很强的知识课程,大家下来后一定要多看多学多操作。好了,今天的课程就讲到这里了,谢谢大家观看!
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价: 免费    【充值金币】 
下载权限: 白金VIP会员    【购买VIP】