了解css网页制作有哪些重要方法_css网页制作有什么方法

　　DIV+CSS是WEB设计标准，它是一种网页的布局方法。下面由学习啦小编为大家整理的css网页制作的方法，希望大家喜欢!

　　css网页制作的方法

　　(一)、如何控制CSS网页字体

　　做网页开发的时候，我们需要设置网页字体的大小，把普通和重要的信息进行区分，让一些重要信息更加的显眼，但是css代码要怎么写呢?

　　(二)、DIVCSS布局的优点

　　符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

　　(三)、div与span的区别

　　DIV和SPAN元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。

　　(四)、css代码优化的方法

　　坚决反对说CSS优化空间小、对性能影响小的答案。事实上大部分的复杂页面都可以在完全不修改JavaScript代码的情况下，通过CSS的优化大幅提升renderperformance。

　　(五)、CSS制作网页虚线

　　在制作网页的时候，常常要遇到制作虚线表格的问题。

　　CSS制作网页虚线的方法

　　一、四边为虚线边框

　　border:1px dashed #000; 黑色虚线边框

　　实例：

　　CSS代码： .hackhome{border:1px dashed #000; height:50px;width:350px}

　　Html代码： 我的四边为黑色虚线边框

　　这里配置边框缩写形式解释hackhome挑选器四边边框为1px的黑色虚线边框

　　二、左边为虚线：

　　CSS代码： .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

　　Html代码： 我的左边为黑色虚线边框

　　这里配置了左边一边为黑色虚线边框

　　三、右边为虚线：

　　CSS代码： .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

　　Html代码： 我的右边为黑色虚线边框

　　这里配置了右边一边为黑色虚线边框

　　四、顶部边(上边)为虚线：

　　CSS代码： .hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

　　Html代码： 我的上边为黑色虚线边框

　　这里配置了顶边(上边线)一边为黑色虚线边框

　　五、底部边(下边)为虚线：

　　CSS代码： .hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

　　Html代码： 我的下边为黑色虚线边框

　　这里配置了底边(下边线)一边为黑色虚线边框

　　六、随意一边不为虚线，其它三边为虚线状况

　　参与右边边框不为虚线而没有边线，其它三边为黑色虚线边框

　　CSS代码： .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

　　CSS常用的缩写方式

　　颜色

　　16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; #f2f2f2是不可以缩写的

　　盒模型的边框

　　border-width:1px;

　　border-style:solid;

　　border-color:#000;

　　可以缩写为一句：

　　border:1px solid #000;

　　语法是border:width style color;

　　盒模型的边界和填充

　　margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;

　　margin:1px 2px 3px 4px;

　　注意：这里的顺序是顺时针，分别为：上右下左

　　margin:1px 2px;

　　margin:0;

　　注意：CSS中值为0时可以不带单位，其它时候都必须带单位

　　背景

　　background-color:#f00;

　　background-image:url(background.gif);

　　background-repeat:no-repeat;

　　background-attachment:fixed;

　　background-position:0 0;

　　可以缩写为一句：

　　background:#f00 url(background.gif) no-repeat fixed 0 0;

　　字体

　　font-style:italic;

　　font-variant:small-caps;

　　font-weight:bold;

　　font-size:1em;

　　line-height:140%;

　　font-family:"Lucida Grande",sans-serif;

　　可以缩写为一句：

　　font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

　　注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

　　列表

　　list-style-type:square;

　　list-style-position:inside;

　　list-style-image:url(image.gif);

　　可以缩写为一句：

　　list-style:square inside url(image.gif);