css网页美化

CSS网页美化

为什么要使用css美化网页

• 有效的传递网页页面信息
• 使用css美化过的页面文本，漂亮，美观，可以吸引用户
• 可以很好的突出页面的主题内容，使用户第一眼就可以看到页面主要内容
• 具有良好的用户体验

span和div

• div 是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。

• span 是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上< span>< /span>标记可以通过在span上定义样式来设定其内容的样式。

• div和 span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。

字体样式

font-family:"新宋体";    /*字体。常用微软雅黑、宋体。*/

　　font-size:12px;    /*字体大小。常用像素12px、14px、18px。还可以用“em”，“2.5em”即：默认字体的2.5倍。还可以用百分数*/

　　font-weight:bold;    /*bold是加粗，normal是正常*/

　　font-style:italic;    /*倾斜，normal是不倾斜*/

　　color:#03C;    /*颜色*/

　　text-decoration:underline;    /*下划线，overline是上划线，line-through是删除线,none是去掉下划线*/

　　text-align:center;    /*（水平对齐）居中对齐，left是左对齐，right是右对齐*/

　　vertical-align:middle;    /*（垂直对齐）居中对齐，top是顶部对齐，bottom是底部对齐。一般设置行高后使用。*/

　　text-indent:28px;    /*首行缩进量*/

　　line-height:24px;    /*行高。一般为1.5~2倍字体大小。*/

    display:none;    /*none，不显示；inline-block,显示为块，不自动换行，宽高可设；block，显示为块，自动换行；inline，效果同span标签，不自动换行，宽高不可设。*/

    visibility:hidden;    /*可视性。hidden，隐藏但是占空间；visible，显示。*/

网页背景

1. 背景色：background-color属性，设置元素的背景色，如：div {background:blue;}–设置所有div元素的背景为蓝色；
2. 背景图像：background-image属性，设置元素的背景图像，如：div{background-image:url(‘img.jpg’);}–设置div元素的背景图片；
3. 背景重复：background-repeat属性，对元素的背景图像进行平铺设置：默认值：repeat背景图像将在垂直方向和水平方向重复、repeat-x背景图像水平重复、repeat-y背景图像垂直重复平铺、no-repeat背景图像只显示一次、inherit规定应该从父元素继承background-repeat属性的设置。
4. 背景定位(设置背景图像的位置)：background-position属性，改变图像在背景中的位置

①.使用关键字来设定值：center、top、bottom、left、right；如：background-position:top;

②.使用百分比来设定值：如：background-position:50%;这个表现方式比较复杂，background-position的默认值是0% 0%，在功能上相当于top left；如果你　　想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('img.gif');