莫相离 发表于 2015-1-16 00:16:53

给大家带来14个罕见的CSS技能及罕见成绩

最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
1、善用css缩写能够削减页面文件巨细,进步下载速率,同时使代码简便可读。
如:

div{
border-top:1pxsolid#cccccc;
border-left:1pxsolid#cccccc;
border-right:1pxsoli#cccccc;
border-bottom:1pxsolid#cccccc;
}
能够写为

p{border:1pxsolid#cccccc}
再如:

div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
能够改写为:

/*注重上、右、下、左的誊写按次*/
div{margin:10px20px30px40px}
/*注重,数值与单元不克不及有空格,每一个值之间用空格离隔*/
(具体请参考:css2参考手册、经常使用css缩写总结)

2、能够同时为一个html元素的class属性设定多个划定规矩(多重class界说)。
一般我们写法为:<pclass=”a”></p>
实践上我们能够为p元素指定多个划定规矩,如:

CSS:
.a{…}
.b{….}
HTML:
<pclass="ab">该元素同时包含a和b中设定的款式</p>
注重:多个划定规矩之间用空格分隔。

3、明白界说单元,除非值为0
健忘界说尺寸是css初学者老手广泛存在的成绩。在html我们能够写width=”100”,但在css中应当给出一个正确的单元。如:width:100px;height:50px;font-size:9pt,0值除外,由于不管关于任何单元。0值的巨细都是相称的。

注重:不要在数值和单元之间加空格。

4、辨别巨细写
在xhtml中,css界说的元素称号是辨别巨细写的,class和id的值在html和xhtml中也是辨别巨细写的,以是为了不毛病,保举一概利用小写。
如#aaa,与#AAA是分歧的,在xhtml中,p和P也是分歧的.他们之间不会掩盖。
假如在css中界说了#aaa,在html元素中利用AAA来使用将不克不及失掉#aaa中界说的款式。
示例代码:

CSS:
#aaa{border:1pxsolid#ccc}
HTML:
<divid="AAA">显现不出来1个像素的边线</div>
5、CSS的比来优先准绳
假如对一个元素界说了屡次款式,则以比来的一级优先,比来一级的款式将掩盖其他的款式界说。
如:

CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此处显现为白色</p>
<pclass="blue">此处显现为蓝色</p>
<pclass="blue"style="color:green">此处显现为绿色</p>
<pclass="blueyellow">此处显现为黄色</p>
注重:
(1)注重款式的几个优先按次(优先级由上至下递加):
--元素style设定
--head区<style></style>中的设定
--内部援用css文件
(2)优先级不是按会见按次来设定的,而是又css中的声明按次来设定的。
如上例中<pclass="yellowblue">此处显现为黄色</p>也显现为黄色,由于在css界说中.yellow在.blue的前面。

6、利用子选择器削减id和class的界说
比方:

#contain{..}
#contain_ul{...}
.contail_li{...}
<divid="contain">
<ulid="contain_ul">
<liclass="contain_li"></li>
<liclass="contain_li"></li>
</ul>
</div>
能够变动为:

#contain{..}
#containul{...}
.containulli{...}
<divid="contain">
<ul>
<li></li>
<li></li>
</ul>
</div>
7、不要给背景图片路径加引号
将background:url("xxx.gif")改成background:url(xxx.gif)
由于关于部分扫瞄器加引号反而会引发毛病。

8、背景图片的路径是绝对与以后css页面的路径。

比方:
有以下目次布局
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
代码内容
index.html援用xx.css文件。<linkrel="stylesheet"href="css/xx.css"/>
xx.css要援用xxx.gif图片其写法为:background:url(../images/xxx.gif)

9、利用组选择器为分歧元素使用不异的款式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的款式都为字体16像素,字体粗体

10、誊写准确的链接款式
当用css界说链接的各类形态时,必定要注重其誊写按次,即::link:visited:hover:active。
假如不依照该按次誊写大概没法到达本人但愿的效果。为了影象该按次我们抽取每一个单词的首字母:LVHA,你能够经由过程影象LoVe,Hate,两个单词来记着其按次。

11、克制内容换行与强迫内容换行
在表格或层中我们大概但愿内容不换行或强迫换行,我们能够经由过程一些css属性来到达这些请求。
克制换行:white-space:nowrap
强迫换行:word-wrap:break-word;word-break:normal;

12、区分relative和absolute
Absolute,CSS中的写法是:position:absolute;他的意义是相对定位,他是参照扫瞄器的左上角,共同TOP、RIGHT、BOTTOM、LEFT(上面简称TRBL)举行定位,在没有设定TRBL,默许根据父级的做标原始点为原始点。假如设定TRBL而且父级没有设定position属性,那末以后的absolute则以扫瞄器左上角为原始点举行定位,地位将由TRBL决意。

Relative,CSS中的写法是:position:relative;他的意义是相对绝对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,共同TRBL举行定位,当父级内有padding等CSS属性时,以后级的原始点则参照父级内容区的原始点举行定位。

13、区分div和span
div是一个块级元素,能够包括段落,表格等外容,用于安排分歧的内容。一样平常我们在网页经由过程div来结构定位网页中的每一个区块。
span是一个内联元素,没有实践意义,它的存在地道是为了使用款式,给一段内容加上<span></span>标志能够经由过程在span上界说款式来设定其内容的款式。

14、区分display和visibility
display:none和visibility:hidden都能够埋没一个元素
但visibility:hidden只是埋没了元素的内容,但其利用的地位空间仍旧被保存。
而display:none则相称把元素从页面中往除,其占用地位也将被删除。
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。

若天明 发表于 2015-1-18 05:52:38

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

透明 发表于 2015-1-24 15:22:59

滚动条)层属性--溢出(visible/hidden/scroll/auto)

活着的死人 发表于 2015-2-7 17:36:58

是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。

不帅 发表于 2015-2-22 21:36:18

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

只想知道 发表于 2015-3-7 04:10:18

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

分手快乐 发表于 2015-3-14 12:13:49

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

小女巫 发表于 2015-3-21 08:38:56

滚动条)层属性--溢出(visible/hidden/scroll/auto)
页: [1]
查看完整版本: 给大家带来14个罕见的CSS技能及罕见成绩