学习css时需要掌握的9个小窍门.pdf

学习css时需要掌握的9个小窍门.pdf

ID:52311908

大小:72.56 KB

页数:2页

时间:2020-03-26

学习css时需要掌握的9个小窍门.pdf_第1页
学习css时需要掌握的9个小窍门.pdf_第2页
资源描述:

《学习css时需要掌握的9个小窍门.pdf》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、学习css时需要掌握的9个小窍门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,以

2、及font-varient时系统会自动使用缺省值。CSSborder的缺省值Border通常是用来设定边界的,例如颜色、宽度和风格等,一般情况下如果你只指定了边界的风格,那么其他两个属性系统会自动使用缺省值,宽度的默认缺省值为3到4个像素,而颜色的默认缺省值为其所包含文字的颜色。给元素同时使用两个类一般来说,一个元素设定一个类,但这也并不意味着不能使用两个,而这两个类中属性若其冲突的话后者其作用,但要记住是两个类(class),而不是id。采用CSS将文字替换成图像这时我们为了搜索引擎优化我们可以这样写:

Buywidgets

h1{background:(widget

3、-image.gif)no-repeat;height:imageheighttext-indent:-2000px}在书写的过程中留意把imageheight换成真的图像的高度。这里,图像会当作背景呈现出来,而真正的文本由于设定了-2000像素那个缩进,它们会呈目前屏幕左边2000点的地方,就看不见了。但这对于关闭图像的人来说,估计全部看不到了,这点要留意。box模型的另一种窍门此模型主要针对IE6之前的浏览器它们把边界宽度和空白都算在元素宽度上。比如:#box{width:100px;border:5px;padding:20px}这样调用它:

4、v>这时盒子的全宽应该是150点,这在除微软浏览器6之前的微软浏览器网页浏览器之外的所有网页浏览器上都是正确的。但在微软浏览器5这样的网页浏览器上,它的全宽仍是100点。能够用以前人发明的Box调整窍门来处理这种差异。但用CSS也能够达到同样的目的,让它们呈现效果一致。#box{width:150px}#boxdiv{border:5px;padding:20px}这样调用:

这样,不管什么网页浏览器,宽度都是150点了。CSS配置块元素水平居中对齐假如想做个固定宽度的webpage并且想让webpage水平居中的话,通常是

5、这样:#content{width:700px;margin:0auto}你会应用来围上所有元素。这很简单,但不够好,微软浏览器6之前版本会呈现不出这种效果。改CSS如下:body{text-align:center}#content{text-align:left;width:700px;margin:0auto}这会把webpage内容都居中,所以在Content中又加入了:text-align:left。用CSS来处理垂直对齐垂直对齐用表格能够很方便地呈现,设定表格单元vertical-align:middle就能够了。但对CSS来说这没用。假

6、如你想设定一个导航条是2em高,而想让导航文本垂直居中的话,设定那个属性是没用的。CSS窍门是什么呢?对了,把这一些文本的行高设为2em:line-height:2em,这就能够了。CSS在容器内的档次CSS的一个好处是能够把一个元素任意档次,在一个容器内也能够。比如对那个容器:#container{position:relative}这样容器内所有的元素都会相对档次,能够这样用:

假如想档次到距左30点,距上5点,能够这样:#navigation{position:absolute

7、;left:30px;top:5px}当然,你还能够这样:margin:5px0030px留意4个数字的顺序是:上、右、下、左。当然,有时候档次的窍门而否则边距的窍门更好些。更多的CSS布局与技能,请参考52CSS.com的大量教学课程。直通到屏幕底部的背景色在垂直方向是停止控制是CSS所不能的。假如你想让导航栏和内容栏一样直通到PAGE底部,用表格是很方便的,但假如只用这样的CSS:#navigation{background:blue;width:15

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签