学习html+css第五天的笔记

昨日回顾

属性设定形式： 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, :active5，通用选择器： * { 属性设定 }6，层级选择器：上级选择器下级选择器{ 属性设定 }7，分组选择器：选择器1，选择器2{ 属性设定 }8，其他（举例）：a)div#d1{…..} 匹配到id为d1的那个divb)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：hiddenii.父盒子里头最后位置添加一个空的清除浮动的div：<div style=”clear:both”></div>b)2，设置这些浮动盒子的宽度，通常不要超过总宽度3，每一个子级区域继续以“当前版面”去考虑问题，如此循环。4，通常，盒子的高度要注意：a)如果已知是固定高度，则可以设定height值b)如果高度是可变，则不能设定，应该使用其自动高度。

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