制作列表、表格及表单

1.字体样式

属性 含义 示例
font-family 字体类型 font-family:“微软雅黑”;
font-size 字体大小 font-size:12px;

font-style 设置字体风格 font-style:italic; /斜体/
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px “微软雅黑”;

font-family同时设置英文字体和中文字体是需要注意什么问题？
根据font-fanily的字体调用原则，我们可以为英文，中文等两种字体调用不同的字体渲染。如：Arial，‘Times New Roman’这两种字体都不认识中文，只认识英文，所以这两种字体只能渲染英文数字和一些特殊符号，而页面中的中文就会自动调用第三种字体Microsoft YaHei(假如存在这种字体的话)，所以在定义字体的时候把英文的字体写在前面，把中文的写在后面，这样系统就会自动按顺序依次给字调用字体，如果当前字体不支持文本，那么自动换用列表中的下一个字体。

div

div{
    width:400px;
    height:400px;
}

---

2.文本样式

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

3.伪类语法（以a标签为例）

.
a:hover {

color:#B29210;

text-decoration:underline;

}

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

4.背景属性

背景颜色：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;
背景颜色的渐变：background: linear-gradient(#ECECEC,#FFFFED);
总的属性：background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;
背景设置成*颜色，有图片，不能重复，上下10px，左右15px
opacity 设置透明度

---

5.列表

三种列表分别适用于什么场景？
有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应
的编号。
无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一
个原点用于标识。
定义列表通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第
二部分是相应的解释和描述。

无序列表的样式
list-style-type

list-style-image

list-style-position

list-style

有序列表中
可以使用属性type改变标志，标志可能是字母、数字或另外某种计数体系中的一个符号。

无序列表中
要修改用于列表项的标志类型，可以使用属性 list-style-type：
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
url（）是一个方法
规定列表中列表项目标记的位置：
ul {
list-style-position: inside;
}
内部inside 外部outside

ul{
  list-style:square inside url("/i/arrow.gif");
}

---

表格
表格的跨行、跨列分别使用什么属性？要实现一个跨3行2列的单元需要哪几个步骤？
跨行使用rowspan；跨列使用colspan 首先在需要合并的第一个单元格，设置跨列或者跨行的属性例如：rowspan=“3”,colspan=“2”; 然后删除被合并的单元格（其实就是合并的时候把原来单元格的位置占了）

表单
input标签
属性 值
type 元素类型：text、password、checkbox、radio、submit、reset、file、image 和 button，默认为 text
size 元素的宽度（ type 为 text 或 password时）
maxlength type为text 或 password 时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中
submit和reset 只能识别表单中带name属性的标签
file 由于只是字符串传递，所以目前不能得到上传的图片

下拉框

<select name="名称" size="行数">
<option value="china" selected="selected">中国
     …
</option >
<option value="US">美国…</option>
</select>

多行文本框textarea

<textarea name="showText"  cols="30" rows="10" placeholder="请在这里键入附注"></textarea><br/>

涉及到的高级应用
type="hidden"隐藏域 就是一些隐藏的属性
readonly只读
disable禁用

---

6.高级选择器

并集选择器【多个选择器通过逗号连接而成，同时声明多个风格相同样式】

h1,h2{
color:red;
}

交集选择器【由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
第
一个必须是标签选择器，第二个必须是类选择器或者ID选择器】

h1.center {color:red; text-align:center;}
h1#center {color:red; text-align:center;}

后代选择器【外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔
标签嵌套时
，内层的标签成为外层标签的后代】

body p{
	font-size：18px;
}

子元素选择器【通过>连接在一起而成，仅作用于子元素】

p>ul{
	list-style-type : square;
}

伪类选择器
a:link{}
a:visited{}
a:hover{}
a:active{}

属性选择器【选取带有指定属性的元素，或选取带有指定属性和值的元素】

a[href="#"]:link{            /*未访问*/
    color: #640000;
    font-size: 14px;
}

input[type*="t"]	包含t
input[type^="t"]	开头为t
input[type$="t"]	结尾为t

结构伪类选择器【按照条件查找】

 /*body的第7个子元素是p的属性*/

p:nth-child(7){color: blue;}

/* 先找父级，这里div是父级，然后找div下的第2n个元素，是P的话，背景是: #508FD4 */

p:nth-child(2n){background: #508FD4}

/* 先找父级，这里div是父级，然后找div下的第二个元素，是P的话，背景是绿色 */

p:nth-child(2){background: green;}

/* 先找父级，这里div是父级，然后找div下的倒数第二个元素，是P的话，背景是红色 */

p:nth-last-child(2){background: red;}

/* 先找父级，这里div是父级，然后找div下P元素，第二个P，背景是黄色 */

h1:nth-of-type(2){background: yellow}

/p为空时，背景为#8af4aa/
p:empty{background: #8af4aa;}
/父类的第一个（最后一个）元素为p时/

p:first-child{ color: #12b7f5; background: #fdb741}
p:last-child{ color: #12b7f5; background: #fdb741} 

/先找到父类，然后第一个类型的属性是h1的话/

h1:first-of-type{ font-size: 24px; color: #12b7f5; background:#FFFED4}
h1:last-of-type{ font-size: 24px; color: #12b7f5; background: #FFFED4}

---

---