CSS网页设计有哪些必要的方法_CSS网页设计有什么方法

　　CSS指层叠样式表 (Cascading Style Sheets)，大家知道网站的前端是离不开CSS样式的，那如何能学好这个技术呢?下面由学习啦小编为大家整理的CSS网页设计方法，希望大家喜欢!

　　CSS网页设计方法

　　一.使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法结见附》，这里就不展开描述。

　　二.明确定义单位，除非值为0

　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如: width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

　　三.区分大小写

　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写旌闲矗?胱邢溉啡夏阍贑SS的定义和XHTML里的标签是一致的。

　　四.取消class和id前的元素限定

　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

　　div#content?{?/*?declarations?*/?}?

　　fieldset.details?{?/*?declarations?*/?}?

　　可以写成

　　#content?{?/*?declarations?*/?}?

　　.details?{?/*?declarations?*/?}?

　　这样可以节省一些字节。

　　五.默认值

　　通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:

　　*?{

　　margin:0;

　　padding:0;

　　}

　　六.不需要重复定义可继承的值

　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

　　七.最近优先原则

　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已经定义了元素p，又定义了一个class"update"

　　p?{

　　margin:1em?0;

　　font-size:1em;

　　color:#333;

　　}

　　.update?{

　　font-weight:bold;

　　color:#600;

　　}

　　这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

　　八.多重class定义

　　一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。

　　.one{width:200px;background:#666;}

　　.two{border:10px?solid?#F00;}

　　在页面代码中，我们可以这样调用

　　这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

　　九.使用子选择器(descendant selectors)

　　CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

　　Item 1>

　　Item 1

　　Item 1

　　这段代码的CSS定义是:

　　div#subnav?ul?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?a.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?a.subnavitemselected?{?/*?Some?styling?*/?}

　　你可以用下面的方法替代上面的代码

　　Item 1

　　Item 1

　　Item 1

　　样式定义是:

　　?? 　#subnav?{?/*?Some?styling?*/?}

　　#subnav?li?{?/*?Some?styling?*/?}

　　#subnav?a?{?/*?Some?styling?*/?}

　　#subnav?.sel?{?/*?Some?styling?*/?}

　　#subnav?.sel?a?{?/*?Some?styling?*/?}

　　用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

　　十.不需要给背景图片路径加引号

　　为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:

　　background:url("images/***.gif") #333;

　　可以写为

　　background:url(images/***.gif) #333;

　　如果你加了引号，反而会引起一些浏览器的错误。

　　CSS简写的方法

　　色彩缩写

　　色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

　　color：#113366

　　可以简写为

　　color：#136

　　所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。

　　盒子大小

　　这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

　　margin-top:1px;

　　margin-right:1px;

　　margin-botton:1px;

　　margin-left:1px;

　　这四个值可以缩写到一起：

　　margin:1px 1px 1px 1px;

　　缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

　　margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;

　　margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px

　　margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;

　　margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

　　边框(border)

　　border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

　　border-width:数字+单位;

　　border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;

　　border-color: 颜色 ;

　　它可以按照width、style和color的顺序简写：

　　border:5px solid #369;

　　list-style也有三个属性：

　　list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman

　　list-style-position: inside || outside || inherit

　　list-style-image: (url) || none || inherit

　　CSS应该注意哪些

　　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: bold italic small-caps 1em/1.5em verdana,sans-serif

　　真不错!只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

　　2. 同时使用两个类

　　一般只能给一个元素设定一个类(Class)，但这并不意味着不能用两个。事实上，你可以这样：

　　...

　　同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

　　3. CSS border的缺省值

　　通常可以设定边界的颜色，宽度和风格，如：

　　border: 3px solid #000

　　这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

　　如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

　　4. CSS用于文档打印

　　许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

　　也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

　　第1行就是显示，第2行是打印，注意其中的media属性。

　　但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

　　5. 图片替换技巧

　　一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

　　比如你想整个卖东西的图标，你就用了这个图片：

　　这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

　　Buy widgets

　　但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

　　h1

　　{

　　background: url(widget-image.gif) no-repeat;

　　height: image height

　　text-indent: -2000px

　　}

　　注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。