列表表格及表单美化

文本在网页中的作用

 1.传递页面信息     2.增强用户体      3.美化页面文本    4.页面美观漂亮    5.吸引用户     6.突出主题

 字体样式

属性	含义	示例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

DIV 标签 

    网页布局     排版网页内容       <div>网页内容…</div>

属性

      height      width 

 #header {     width:200px;     height:280px; } …… <div id="header">网页内容…</div>

文本样式 

属性	含义	示例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

伪类语法 

       伪类

伪类名称	含义
a:link	未单击访问超链接样式
a:visited	单击访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a:active	鼠标单击未释放的超链接样式

 CSS设置鼠标形状

      CSS设置超链接

 背景属性

     背景颜色：background-color:#B70447;

     背景图像 图像路径： background-image:url(img/buy.png);

     重复方式： background-repeat:no-repeat;

     背景定位： background-position:10px 15px;

背景简写 :background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;

 列表                                            列表样式

                   有序列表                                 list-style-type             list-style

                   无序列表                                 list-style-image

                   自定义列表                             list-style-position

 表单的元素

属性	说明
type	元素类型：text、password、checkbox、radio、submit、reset、file、image 和 button，默认为 text
size	元素的宽度，当 type 为 text 或 password时
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

列表框 

<select name="名称" size="行数">

<option value="值" selected="selected">

 … </option >

<option value="值">…</option>

</select>

CSS高级选择器 

名称	说明
并集选择器	多个选择器通过逗号连接而成，同时声明多个风格相同样式
交集选择器	由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
后代选择器	外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔 标签嵌套时，内层的标签成为外层标签的后代
子元素选择器	通过>连接在一起而成，仅作用于子元素
属性选择器	选取带有指定属性的元素，或选取带有指定属性和值的元素