HTML表单与框架及CSS选择器简介.pdfVIP

昨日回顾

label/label标记

作用：一般是是给表单元素增加一个标注，当鼠标在lable上单击，会将光标定位到与之的关联的表单元

素上。

用户名：inputtype“text”name“username”id“username”

HTML默认是用name属性；

XHTML建议将所有的name用id代替；

为了向下兼容，我们建议id和name同时使用，其值保持一致。

input.txt：class“txt”的input元素。

框架

是一个浏览器窗口分成某个部分，每个部分代表一个独立的窗口，每个窗口可显示不同的网页文件。

框架就是一网页结构，不合任何实际的内容。内容都是通过frame标记的src属性，去外部的网页文

件。

框架主要用于方面，在网页前台一般不用。

要使用框架，请选择XHTML的框架模板。

frameset不能和body共用。

框架结构：上中下，中又分左右两列。

CSS选择器

基本选择器：

通用选择器*：不推荐使用

标记选择器：所有的HTML标记都可以作为选择器

类选择器：以.开头，对应HTML标的记的class属性的值

Id选择器：以#开头，对应HTML标记的id属性的值。

组合选择器

多元素选择器：同时可以设置多个选择器的样式。如：body,h1,a{color:#FF0000;}

后代元素选择器：E空格F，E元素下的所有F元素。

子元素选择器：EF，E元素下的所有子元素F。

相邻元素选择器：E+F,选择E元素的下一个兄弟元素(平级关系)。

属性选择器

E[attr]

E[attr=value]

伪类选择器：一般用于超级

（1）全局伪类：所有的超级都会变

a:link

a:hover

a:visited

（2）局部伪类：可以单独给几个超级定义类样式。

ahref“URL”class“a10”首页/a

a.a10:link,a.a10:visited{}：class=a10的a元素

a.a10:hover{}

CSS的引入方式

（1）行内样式：每一个HTML标记都有一个style属性。

格式：divstyle“color:#FF0000;font-size:15px;”/div

（2）内嵌式：通过style标记对，将CSS样式加入到head/head中。

特点：只能应用于当前网页，不可以多个文件共享样式。

head

styletype=”text/css”

H1{color:#FF0000;}

/style

/head

（3）链入式：加载外部样式表文件。

可以将当前的所有CSS代码，单独放到一个文件中去，文件扩展名为.css。

通过link标记加入到head/head中。

好处：多个网页文件，可以共享同一个样式表文件。

linkhref“CSS文件URL”rel“styheet”type“text/css”/

注意：在.css文件中，只能是纯css代码，不能包含style标记。

linkhref=/Home/Tpl/Public/Css/index.cssrel=styheet/

linkhref=/Home/Tpl/Public/Css/public.cssrel=styheet/

公共CSS文件：public.css，里面编写一些多个页面共用的样式。

index.css，这个CSS文件是针对于首页用的。

news.css,这个CSS文件针对模块。

同一个页面，可以链入多个外部CSS文件