昨日回顾

文字样式:

文字颜色:color

文字大小:font-size:

文字粗细:font-weight:

文字斜体:font-style:

文字字体:font-family:

文字修饰:text-decoration

行高:line-height:

首行缩进:text-indent:

字符间距:letter-spacing:

单词间距:word-spacing:

文字垂直对齐:vertical-align:

盒子模型初步:

观念:几乎所有标签都可以看过是一个盒子——具有如下特性的矩形区域

margin:外边距(边界)

border:边框

padding:内边距(补白)

内容部分:可以设置width,height

两种盒子:

块盒子:可以设置盒子的任何方面的特性(属性),基本表现(特征)是“独占一行”

行内盒子:除了上下margin,上下padding,宽高之外,其他也可以设置。基本表现是“行内显示直到末尾再自动换行”——类似文字的表现——行内盒子的内容一般就是文字或图片(实际上图片本身就是行内盒子)。

布局初步:

将网页以逐步细化的方式分割成横向或纵向的几个独立区域。对于纵向区块,则可以使用div盒子自然而成。对于横向区块,则需要使用浮动才能实现。但浮动或导致父盒子失去“正确的高度”(自然高度)——因此又要考虑父盒子高度的修正:

1, 设置固定高度,保证可以包住子盒子

2, 对父盒子设置overflow:hidden样式,可以获得“自然高度”。

3, 在父盒子内部添加一个清除浮动的空div: 

浮动作用与特性:

float:left,  float:right

作用:使一个块盒子可以跟其他块盒子“并列”放置。

特性:使其“浮”在别的标签之上,别的标签视它不存在而正常排列出来。

网页布局步骤细化

1、 在“当前版面”分出几个相对独立的区块(区块只分两种情况:纵向与横向);

2、 如果分出的是纵向区块,则每一个区块写出一个div就可以了(因为div本身就是自占一行的,则自然每个div就是一个纵向的区块了);

3、 如果分成的是横向区块,则:

a) 同样每个区块首先写出一个div,且每个div都进行浮动(通常是一左一右,或两左一右,或一边倒);

b) 设置各个div需要的宽度及相关区域(padding,border,margin),但总和不超过当前父盒子的宽度;

c) 有必要也设置各自高度,以及颜色背景或边框,以出现明显的视觉效果,这样有助于排错;

d) 使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子:

i. 在父盒子内部最后位置添加一个用于清除浮动的空div(

),

ii. 对父盒子使用overflow:hidden;

iii. 对父盒子设置一个固定的高度——适用于内部盒子高度固定的情况。

4、 在上述每个分出的区块中,又当做“当前版面”做同样的分析与设计(重复1-3步)

html样式清除(css初始化)

html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。

最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。

比如很多标签有初始的margin,或padding,或字的大小或粗细,斜体等等效果,则我们使用一些css设置将这些初始表现全部“清空”,比如:

*{

font-size:12px;

margin:0;

padding:0;

font-weight:normal;

font-style:normal;

list-style-type:none;

}

这样之后,所有的每个标签所需要的表现,都需要我们自己来使用css设置。

实际应用中,我们一般都是使用一个通用的css文件来完成此工作。

样式分类

1, 行内样式:

a) <标签名 其他标签属性…….  style=”css属性1:值1;css属性2:值2; ……  ” >内容部分

b) 只对当前标签有效:通常不推荐使用,或偶尔临时使用。

2, 页内样式:

a)

b) 只对当前网页有效:常见。

3, 外部样式:

a) css文件中:

    选择器1{ ….. }

    选择器2{ ….. }

    。。。。。。。。

b) 网页文件中:

c) 对所有引入该css的网页有效:常见。

样式分类

1, 行内样式:

a) <标签名 其他标签属性…….  style=”css属性1:值1;css属性2:值2; ……  ” >内容部分

b) 只对当前标签有效:通常不推荐使用,或偶尔临时使用。

2, 页内样式:

a)

b) 只对当前网页有效:常见。

3, 外部样式:

a) css文件中:

    选择器1{ ….. }

    选择器2{ ….. }

    。。。。。。。。

b) 网页文件中:

c) 对所有引入该css的网页有效:常见。

你可能感兴趣的:(昨日回顾)