|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
本翻译并未失掉作者或网站受权。统统权力都回原作者及原网站一切。假如你失掉原作者或原宣布网站的受权,能够自在利用本翻译。
1.CSS字体属性简写划定规矩
一样平常用CSS设定字体属性是如许做的:
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也能够把它们全体写到一行上往:
font:bolditalicsmall-caps1em/1.5emverdana,sans-serif;
真不错!只要一点要提示的:这类简写办法只要在同时指定font-size和font-family属性时才起感化。并且,假如你没有设定font-weight,font-style,和font-varient,他们会利用缺省值,这点要记上。
2.同时利用两个类
一样平常只能给一个元素设定一个类(Class),但这其实不意味着不克不及用两个。现实上,你能够如许:
<pclass="textside">...</p>
同时给P元素两个类,两头用空格格开,如许一切text和side两个类的属性城市加到P元素下去。假如它们两个类中的属性有抵触的话,后设置的起感化,即在CSS文件中放在前面的类的属性起感化。
增补:关于一个ID,不克不及如许写<pid="textside">...</p>也不克不及如许写
3.CSSborder的缺省值
一般能够设定界限的色彩,宽度微风格,如:
border:3pxsolid#000
这位把界限显现成3像素宽,玄色,实线。但实践上这里只必要指定作风便可。
假如只指定了作风,其他属性就会利用缺省值。一样平常地,Border的宽度缺省是medium,一样平常即是3到4个像素;缺省的色彩是个中笔墨的色彩。假如这个值恰好符合的话,就不必设那末多了。
12345下一页
8.用CSS来处置垂直对齐
垂直对齐用表格能够很便利地完成,设定表格单位vertical-align:middle就能够了。但对CSS来讲这没用。假如你想设定一个导航条是2em高,而想让导航笔墨垂直居中的话,设定这个属性是没用的。
CSS办法是甚么呢?对了,把这些笔墨的行高设为2em:line-height:2em,这就能够了。
9.CSS在容器内定位
CSS的一个优点是能够把一个元素恣意定位,在一个容器内也能够。好比对这个容器:
#container{position:relative}
如许容器内一切的元素城市绝对定位,能够如许用:
<divid="container"><divid="navigation">...</div></div>
假如想定位到距左30点,距上5点,能够如许:
#navigation{position:absolute;left:30px;top:5px}
固然,你还能够如许:
margin:5px0030px
注重4个数字的按次是:上、右、下、左。固然,偶然候定位的办法而不是边距的办法更好些。
10.纵贯到屏幕底部的背景致
在垂直偏向是举行把持是CSS所不克不及的。假如你想让导航栏和内容栏一样纵贯到页面底部,用表格是很便利的,但假如只用如许的CSS:
#navigation{background:blue;width:150px}
较短的导航条是不会纵贯究竟部的,半路内容停止时它就停止了。该怎样办呢?
不幸的是,只能接纳棍骗的手腕了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的色彩和设定的背景致一样。
body{background:url(blue-image.gif)00repeat-y}
此时不克不及用em做单元,由于那样的话,一旦读者改动了字体巨细,这个把戏就会露馅,只能利用px。
上一页12345下一页
1.Block和inline元素对照
一切的HTML元素都属于block和inline之一。
block元素的特性是:
老是在新行上入手下手;
高度,行高和顶和底边距都可把持;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。
相反地,inline元素的特性是:
和其他元素都在一行上;
高,行高及顶和底边距不成改动;
宽度就是它的笔墨或图片的宽度,不成改动。
<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子。
用display:inline或display:block命令就能够改动一个元素的这一特征。甚么时分必要改动这一属性呢?
让一个inline元素重新行入手下手;
让块元素和其他元素坚持在一行上;
把持inline元素的宽度(对导航条出格有效);
把持inline元素的高度;
不必设定宽度便可为一个块元素设定与笔墨同宽的背景致。
2.再来一个box黑客办法
之以是有这么多box黑客办法,是由于IE在6之前对box的了解跟他人都纷歧样,它的宽度要包括边线宽和空缺。要想让IE5同等其他扫瞄器坚持分歧,能够用CSS的办法:
padding:2em;
border:1emsolidgreen;
width:20em;
width/**/:/**/14em;
第一个宽度一切扫瞄器都认得,但IE5.x不认得第2行的宽度设置,只由于那一行上有空缺的正文标记(何等蠢的语法剖析!),以是IE5.x就用20减失落一些空缺,而其他扫瞄器会用14这个宽度,由于它是第2行,会掩盖失落第1行。
3.页面的最小宽度
min-width是个十分便利的CSS命令,它能够指定元素最小也不克不及小于某个宽度,如许就可以包管排版一向准确。但IE不认得这个,而它实践上把width当作最小宽度来使。为了让这一命令在IE上也能用,能够把一个<div>放到<body>标签下,然后为div指定一个类:
<body>
<divclass="container“>
然后CSS如许计划:
#container
{
min-width:600px;
width:expression(document.body.clientWidth<600?"600px":"auto");
}
第一个min-width是一般的;但第2行的width利用了Javascript,这只要IE才认得,这也会让你的HTML文档不太正轨。它实践上经由过程Javascript的判别来完成最小宽度。
一样的举措也能够为IE完成最年夜宽度:
#container
{
min-width:600px;
max-width:1200px;
width:expression(document.body.clientWidth<600?"600px":document.body.clientWidth>1200?”1200px“:”auto";
}
上一页12345下一页
4.IE与宽度和高度的成绩
IE不认得min-这个界说,但实践上它把一般的width和height看成有min的情形来使。如许成绩就年夜了,假如只用宽度和高度,一般的扫瞄器里这两个值就不会变,假如只用min-width和min-height的话,IE上面基本即是没有设置宽度和高度。
好比要设置背景图片,这个宽度是对照主要的。要办理这个成绩,能够如许:
.box
{
width:80px;
height:35px;
}
html>body.box
{
width:auto;
height:auto;
min-width:80px;
min-height:35px;
}
一切的扫瞄器都可使用第一个box设置,但IE不认得第2段设置,由于个中用到了子选择器命令。第2个设置更特别些,以是它会掩盖失落第1个设置。
5.字体变形命令
text-transform命令很有效,它有3个值:text-tran
12下一页
你可以轻松地控制页面的布局。 |
|