昨日回顾
属性设定形式: 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的过程” 博客,转载请与作者联系!