html css软件测试,html-使用CSS - UCbank的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...

使用CSS

CSS是Cascading Style. Sheet的缩写。译作「层叠样式表单」。是用于(增强)控制页面样式并允许将样式信息与网页内容分离的一种标记性语言。

你可以用以下三种方式将样式表加入您的页面。一般情况，最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

关于分号：

引号里分号(内联定义)：各属性间须有分号，最后一个，分号可忽略

中括号里的分号(非内联定义)：须有，类似于语句须结尾

1.1链入外部样式表文件(Linking to a Style. Sheet)

你可以先建立外部样式表文件(.css)，然后在

标签中使用link对象。

示例如下：

title of article

如

(1)layout.css中的内容：

a{/*类型选择符，用于控制标签(同类标签)*/

text-decoration:line-through;

text-align:right;}

a[id="headbodytail"]{/*属性选择符，用于控制需要突出标签(同类标签中需要突出的标签)*/

text-decoration:line-through;

text-align:center;}

a[name="aa"]{

text-decoration:line-through;

text-align:left;}

#three{/*id选择符*/

width:80%;

height:30;

text-align:left;}

.six{/*类选择符(class)*/

width:80%;

height:50;

text-align:right;}

(2)实例中的应用：

实例

---

A标签css样式导入实例

类型选择符测试

---

属性选择符测试01

---

属性选择符测试02

---

id选择符测试

---

类(class)选择符测试

---

内联测试

---

类型选择符测试

---

附：link标签--当在文档中声明使用外接资源(比如CSS)时使用此标签link标签是单独出现的属性href --指定需要加载的资源(CSS文件)的地址URI

media --媒体类型,参见CSS教程rel --指定链接类型rev --指定链接类型type --包含内容的类型,一般使用type="text/css"rel属性-- rel属性,描述了当前页面与href所指定文档的关系.

rel属性通常出现在a,link标签中属性值alternate --定义交替出现的链接appendix --定义文档的附加信息bookmark --书签chapter --当前文档的章节contents

copyright --当前文档的版权glossary --词汇help --链接帮助信息index --当前文档的索引next --记录文档的下一页.(浏览器可以提前加载此页)

nofollow --不被用于计算PageRank

prev --记录文档的上一页.(定义浏览器的后退键)

section --作为文档的一部分start --通知搜索引擎,文档的开始stylesheet --定义一个外部加载的样式表subsection --作为文档的一小部分rel是relationship的英文缩写.

1.2定义内部样式块对象(Embedding a Style. Block)

你可以在

标签中插入一个块对象。

示例如下：

内部样式测试

.red{color:#ff0000;}/*类选择符(class)*/

#green{color:#00ff00;}/*id选择符*/

font{/*类型选择符*/

color:#0000ff;

text-align:center;}

input[type="text"]{background-color:#0000ff;}/*属性选择符*/

input[type="date"]{background-color:#ff0000;}

请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

如：实例中的应用：

内部样式测试

.red{color:#ff0000;}/*类选择符(class)*/

#green{color:#00ff00;}/*id选择符*/

font{/*类型选择符*/

color:#0000ff;

text-align:center;}

input[type="text"]{background-color:#0000ff;}/*属性选择符*/

input[type="date"]{background-color:#ff0000;}

内联测试(文字稍多点)

---

ID选择符测试测试(文字稍多点)

---

类(class)测试测试(文字稍多点)

---

属性选择符测试如下

---

1.3内联定义(Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：

如：