仓酷云

标题: 带来一篇CSS典范技能20条总结 [打印本页]

作者: 简单生活 时间: 2015-1-16 00:07
标题: 带来一篇CSS典范技能20条总结
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
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文件中放在前面的类的属性起感化。
3、CSSborder的缺省值一般能够设定界限的色彩，宽度微风格，如：border:3pxsolid#000这位把界限显现成3像素宽，玄色，实线。但实践上这里只必要指定作风便可。假如只指定了作风，其他属性就会利用缺省值。一样平常地，Border的宽度缺省是medium，一样平常即是3到4个像素；缺省的色彩是个中笔墨的色彩。假如这个值恰好符合的话，就不必设那末多了。
4、CSS用于文档打印很多网站上都有一个针对打印的版本，但实践上这其实不必要，由于能够用CSS来设定打印作风。也就是说，能够为页面指定两个CSS文件，一个用于屏幕显现，一个用于打印：<linktype="text/css"rel="stylesheet"href="stylesheet.css"media="screen"/><linktype="text/css"rel="stylesheet"href="printstyle.css"media="print"/>第1行就是显现，第2行是打印，注重个中的media属性。但应当在打印CSS中写甚么器材呢？你能够按计划一般CSS的办法来设定它。计划的同时就能够把这个CSS设成显现CSS来反省它的效果。大概你会利用display:none这个命令来关失落一些粉饰图片，再关失落一些导航按钮。
5、图片交换技能一样平常都倡议用尺度的HTML来显现笔墨，而不要利用图片，如许不仅快，也更具可读性。但假如你想用一些特别字体时，就只能用图片了。好比你想全部卖器材的图标，你就用了这个图片：<h1><imgsrc="widget-image.gif"alt="Buywidgets"/></h1>这固然能够，但对搜刮引擎来讲，和一般笔墨比拟，它们对alt内里的交换笔墨几近没有乐趣这是由于很多计划者在这里放很多关头词来骗搜刮引擎。以是办法应当是如许的：<h1>Buywidgets</h1>但如许就没有特别字体了。要想到达一样效果，能够如许计划CSS：h1{background:url(widget-image.gif)no-repeat;height:imageheighttext-indent:-2000px}注重把imageheight换成真的图片的高度。这里，图片会看成背景显现出来，而真实的笔墨因为设定了-2000像素这个缩进，它们会呈现在屏幕右边2000点的中央，就看不见了。但这关于封闭图片的人来讲，大概全体看不到了，这点要注重。
6、CSSbox模子的另外一种调剂技能这个Box模子的调剂次要是针对IE6之前的IE扫瞄器的，它们把界限宽度和空缺都算在元素宽度上。好比：#box{width:100px;border:5px;padding:20px}如许挪用它：<divid="box">...</div>这时候盒子的全宽应当是150点，这在除IE6之前的IE扫瞄器以外的一切扫瞄器上都是准确的。但在IE5如许的扫瞄器上，它的全宽还是100点。能够用之前人创造的Box调剂办法来处置这类差别。但用CSS也能够到达一样的目标，让它们显现效果分歧。#box{width:150px}#boxdiv{border:5px;padding:20px}如许挪用：<divid="box"><div>...</div></div>如许，不论甚么扫瞄器，宽度都是150点了。
7、块元素居中对齐假如想做个流动宽度的网页而且想让网页程度居中的话，一般是如许：#content{width:700px;margin:0auto}你会利用<divid="content">来围上一切元素。这很复杂，但不敷好，IE6之前版本会显现不出这类效果。改CSS以下：body{text-align:center}#content{text-align:left;width:700px;margin:0auto}这会把网页内容都居中，以是在Content中又到场了text-align:left。
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。
11、Block和inline元素对照一切的HTML元素都属于block和inline之一。block元素的特性是：老是在新行上入手下手；高度，行高和顶和底边距都可把持；宽度缺省是它的容器的100%，除非设定一个宽度<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。相反地，inline元素的特性是：和其他元素都在一行上；高，行高及顶和底边距不成改动；宽度就是它的笔墨或图片的宽度，不成改动。<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子。用codeclass="inline">display:inline或display:block命令就能够改动一个元素的这一特征。甚么时分必要改动这一属性呢？让一个inline元素重新行入手下手；让块元素和其他元素坚持在一行上；把持inline元素的宽度（对导航条出格有效）；把持inline元素的高度；不必设定宽度便可为一个块元素设定与笔墨同宽的背景致。
12、再来一个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指定一个id：<body><divid="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");}
十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-transform:uppercase,text-transform:lowercase和text-transform:capitalize。第1个会把笔墨酿成全年夜写，第2个酿成全小写，第3个酿成首字母年夜写。这对拼音笔墨十分有效，即便输出时有巨细写毛病，在网页上也看不到。
十6、IE中图片笔墨消散的成绩偶然会碰到笔墨或背景图俄然消散的成绩，革新一下又呈现了，这在接近漂泊元素时更简单产生（注：没见过）。此时，能够为消散的元素设定：position:relative，假如不可，再思索为这些元素指定一个宽度尝尝。
十7、不成见笔墨不管由于何种缘故原由但愿某些网页笔墨不在扫瞄器中显现，好比为了打印或为了小屏幕而让某些笔墨不显现，都能够用display:none。这十分复杂，但偶然对某些人这有点没用，他们能往失落这个把持，这时候就要用到：position:absolute;left:-9000px。这实践上是把笔墨指定在页面之外显现。
十8、为手持设备计划专门的CSS也就是手机/PDA等小屏幕用户，能够专门计划一个CSS来让网页显现更恬逸些。为此，能够把扫瞄器窗口调剂到150点宽来看效果。指定专门的手持设备的CSS的语法是：<linktype="text/css"rel="stylesheet"href="handheldstyle.css"media="handheld"/>也能够浏览专门的手持设备可用性。
十9、3D效果的按钮之前要想制造带有3D效果，而且点击下往还会变更的按钮，就得用图片交换的办法，如今CSS就能够了：a{display:block;border:1pxsolid;border-color:#aaa#000#000#aaa;width:8em;background:#fc0;}a:hover{position:relative;top:1px;left:1px;border-color:#000#aaa#aaa#000;}至于效果，还能够本人调剂了。
二10、在分歧页面上利用一样的导航代码很多网页上都有导航菜单，当进进某页时，菜单上响应这一项就应当变灰，而其他页亮起来。一样平常要完成这个效果，必要写程序或专门为每页做计划，如今靠CSS就能够完成这个效果。起首，在导航代码中利用CSS类：<ul><li><ahref="#"class="home">Home</a></li><li><ahref="#"class="about">Aboutus</a></li><li><ahref="#"class="contact">Contactus</a></li></ul>然后分离为每页的Body指定一个id，和下面类同名。如<bodyid="contact">。然后计划CSS以下：#home.home,#about.about,#about.about{commandsforhighlightednavigationgohere}这里，当id设为home时，.home就会起感化，也就是class设为home的那一行导航条就会显现出特别效果来。其他页也是云云。

更好的控制页面布局。不用多说。

作者: 乐观 时间: 2015-1-18 05:21
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 蒙在股里 时间: 2015-1-24 10:35
可以使用 CSS 检查工具进行设计。

作者: 透明 时间: 2015-2-1 09:46
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 分手快乐 时间: 2015-2-7 04:12
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 第二个灵魂 时间: 2015-2-20 14:29
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 小女巫 时间: 2015-3-6 18:32
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 仓酷云 时间: 2015-3-13 07:07
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 因胸联盟 时间: 2015-3-20 16:28
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

欢迎光临仓酷云 (http://ckuyun.com/)