Css美化网页元素

<span></span>范围标签使用

 

使用Css设置字体样式

font-family:设置字体类别

font-size: 默认为16px，也就是1em

font-weight:

font-style:字体风格

normal：正常

italic：文字的斜体

oblique：文字的倾斜

两个斜体区别：有些字体有斜体属性，但有些字体没有做这个属性。当遇到正常的字体，设置italic它就倾斜了，如果没有设置的只有使用oblique强制倾斜。

使用css设置字体样式，可以一个一个设置，也可用一个font标签全部设置：

#p1{
    font-style:italic;
    font-weight:bold;
    font-size:18px;
    font-family:楷体;
    }
#p2{
    font: italic bold 19px 宋体;}
font:18px/36px;前面表示字体大小后面表示行高。

 

设置文字样式

color: 文本颜色 RGB(0~225)

text-align: 对齐方式（start、end、left、right、center、justify两端对齐）

text-indent:设置首行文本缩进

line-height：设置行高

text-decoration：文本修饰（blink闪烁【一般看不出效果】、line-through删除线、overline上划线、underline下划线）

 

伪类：

超链接的修饰

伪类语法：  标签名：伪类名{.../* 样式 */}

伪类名：

   link：初始状态

　active：鼠标点击未释放的时候

   visited：点击后

   hover：鼠标移上去的时候

伪类在a标签中可以实现全部效果，不同情况可以实现不同效果。

@charset "utf-8";
/* CSS Document */

a:link{
    color:red;
    }
a:hover{
    text-decoration:none;
    font-size:36px;
    color:blue;
    }
a:active{
    font-size:18px;
    color:yellow;
    }
a:visited{
    text-decoration:line-through;
    font-size:16px;
}

关于伪类的补充：

伪类其实也可以是表示形态下的标签

比如：

<a> <div></div></a>
你可以这样写：
a:hover div{
.....这里写改变div的样式，所以说伪类也是一种标签
}

 

 

 

设置鼠标形状 通过设置标签的cursor属性

<span style="cursor:pointer;">pointer 手型</span>
<span style="cursor:crosshair;">crosshair 十字</span>
<span style="cursor:text;">text 文本</span>
<span style="cursor:wait;">wait 等待</span>
<span style="cursor:help;">help 问号</span>
<span style="cursor:e-resize;">e-resize 右的箭头</span>
<span style="cursor:ne-resize;">ne-resize 右上的箭头</span>
<span style="cursor:n-resize;">n-resize 上的箭头</span>
<span style="cursor:nw-resize;">nw-resize 左上的箭头</span>
<span style="cursor:w-resize;">w-resize 左的箭头</span>
<span style="cursor:sw-resize;">sw-resize 左下的箭头</span>
<span style="cursor:s-resize;">s-resize 下的箭头</span>
<span style="cursor:se-resize;">se-resize 右下的箭头</span>
<span style="cursor:move;">move 移动</span>

 

div标签的使用

 

background-color：设置背景颜色

background-image：设置背景图片

    background-image:url(1.jpg);

background-repeat：设置图片平铺方式（因为有时候页面太大图片太小，所以需要图片平铺）

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

background-position：图片定位  （原点为页面最左上位置，x向右，y向下）

 

列表样式：

标记类型：

list-style-image:url(..);标记图片

list-style-position：

inside：标记在li范围内  outside：标记在li范围外