`
songzhan
  • 浏览: 238821 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

css

    博客分类:
  • css
css 
阅读更多

该CSS属性用来设定列表样式标记的位置。

值:inside | outside | inherit

可用值 值的说明

outside

缺省值。标记在文本外。以列表项文本内容为准对齐。 inside 图片的 url 。标记在文本内。以列表项标记为准对齐。

 

示例代码.u1 {list-style-position:outside}.u2 {list-style-position:inside}继承

适用于

任何符合 display: list-item 的元素。

 

盒子模型

CSS中,一个独立盒子模型由content(内容),border(边框),padding(内边距),margin(外边距)组成.

一个盒子实际所占用的宽度(或高度)是由"内容+内边距+边框+外边距"组成的.在CSS中可以通过设定width和height的值来控制内容所占的矩 形的大小.事实上所有的网页元素本质上都是以盒子的形式存在的.在人的眼中,一个网页上有各种内容,包括文本,图像等,而在浏览器看来,就是许多盒子排列 在一起或者相互嵌套.

边框(border)

border的属性主要有3个,分别式color(颜色),width(粗细),style(样式).

border-color指定border的颜色.

border-width指定border的粗细,可以设置为thin,medium,thick和<length>,其 中<length>表示具体的数值,例如5px和0.1in等.width的默认值为"medium",一般浏览器将其解析为2px宽

border-style 指定border的样式,可以设为none,hidden,dotted,dashed,solid,等,其中none和hidden都不显示border,二者效果完全相同,只是运用在表格中时,hidden可以解决边框冲突.

内边距(padding)

用于控制内容与边框之间的距离.当盒子设置了背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范围,并以padding的左上角为基准点平铺背景图像.

外边距(margin)

指的是元素与元素之间的距离,可以看到边框在默认情况下会定位于浏览器窗口的左上角,但是没有紧贴着浏览器窗口的边框,这是因为body本身也是一个盒子.body这个盒子的宽度不是由其内部的内容决定的,而是由浏览器窗口决定的.

div{

width:150px;

height:150px;

border:10px black solid;

background:blue;

padding-left:10px;

margin-top:10px;

}

宽为150px,高为150px,四个黑色的实心边框,背景为蓝色.内容距离左边框为10px.,盒子距离body上边框为10px.

 

DOM是documen object model的缩写,即"文档对象模型".一个网页的所有元素组织在一起,就构成了一棵"DOM树".

块级元素(block level)

它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满.

<div>(division)就是一个区块容器标记,相当于一个容器.声明时只需要对<div>进行相应的控制,其中的各标记 元素都会随之改变,ul也是块级元素,不同在于ul是一个具有特殊含义的块级元素,具有一定逻辑语义,而div是一个通用的块级元素,用它可以容纳各种元 素,方便排版.

行内元素(inline)

对于文字这类元素,各个字母之间横向排列,到最右端自动折行.

<span>与<div>标记作为容器标记而被广泛应用在HTML语言中,区别在于<div>是块级元素.它包含的 元素会自动换行.<span>是行内元素,在它的前后不会换行,<span>没有结构上的意义,纯粹是应用样式,当其它行内元素 都不合适时,就可以使用<span>元素.

 

span{width:30px; hight:30px;background:blue;}

span.left{margin-left:20px;background:red;}

span.right{margin-right :30px;background:yellow;}

<span>蓝色<span class="right">黄色</span><span class="left">红色</span>蓝色<\span>

中间相隔50px. 如果不是行内元素,而是竖直排列的块级元素,情况会有所不同,两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者.这种现象称为margin的"塌陷"现象,意思是说较小的margin塌陷到了较大的margin中.

div{width:50px;hight:30px;border:1px black solid;}

<div style="margin-bottom:10px;">块元素1</div>

<div style="margin-top:5px;">块元素2</div>

盒子1与盒子2的上下距离为10px

嵌套盒子之间的margin

当一个<div>块包含另一个<div>块中时,便形成了典型的父子关系,其中子块的margin将以父块的content为参考.

div.father{width:50px;hight:30px;border:1px black solid;}

div.son{width:20px;hight:20px;border:1px blue solid; margin-top:2px;margin-left:3px}

<div class="father"><div class="son"></div></div>

子盒子距离父盒子上边框为2px,左边框为3px.倘若子元素的margin的值超过了父元素的高度,IE浏览器会将父元素的heigh自动扩大,而firefox则不会.

将margin设置为负数

span.left{margin-left:20px;background:red;}

span.right{margin-right :-25px;background:yellow;}

<span class="right">黄色</span><span class="left">红色</span>

右边的块会移动到左边的块上方,形成重叠的位置关系.

当块之间式父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中分离出来.

div{width:50px;height:50px;border:1px black solid;margin-left:50px;}

div.son{width:20px;height:20px;border:1px black solid;margin-left:-10px;}

<div><div class="son"></div></div>

子div飘出父div的左边框10px距离.标准文档流简称为"标准流",所谓标准流,就是指在不使用其它的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.

 

盒子的浮动

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界.而在竖直方向和兄弟元素依次排列,不能并排.CSS中有一个float属性,默 认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒 子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定.

body{margin:15px;font-family:Arial;font-size:12px;}

.father{background:#ffff99;border:1px solid #111111;padding:5px;}

.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}

.father p{border:1px dashed #111111;background-color:#ff90ba;}

<body>

<div class="father"><div class="son1">BOX1</div>

<div class="son2">BOX2</div>

<div class="son3">BOX3</div>

<div class="clera"></div>

<p>文字</p></div></body>

如果.son1{float:left;}

标准流中的BOX2文字在围绕着BOX1排列,而此时BOX1的宽度不再伸展,而只能容纳下内容最小宽度..此时BOX1已经脱离标准流,标准流中的BOX2会顶到原来BOX1的位置,而文字会围绕BOX1排列.

如果.son1{float:left;} .son2{float:left;} .son3{float:right;}

文字的左右两侧同时围绕着浮动的盒子.

clear属性清除浮动的影响.left清除左边,right清除右边both同时清除左右两边影响.

一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关.如果要使父div的范围包含浮动盒子.必须添加以下代码.

.father .clear{margin:0;padding:0;border:0;clear:both;}

父div内添加<div class="clear"></div>

这个div因为没有浮动,所以为标准流,加之清除左右影响,此时父div就以此div进行排版.

盒子的定位

在CSS中有一个非常重要的属性position 有四个属性值.

static(静态定位)

static为默认值,也就是该盒子按照标准流(包括浮动方式)进行布局.

relative(相对定位)

使用相当定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对与它在原本的标准位置偏移指定的距离,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它

body{margin:20px;font-family:"宋体";font-size:12px;}

#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}

#father div{background-color:#ff0ac;border:1px dashed #000000;padding:10px;}

#block1{position:relative;bottom:30px;right:30px;}

#block2{position:relative;top:30px;left:30px;}

<div id="father"><div id="block1"></div><div id="block2"></div></div>

使用相对定位的盒子,会相对于它在原本的位置,通过偏移指定的距离,到达新的位置.

使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响.它旁边的盒子仍然以为它还在原来的位置.

 

absolute(绝对定位)

盒子的位置以它的包含框为基准进行偏移.绝对定位的盒子从标准流中脱离.这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样.

body{margin:20px;font-family:"宋体";font-size:12px;}

#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}

#father div{background-color:#ff0ac;border:1px dashed #000000;padding:10px;}

#block1{position:absolute;top:0px;right:0px;}

<body><div id="father"><div id="block1"></div></div>

绝对定位的盒子以它的最近的一个"已经定位"的"祖先元素"为基准进行偏移.如果没有已经定位的祖先元素,那么浏览器窗口为基准进行定位.

在#father中加入position:relative 祖先#father div已经设置position属性.并且符合最近要求.

补充IE6中有一个错误.以上使用右边框定位,如果换成用左边框来定位,错误的位置和正确的位置相差了父div的padding的宽度.这是IE6中的固有错误,解决方法就是给父div(定位的基准盒子)增加一条CSS样式. height:1%;

 

body{margin:0px;} #outerBox{width:200px;height:100px;margin:10px auto;background:scroll;}

#innerBox{position:absolute;top:70px;width:100px;height:50px;background:orange;}

<div id="outerBox"><div id="innerBox"></div></div>

外面的盒子没有设置position属性,内部的盒子设置了绝对定位,但是只在竖直方向指定了偏移量,没有指定水平方向的偏移量.那么水平方向它仍然会保持原来应该在的位置.这个性质可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况.

fixed(固定定位)

它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变.IE6不支持固定定位

z-index空间位置

用于调整定位时重叠块的上下位置,与它的名称一样,想象页面为x-y轴,垂直于页面的方向为z轴,z-index值大的页面位于其值小的上方.z- index属性的值为整数,可以是正数也可以是负数.当块被设置了position属性时,该值便可设置各块之间的重叠高低关系.默认的z-index值 为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系.

盒子的display属性

<div style="display:inline">box1</div><div style="display:inline">box2</div>块级变行内

<span style="display:block">box3</div><span style="display:block">box</div>行内变块级

<div style="display:none">box</div><span style="display:none">box</span>元素隐藏消失

 

设置字体 通过font-family属性来控制. font-family:Arial,"Times New Roman";

同时声明两个字体名称,其意告诉浏览器首先在访问者的计算机中寻找Arial字体.如果该访问者的计算机中没有Arial字体,就寻找Times New Roman.如果这两种字体都没有,则使用浏览器的默认字体.

同时声明多种字体,字体之间用逗号分隔开.另外,一些字体的名称中间会出现空格,例如上面的Times New Roman,这时需要用双引号将其引起来,使浏览器知道这是一种字体.

字体大小 通过font-size属性来设置. font-size:12px;

代码中的px是一个长度单位,表示在浏览器上1个像素的大小.因为不同访问者的显示器的分辨率不同,而且每个像素的实际大小也不同,所以px称为相对单位,也就是相对于1个像素的比例. 以下5种单位称为绝对长度单位,它们不会随显示器的变化而变化.

in(英寸),cm(厘米),mm(毫米),pt(印刷的点数,一般显示器中1pt相对于1/72inch),pc(1pc=12pt)

此为还有两个比较特殊的长度单位:em和ex.它们与px类似,也是相对长度单位.1em表示的长度式其父元素中字母m的标准宽度,1ex则表示字母x的标准高度.当父元素的字体大小变化时.使用这两个单位的子元素的大小会同比例变化.font-size:3em;

font-size:200%; 表示文字的大小为原来的两倍.

 

设置行高 line-height的值表示两行文字之间基线的距离.也就是每行文字的高度.如果给文字加上下划线,下划线的位置就是文字的基线.

line-height:18px; 行高为18px line-height:1.5; 行高为字体大小的比值.

字体 大小 行高,组合在一条CSS规则中 font:12px/18px Arial; 注意:字体与行高用斜线隔开

设置颜色 颜色统一采用RGB格式,也就是"红绿蓝"三原色模式.比如"#FFFFFF" 就是十六进制的表示方法,前两位为红色分量,中间两位是绿色分量,最后两位为蓝色分量.color:#FFFFFF;

字体加粗 font-weight:normal; 正常 font-weight:bold; 加粗

文字装饰 text-decorations属性实现.underline(下划线),overline(顶划线),line-through(删除线)

对齐 text-align 属性实现 justify(两端对齐),

段首缩进 text-indent属性设置 直接将缩进距离作为数据即可.对于中文网页.设置2em 即可

如果要使方框中的文字竖直方向居中对齐,就要使用CSS用于竖直对齐的属性vertical-align

在目前浏览器中,只能用于表格单元格中的对象竖直方向对齐,而对于一般块级元素,无效.

 

CSS图像样式

作为单独的图片,虽然它本身的很多属性都可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确地调整图片的各种属性,还可以实现很多特殊的效果.例如:

img{border:1px gray dashed; margin:10px 10px 10px 0px;padding:5px;float:left;}

在CSS中可以设置图像的高度和宽度,同样是使用盒子模型中统一的height和width属性,

设置时可以使用具体长度如100px,也可以使用相对比例如70%

设置背景图片 background-image:url(bg.gif); 在默认情况下,图像会自动向水平和竖直两个方向平铺.如果不希望平铺,或者只希望沿着一个方向平铺,可以使用background-repeat属性控制

repeat 沿水平和竖直两个方向平铺(默认值) no-repeat 不平铺,即只显示一次

repeat-x 只沿水平方向平铺 repeat-y 只沿竖直方向平铺

如:background-repeat:repeat-x; 背景图片只沿着水平方向平铺.

同时设置背景图像和背景颜色 这样背景图像覆盖的地方就显示背景图像,没有覆盖的地方就按照设置的背景颜色显示

背景样式属性的简写 background: #FFFFFF url(bg.gif) repeat-x;

 

标题的图像替换

由于文字的显示字体依赖于访问者的计算机系统情况,因此在使用字体的时候要特别谨慎,防止使用大多数浏览器没有的字体.为了美观的要求,需要使用图像来代 替文本,然而从另外的角度考虑,为了便于搜索引擎理解和收录网站,也为了以后维护的考虑,把图像直接以<img>标记的方式嵌入到网页中也不 是一个好办法.因此,一些CSS设计师发明了"图像替换"的方法来解决这个问题.其核心思想是使HTML中的文字仍以文本形式存在,便于维护页面的内容和 结构完整性,然后通过CSS使文字不显示在页面上,而使图片以背景图像的形式出现,这样访问者看到的就是美观的图像了.

有种方法就是在标题标记内部,加入一对空的<span></span>标记

这对标记没有实际的语义作用,仅作为一个CSS"钩子",用于设置背景图像.

<h1><span>文字</span></h1>

样式设置如下:

h1{background:url(bg.gif) no-repeat; height:60px;}

h1 span{display:none;}

但是由于这种方法是通过display属性把文字隐藏起来,会导致"非屏幕浏览器"包括为盲人设计的阅读器无法正确的读取网页文字.

为了避免这种情况的出现,还可以通过对span元素使用绝对定位,将图像覆盖在文字的上面,这样即使关闭了CSS仍然可以看到文本标题,这个方法的缺陷式,标题图像不能使用透明的图像,否则会露出文字.

 

图像投影效果

滑动门技术

.shadow{float:left;background:url(bottom-right.gif) no-repeat bottom right;}

.shadow div{background:url(top-left.gif) no-repeat; padding:0 6px 6px 0;}

.shadow img{border:1px solid #000; padding:4px;}

<div class="shadow"><div><img src="image.gif"/></div></div>

 

 

GIF格式阴影图像的效果比较差,而如果使用Alpha透明的PNG格式阴影图像,无论页面什么背景颜色,都可以很好的显示阴影效果.

IE6并不支持PNG格式的Alpha透明,直到IE7才支持.如果要在IE6中也显示柔边的阴影效果,就需要用到IE专用的一套CSS滤镜了,这些滤镜都不是CSS规范中定义的,只是IE6自己扩展的,因此一般情况下,做网页都不使用它们.

条件注释 <!- -[if gte ie 6]> <![endif]- -> 起作用是当浏览器是IE,并且在IE6以上,就会有效.

 

超链接特效

在HTML语言中,超链接是标记<a>来实现的,链接地址则是利用<a>标记的href属性实现.

a:link 超链接的普通样式,即正常浏览状态的样式

a:visited 被点击过的超链接的样式

a:hover 鼠标指针经过超链接上时的样式

a:active 在超链接上单击时,即"当前激活"时,

对于这4个伪类别,要注意它们的声明顺序.例如,为了使平常状态超链接取消下划线,而在鼠标指针经过时出现下划线,可以如下设置:

a:link, a:visited {text-decoration:none;}

a:hover, a:active {text-decoration:underline;}

但是如果交换上面两行代码的顺序,对鼠标指针经过时的设置将不会产生效果.这里是由于前面讲过的"层叠"的原有,上面的CSS规则具有相同的特殊性,因此后面的规则将覆盖前面的规则,要按照上面的顺序来进行设置.

a:link与a 设置的都是链接在没有鼠标经过时的效果.区别在于:一个a标记没有设置跳转地址(即href属性)时,如果设置a:link则无效,而设置a则仍然有效.在实际工作中,经常使用:

a, a:visited {text-decoration:none;}

当前激活状态a:active 一般被显示的情况非常少,因此很少使用.因为当浏览者单击一个超链接后,焦点很容易就会从这个链接上转移到其它地方,例如新打开的窗口等,此时该超链接就不再是"当前激活"状态了.因此,通常无需设置a:active的样式.

CSS控制鼠标指针

cursor属性可以在任何标记里使用,从而可以改变各种页面元素的鼠标指针效果. 如:

cursor:pointer; pointer通常显示为手的形状, 鼠标指针经过超链接时的形状.

 

项目列表

传统的HTML语言提供了项目列表的基本功能,包括顺序式列表的<ol>标记和无顺序列表的<ul>标记等.当引入CSS后,项目列表被赋予了很多新的属性,甚至超越它最初设计时的功能.

ul{list-style-type:decimal;} li.special{list-style-type:circle}

<ul><li>奥迪</li><li class="special">宝马</li><li>奔驰</li></ul>

disc实心圆 circle空心圆 square正方形decimal数字upper-alpha大写字母lower-alpha小写

list-style-image:url(image.jpg); 项目符号显示为任意图片

list-style-type:none; 不显示项目符号

特别说明的是display:block;语句,通过该语句,超链接被设置成了块元素.当鼠标指针进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活.但是在IE6中,虽然把链接设置成了块级元素,但是仍然只有在鼠标指针经过文字时,才能触发鼠标经过效果.解决办法:

a{height:1em;} 这样可强制浏览器重新计算响应鼠标指针的范围,从而得到正确的结果.

 

控制表格

<table>用于定义整个表格,<tr>定义一行,<td>定义一个单元格.<caption>定义表格大标题.

<th>,它是table header 的缩写,即表头的意思.在表格中主要用于行或者列的名称.实际上<th>和<td>是很相似的,主要是可以分别对它们进行设置样式.

分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    CSS那些事儿.pdf

    本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理。放弃到处可见的基础知识、网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者使用CSS布局的思维方式,通过本书的阅读读者将会...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    svg转css,css转svg,svg与css互相转换并压缩

    svg转css,css转svg,svg与css互相转换并压缩

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    js+css时钟效果 js+css时钟效果

    js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...

    CSS网站布局与美化,css

    CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...

    精通CSS(css mastery)中文版 part1

    由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...

    CSS和CSS3思维导图(xmind版)

    什么是CSS? CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    CSS3特效-CSS3实现烟花特效

    CSS3实现烟花特效-图片+css

    CSS

    CSS

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    包含:CSS权威指南、css彻底设计研究、HTML5和CSS3实战、HTML5与CSS3设计模式

    HTML+CSS 完成登录页面UI.zip

    HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录...

Global site tag (gtag.js) - Google Analytics