Web应用系统安全开发课件：使用CSS规定网页布局.pptx

Web应用系统安全开发

使用CSS规定网页布局;

2.2.1CSS语法基础;

1.概述

?CSS(CascadingStyleSheet)层叠样式表，是一种用来表现HTML文件样式的计算机语言，是能够真正做到网页表现与内容分离的一种样式设计语言。

?相对于传统HTML的表现而言，CSS能够对网页的布局、字体、颜色、背景和其它效果进行像素级的精确控制，并且拥有对网页对象和模型样式编辑的能力，能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

?CSS能够根据不同使用者的理解能力，简化或者优化写法，有较强的易读性。;

网页上使用CSS样式表的三种方法：

(1)外联式(Linking)：外联式也叫外部样式，就是将网页链接到外部样式表。linkrel=stylesheettype=text/csshref=mystyle.css/

(2)嵌入式(Embedding)：嵌入式也叫内页样式，就是在网页上创建嵌入的样式表。

styletype=text/css

body{background-color:red}

p{margin-left:20px}

/style

(3)内联式(Inline)：内联式也叫行内样式，就是应用内嵌样式到各个网页元素。pstyle=color:red;margin-left:20px

这是一个段落。

/p

优先级：内联式嵌入式外联式浏览器默认设置;

选择器：指向您需要设置样式的HTML元素；选择器通常是一个，也可以是多个；若是多个，则相互间用逗

号分开。

声明块：包含一条或多条用分号分隔的声明；每条声明都包含一个CSS属性名称和一个值，以冒号分隔；多条CSS声明用分号分隔，声明块用花括号括起来。;

四种CSS选择器：

(1)通配选择符“*”：代表所有对象，即页面上所有对象都会应用该样式，一般用于网页字体、字体大小、字体颜色、网页背景等公共属性的设置。

*{

background-color:yellow;

}

选择器也能选取另一个元素中的所有元素。

div*

{

background-color:yellow;

}

(2)标签选择符：即用HTML中标签名称作为选择符，则页面中所有同类标签都会应用该样式。p{

background-color:yellow;

};

(3)id选择符：为HTML标签添加id属性，CSS样式中以“#”加上id名称作为选择符，则页面中id值相???的

所有标签都会应用该样式。

#sidebar{

font-style:italic;

text-align:right;

margin-top:5px;

}

(4)class选择符：为HTML标签添加class属性，CSS样式中以“.”加上class名称作为选择符，则页面中class值相同的所有标签都会应用该样式。

.important{

color:red;

};

2.2.2使用CSS实现网页的美化与轮廓;

1.基本属性

(1)背景

background用于设置所有的背景属性，可以设置如下属性，见下表所示。;

(2)文本效果

在css中常见的文本效果属性见下表所示。;

(3)字体

在CSS中常见的字体属性见下表所示。;

(4)链接

链接可以使用任何CSS属性(例如color、font-family、background等)来设置样式。可以根据链接处于什么状态来设置链接的不同样式，四种链接状态分别是：

1)a:link－－正常的、未被访问的链接

2)a:visited－－用户访问过的链接

3)a:hover－－用户将鼠标悬停在链接上时

4)a:active－－链接被点击时

下面的代码表示设置链接的四种状态：

a:link{color:#FF0000;}/*未被访问的链接*/

a:visited{color:#00FF00;}/*已被访问的链接*/

a:hover{color:#FF00FF;}/*鼠标指针移动到链接上*/

a:active{color:#0000FF;}/*正在被点击的链接*/;

(5)列表

list-style，在一个声明中设置所有的列表属性，可以按顺序设置如下属性：

1)list-style-type属性指定列表项标记的类型；

2)list-style-image属性将图像指定为列表项标记；

3)list-style-position属性指定列表项标记(项目符号)的位置。

比