4.12号HTML、CSS

HTML

表单元素：

多行文本域<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="2" cols="25">文本的默认值</textarea>

实现的效果：

下拉列表select 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项。

<select style="width: 200px;">
        <option selected="selected">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>郑州</option>
        <option>商丘</option>
        <option>南京</option>
        <option>海南</option>
        <option>台湾</option>
</select>

实现的效果：

只读文本框

<input type="text" name="name"  value="张三" readonly="readonly">
<input type="submit" value="保存" disabled="disabled" style="border: none;">

实现的效果：

需要注意的是，readonly关键字可以实现只读文本框的效果，设置之后，文本框内状态为只读状态。而disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

表格：

<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>4</th>
        <th>5</th>
        <th>6</th>
    </tr>
</table>

以上表格显示的效果为2行3列的效果：

隐藏域hidden 属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元素。hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。

<input type="hidden" name="hidden">

表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

语法为：

<label for="id"></label>
<input type="radio" name="gender" id="male">

CSS

CSS中三种样式表之间的优先级：

行内样式>内部样式>外部样式

CSS中三种基本选择器：

id选择器：

#myid { ... }  

类选择器：

.myclass { ... }  

标签选择器：

p { ... }  

优先级：

id选择器>类选择器>标签选择器

背景颜色background：

body {background-color:#b0c4de;}

以上代码的效果为，在整个body页面内，页面颜色为：#b0c4de.

背景图像background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body {background-image:url('a.png');}

文本修饰：text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线。

a {text-decoration:none;}

字体：

font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。需要注意的是如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明。

p{font-family:"Times New Roman", Times, serif;}

链接的样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

表格边框：指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td
{
border: 1px solid black;
}

CSS display 属性:

display 属性规定元素应该生成的框的类型。

p.inline
{
    display:inline;
}

CSS float浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

img
{
    float:right;
}

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊。实例：

.text_line
{
    clear:both;
}

CSS overflow 属性

div
{
width:150px;
height:150px;
overflow:scroll;
}

CSS z-index 属性

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

需要注意的是 z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。