首页 > > 程序设计 > delphi >

样式

2018-06-17 19:34:13来源：未知阅读 ()

　　CSS（Cascading Stytle Sheet）简称样式表，是一种用户增强控制页面样式并允许将样式信息与页面内容分离的标记性语言。使用可以很容易地控制页面中的HTML元素的背景与颜色、元素框的样式、定位、文字字体等属性的设置。

样式的作用：

　　1.内容与表现分离。

　　2.可以使网页的表现非常统一，并且容易修改。

　　3.减少重复代码的编写。

　　4.增加网页的浏览速度。

　　5.减少硬盘容量。

样式在HTML文档中的位置可以分为三种：

　　1. 内嵌样式表。内嵌样式表的CSS是写在HTML标签里的，只对当前的标签起作用。

　　2. 内部样式表。内部样式表是写在HTML的<head>和</head>里的，由<style>和</style>标记，内部样式表只对所在的网页有效。

　　3.外部样式表。为了能够让很多页面共享同样的样式表，可以把样式表的定义写在一个扩展名为.css的文件里，然后在每个需要使用该样式表的页面中添加对该样式表文件的引用。

样式的语法

最基本的CSS由：选择符（selector）、属性（properties）和属性的取值（value）三个部分构成：

　　选择符{属性：值}，即：selector{property: value}

　　一般情况下，选择符是要为之定义样式的HTML标记，可以通过此方法定义相应标记的属性和值，属性和值之间用冒号隔开。例如：

　　　　body {color: red}

　　　　选择符body是指页面主体部分，color是控制文字颜色的属性，red是颜色的值，该代码的效果是使页面中的文字为红色。

　　如果属性的值是多个单词组成，必须在值上加引号。

　　　　例如：p {font-family: "sans serif"}

　　　　定义段落的字体为sans serif。

　　如果需要对一个选择符指定多个属性时，则要使用分号将所有的属性和值分开。

　　　　例如：p {text-align: center; color: red}

　　表示段落居中排列，并且段落中的文字为红色。

选择符的类型：

　　1. 类选择符

　　用类选择符能够把相同的元素分类定义为不同的样式，定义类选择符时，在类的名称前面加一个点号，点号前加上相应的HTML标记，而HTML标记可以省略。例如：

1     p.right {text-align: right}
2     center {text-align: center}

　　2. 包含选择符

　　包含选择符可以单独对某种元素包含关系（元素1里包含元素2）进行定义的样式表，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

1 table table1
2 {
3     font-size: 14px
4 }

　　3. ID选择符

　　在HTML文档中，ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法：第1种是“#”号 + ID，第2种是标记 + “#”号 + ID，第1种方法具有通用性，可用于所有ID，第2种只用于指定的标记。例如：

1 #intro 
2 {
3     font-size:90%;
4 }
5 
6 p#headLine 
7 {
8     font-size:100%;
9 }

使用样式

在页面中插入样式表的常用方法：

　　1. 链入外部样式表：把样式表保存为一个样式表文件，然后利用页面中<link>标记链接到这个样式表文件。<link>标记必须放到页面的<head>区内，例如：

1 <head>
2     <link rel="stylesheet1" type="text/css“ href="mystyle.css1">
3 </head>

　　2. 内部样式表：把样式表放到页面的<head>标记对里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，例如：

1 <head>
2     <style type="text/css">
3         hr {color: green}
4         p {margin-left:10px}
5         body {background-image: url("images/1.png")}
6     </style>
7 </head>

　　3. 导入外部样式表：指在内部样式表的<style>标记对里导入一个外部样式表，导入时利用“@import”实现，例如：

1 <head>
2     <style type=”text/css”>
3            <!-- @import “mystyle1.css”
4         /*其他样式表的声明*/ -->
5     </style>
6 </head>

　　4.内嵌样式是混合在HTML标记里使用的，使用这种方法可以很简单地对某个元素单独定义样式。内嵌样式的使用是直接在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，例如：

1 <p style=“color: sienna; margin-left: 20px”>段落 </p>

创建样式

　　使用样式创建器创建样式，只需根据“新建”样式对话框进行一些选择就可生成满足需要的样式。

修改样式

　　VS提供了两种修改样式的方法，这两种方法都要依赖于“CSS属性”对话框，使用“CSS属性”对话框可以查看任何样式的详细内容。在VS中选择“视图”|“CSS属性”命令，则可以打开 “CSS属性”对话框。

创建和应用样式文件

　　在多数情况下，并不直接在页面中创建样式，而是在项目中创建存储通用样式的文件。使用“新建样式”对话框可以创建样式文件，创建样式文件有两种方法：一、新创建一个样式文件，把创建的样式放到该文件中；二、向已经存在的样式文件中添加新的样式。使用时只需在页面中引用这些文件存在的样式。

使用实例：

新建样式表StyleSheet1.css，代码如下：

1 body {
2 }
3 .新建样式2 {
4     font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
5     font-size: small;
6     font-weight: bolder;
7     font-style: oblique;
8 }

Default.aspx中代码如下：

 1 <head runat="server">
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title></title>
 4     <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
 5 </head>
 6 <body>
 7     <form id="form1" runat="server">
 8     <div class="新建样式2">
 9         <table>
10             <tr>
11                 <td>
12                     <asp:Label ID="Label1" runat="server" Text="用户名：" />
13                 </td>
14                 <td>
15                     <asp:TextBox ID="TextBox1" runat="server" />
16                 </td>
17             </tr>
18             <tr>
19                 <td>
20                     <asp:Label ID="Label2" runat="server" Text="密码：" />
21                 </td>
22                 <td>
23                     <asp:TextBox ID="TextBox2" runat="server" />
24                 </td>
25             </tr>
26             <tr>
27                 <td>
28                     <asp:Button ID="Button1" runat="server" Text="登录"/>
29                 </td>
30             </tr>
31         </table>
32     </div>
33     </form>
34 </body>