学习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, :active

5,通用选择器: * { 属性设定 }

6,层级选择器:上级选择器下级选择器{ 属性设定 }

7,分组选择器:选择器1,选择器2{ 属性设定 }

8,其他(举例):

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

b)div.c1{….}          匹配到classc1的那个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:

盒子基本属性:

从内到外:  widthheight padding(内边距//补白),  border(边框),  margin(外边距//边界)

浮动初步:

        floatleft//right:设定某个盒子在其父盒子中往某个方向浮动起来

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


列表样式属性:

设定列表标签的前导符的符号:circlesquare, 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,

行内盒子:不能设定宽高,及不能设定上下的marginpaddingborder

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

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

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

                  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 这样,我们就应该对这些(几乎所有)标签进行全部的“自定义设定”——即他们的所有表现(文字大小,paddingmargin,缩进,。。。。。)均进行人为的控制。


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



网页设计布局

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

1,要么上下瓜分:直接使用若干个div(或其他块盒子)就可以达到目的

2,要么左右瓜分:使用若干个盒子(通常是块盒子),并进行浮动,就可以实现,但注意:

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

i.父盒子身上使用:overflowhidden

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

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

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

4,通常,盒子的高度要注意:

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

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


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

学习html+css第五天的笔记学习html+css第五天的笔记学习html+css第五天的笔记




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

学习html+css第五天的笔记,布布扣,bubuko.com

学习html+css第五天的笔记

上一篇:学习html+css第四天笔记


下一篇:Mybatis SQL映射文件详解