CSS的网页设计简析

 CSS的网页设计简析

作为一个web 开发人员,都知道HTML 负责页面内容,CSS 负责页面样式,Javascript 负责页面行为.今天就来看看css 吧!

CSS(Cascading Style Sheet),中文意为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.

在了解CSS 的过程中,我们可以从以下的四个方面入手:

 

一.选择器:

在CSS 中,选择器是一种模式,用于选择需要添加样式的元素.要使用CSS 对HTML页面中的元素实现一对一,一对多或者多对一的控制,这是CSS 选择器就发挥了它特有的功能了.

CSS 选择器可以根据它的组成方式分为基本选择器和复合选择器

二.盒子模型

说道CSS 的时候,不得不说的就是盒子模型了.盒子模型是CSS 控制页面时一个很重要的概念,所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间,一般来说这些被占据的空间往往都要比单纯的内容大,换个说法,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小,一个页面的由很多这样的盒子组成,这些盒子之间会相互影响.

在看盒子模型之前,我们先来看看家里墙上挂着四幅画吧:

墙上整齐排列的图片,就是一个很典型的盒子模型,那么来看看CSS中的盒子模型的样子吧:

三.标准流

标准流也被称为标准文档流:在不使用其他的与排列和定位相关的特殊的CSS 规则时,各种元素排列的规则.

标准流分为两种:块级元素(block level )和行内元素(liline)

1.块级元素block level:

它们总是以一个块的形式表现出来,占据这一个矩形的区域,并且跟同级的兄弟依次竖直排列,左右撑满,因此得名块级元素.

2.行内元素(inline)

对于文字这类元素,各个字母之间横向排列,到最右端自动折行,这就是”行内元素”.

说到标准流的时候,不得不说一下的就是<div> 标记和</span>标记.

<div>(divsion)简单而言是一个区块容器标记,即<div>与</div> 之间相当于一个容器,可以容纳段落,标题,表格,图片,乃至章节,摘要和备注等各种HTML元素.可以把<div>与</div> 中的内容视为一个独立的对象,用于CSS 控制.声明时只需要对<div>进行相应的控制,其中的各标记元素都会随着改变.

 

<span>标记与<div>标记一样,作为容器标记而被广泛应用在HTML语言中.在<span>与</span>中间同样可以容纳各种HTML元素,从而形成独立的对象.如果把”<div>”替换成”<span>”,样式表中把”div” 替换成”span”,执行后就会发现效果完全一样.可以说<div> 与<span> 这两个标记起到的作用都是独立出各个区块,在这个意义上是没有区别的.

 

但是<div>与<span>还是有区别的,它们的区别在于,<div>是一个块级元素,它包围的元素会自动换行,而<span> 仅仅是一个行内元素.在它的前后不会换行.<span>没有结构上的易于,纯粹是应用样式,其他行内元素都不合适的时候,可以使用<span>元素.

 

四.浮动和定位

1.浮动(float)

浮动的框可以向左或向右移动,直到它的边缘碰到包含框或者另一个浮动框的边框位置.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.

在CSS 中,我们通过float 属性来实现:

 

浮动的时候,框就会脱离标准流,现在来看看右浮动:

当把框1向右浮动时,它脱离标准流并且向右移动,直到它的右边缘碰到包含框右边缘.

当框1向左浮动时,它脱离标准流并且向左移动,直到它的左边缘碰到包含框的边缘,因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图消失了.

如果把所有框都向左移动,那么框1向左浮动直到碰到包含框.另外两个框向左浮动直到碰到前一个浮动框.

 

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

 

说完浮动,那就不得不说说定位了,我们来看看定位家族:

2.定位

(1) 静态定位(Static)

这是默认的属性值,也就是该盒子按照标准流,同样也包括浮动方式进行布局.它表示保持在原本应该在的位置上,即该值没有任何移动的效果.

(2)相对定位(relative)

使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.

(3)绝对定位(absolute)

盒子的位置以它的包含框为基准进行偏移.绝对定位的盒子从标准流中脱离.这意味着它们对其后的兄弟盒子的定位没有影响.其他的盒子就好像这个盒子不存在一样.

(4) 固定定位(fixed)

固定定位和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变.

 

想要做一个高效率的web 开放工作者,就要学会使用CSS .

标签