Css的使用细谈

Css的使用细谈

Css可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

Css简介

      

      (1) CSS是用于布局(layout)与美化网页的. (颜色,字体)

      (2) CSS是Cascading Style Sheets的英文缩写,即层叠样式表

      (3) CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 

      (4) CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀. 

      (5) CSS是大小写不敏感的,CSS与css是一样的. 

      (6) CSS是由W3C的CSS工作组产生和维护的。

     为什么需要层叠样式表（css）

    

       样式表能实现内容与样式的分离，方便团队开发，如图：

      

         看一下两个网页，外观不同但是样式相同：

        

CSS组成

    (1) 语法：

            CSS定义分别由：选择符、属性、属性取值组成，
            格式：selector{property:value}     

          (2) 单位：      

             相对长度单位：

     px 像素（Pixel）。 div{font-size:12px;} 

     em 相对于当前对象内文本的字体尺寸。 

     div{font-size:1.2em;}

     % 百分比  div{font-size:80%;} 

             绝对长度单位：

      pt 点（Point）。

      cm 厘米（Centimeter）。

      mm 毫米（Millimeter）。

      (3) 注释

     注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。

      CSS注释格式如下：/*  css注释  */   

       (4) 颜色单位   

       #rrggbb (如： #ffcc00)

       #rgb（如：#fc0）

       rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)

       rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0)

在HTML放置CSS方式

   我们用以下的三种方式打出在网页中显示的图片

      (1) 内联式

    用内联是打上图这几个字，是40px，蓝色字体为：

（2）内嵌式

用内嵌式打上图的几个字，40px，蓝色字体：

……

……

    （3）外部链接式

    在HTML文档中是为

    在CSS文档中是为

DIV+CSS对页面的布局

     一 . W3C盒子模型

      为了帮助理解必须了解盒子模型，每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。如下

     

二  . 浮动设置

          虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流(原始文档流)中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。浮动设置如图：

三 . 行框与清理

在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 示例图如下

四 . 浮框基本样式

单浮框

双浮框

多浮框

综合练习实例

做一个简单的css布局的综合实例

HTML文本中的代码为

在css中的代码为

这篇随笔就到这里，下个星期会继续写。如果掌握了HTML与CSS，网上的那些网页版面基本上都可以做出来了。

谢谢阅读。