昨日回顾

属性设定形式： css属性名：css属性值；

样式的分类：

1，内部样式：<style>…..</style>

2，外部样式：<link  …….  href=” css文件地址url” />

3，行内样式：<标签  style=”属性设定” ></标签

4，导入样式： @import  url(css文件地址url);

选择器的分类：

1，id选择器：  #id名字 { 属性设定 }

2，类选择器：  .类名{ 属性设定 }

3，标签选择器：标签名{ 属性设定 }

4，伪类选择器： :伪类名{ 属性设定 }

a)伪类只有固定的几个，通常在css2中，只关注a链接上的4个： :link, visited, :hover, :active

5，通用选择器： * { 属性设定 }

6，层级选择器：上级选择器下级选择器{ 属性设定 }

7，分组选择器：选择器1，选择器2{ 属性设定 }

8，其他（举例）：

a)div#d1{…..}   匹配到id为d1的那个div

b)div.c1{….}          匹配到class为c1的那个div.  注意：它跟 div .c1{…} 是完全不同的含义

文字性样式属性：

        color:red//#ff0000//rgb(125,22, 255)

        font-size:

        font-family:

        font-weight:bold//normai

        font-style:italic//normal

        text-decoration:underline//line-through//overline

        text-indent:px值，设定文字的首行缩进距离

        text-align:left//center//right：通常用于一个块盒子中的文字或行内盒子的左右对齐

        vertical-align:top//middle//bottom:  通常用于图片和其旁边的文字以及td中的内容的上下对齐

        letter-spacing:

        word-spacing:

盒子基本属性：

从内到外：  width和height， padding（内边距//补白），  border（边框），  margin（外边距//边界）

浮动初步：

        float：left//right：设定某个盒子在其父盒子中往某个方向浮动起来

        clear:left//right//both：设定某个盒子的某边（方向）不能有浮动元素（盒子）

列表样式属性：

设定列表标签的前导符的符号：circle，square, disc, 阿拉伯数字，大小写字母，大小写罗马数字，或者没有。

list-style-type: disc | circle | square |decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

设定列表标签的前导符为一个图片：

list-style-image: url(图片地址);

其实设定了本属性，list-style-type就失效了。

设定前导符的位置：

list-style-position: outside // inside

列表样式的综合属性：

所谓综合属性，就是指用一个属性名来设定多个属性项的值

        list-style:list-style-image || list-style-position || list-style-type

说明：即用list-style可以一次性设定列表前导图，列表前导符的位置，列表前导符。

举例： list-style: url(abc.jgp) outside  disc;

盒子背景：

背景是指一个盒子“背后”所展示的东西，其“前面”就是该盒子的内容（或者其本身）。

背景有两种：背景颜色（background-color）背景图(background-image);

背景颜色（background-color）: 颜色值

背景图(background-image)： url（图片地址url）；

背景图的重复性(background-repeat)： repeat // no-repeat // repeat-x // repeat-y

背景图的位置(background-position):  左右方向位置上下方向位置

左右方向位置： left(靠左)  center(居中)  right（靠右）   px值（离左边的距离）

上下方向位置： top(靠上)  middle(居中)  bottom（靠下）   px值（离上边的距离）

背景图的粘附性（background-attachment）:

背景的综合属性：

        background:背景色背景图背景图的重复性背景图的位置背景图的粘附性

通常，综合属性的值的设定没有顺序问题，而且，通常，综合属性里还可以只设定部分值。

盒子细化

margin属性细化：

        margin-top:px值；

        margin-right:px值；

        margin-bottom:px值；

        margin-left:px值；

        margin其实是一个“综合属性”，其可以有如下形式的值的设定：

                  margin:上边距值右边界值下边距值左边距值

                  margin:值1  值2   值3；——设定margin上下分别是值1和值3，左右的值是值2

                  margin:值1  值2；——设定margin上下分别是值1，左右的值是值2

                  margin:值1；——设定margin上下左右的值都是值1

margin的特殊使用：

1，margin可以使用负值，则其效果是可能会“侵入”到别的元素里面去。

2，margin: 0  auto;  可以使用一个块盒子在其父盒子中左右居中（其实起作用的是auto）

padding属性细化：同上!

border属性细化：

        border的“最终属性设定”的基本形式是：border-某方向-某设定项：某值；

某方向包括：top//right//bottom//left

某设定项包括： style（线型）//width(线宽)//color(颜色)

则可以看出，有12种任意组合的边框线的设定，比如：border-bottom-style:solid; border-top-color:red; border-right-width:3px;  

还有综合属性：

                  border-某方向: style（线型）  width(线宽)   color(颜色)

说明：设定某个方向上的线的3项属性值

                  border-某设定项：style（线型）//width(线宽)//color(颜色)

说明：设定（所有）边框线的某值特性：线型或线宽或线色

还有最终的综合属性：

                  border:style（线型）  width(线宽)   color(颜色)

说明：设定所有方向（4边）上的线的3项属性值

盒子的宽高：width， height：

盒子初始表现：

块盒子：可以设定宽高及所有盒子的属性设定。

常见块盒子：div, p, ul, ol, li,  dl, dt, dd,table, form,  hr,  pre,  blockquote, h1-h6,

行内盒子：不能设定宽高，及不能设定上下的margin和padding和border

常见行内盒子：span, b, i,  u,  a, img,  label, font, input, select,textarea,

说明：行内盒子的宽高是由其内部的内容“自然撑出来”的。其上下的margin和padding和border其实是设定了可见但不占空间。

其实，行内盒子和块盒子并没有绝对的界限，而是他们的一个属性的默认值所决定的：

                  display:block//inline//none;

含义：block设定该盒子为块盒子，inline设定为行内盒子，none设定为不可见。

                  <a  href=”#” style=”display:block;” >啊啊啊</a>      此时a就是块盒子

                  <div  style=”display:inline;” >啊啊啊</a>     此时该div就是行内盒子

html标签外观的初始化

1 实际上，在纯html中，即使是用相同的html，但在不同的浏览器中也多多少少会有些地方表现不一致（不同）。

2 这样，我们就应该对这些（几乎所有）标签进行全部的“自定义设定”——即他们的所有表现（文字大小，padding，margin，缩进，。。。。。）均进行人为的控制。

3 通常的做法是：先在页面中引入一个css文件，才文件中的代码可以将所有标签的初始格式“清除掉”，此文件通常可以成为“css初始化文件”

网页设计布局

布局无非就是将“当前版面（区块）”进行一定的划分，我们推荐使用最简洁好用的划分方法：

1，要么上下瓜分：直接使用若干个div（或其他块盒子）就可以达到目的

2，要么左右瓜分：使用若干个盒子（通常是块盒子），并进行浮动，就可以实现，但注意：

a)1，浮动之后其上级盒子高度“丢失”，需要进行补救：

i.父盒子身上使用：overflow：hidden

ii.父盒子里头最后位置添加一个空的清除浮动的div：<div style=”clear:both”></div>

b)2，设置这些浮动盒子的宽度，通常不要超过总宽度

3，每一个子级区域继续以“当前版面”去考虑问题，如此循环。

4，通常，盒子的高度要注意：

a)如果已知是固定高度，则可以设定height值

b)如果高度是可变，则不能设定，应该使用其自动高度。

呱呱网头部区域背景图的效果：

本文出自 “记录学习web的过程” 博客，转载请与作者联系！

学习html+css第五天的笔记,古老的榕树,5-wow.com