web-10. 层叠样式表CSS概述

10. 层叠样式表CSS概述

10.1 DHTMLCSS概念

一个好的Web页面,不但有丰富的内容,同事也需要有精美和“引人注目”的显示效果。DHTML就是具有动态属性和动态显示效果的HTML,而CSS则规定了各种显示风格样式的名称和设置值的规则。

 

10.2 CSS的基本类型

样式规则定义的第一部分成为selector(选择器),它定义了HTML文件中受该样式规则影响的HTML元素。selector包括有HTML selectorclass selectorID selector3中基本类型,以及在这3类基本类型基础之上的其他selector

 

  1. HTML标记形式实现的HTML selector

HTML selector就是通过HTML标记来实现的样式选择器,例如<P><DIV><TD>等。HTML selector一般在HTML文档的<head><style></style>标记对之间进行定义。

如果在CSS中将某一个HTML标记定义成了selector,那么在CSS所有应用的网页中,所有这个HTML标记都按照相应的样式规则定义语句显示。

HTML脚本在浏览器中的执行方式是解释执行方式,解释执行方式是一种顺序执行方式,因此一旦在前面定义了CSS的样式,后面脚本中就会把这种样式作用于特定的Web元素。比如在前面定义了CSS的样式:

<style type=”text/css”>

h1{color:green}

</style>

那么后面脚本中所有的<h1></h1>标记对之间的文本颜色都将会是绿色。

例子:

<html>

<head>

<title>HTML选择器实例</title>

<style type="text/css" media="screen,projection">

h1{font-size:60px;color:red;font-family:方正姚体}

h2{font-size:40px;color:green;font-family:宋体}

h1{font-size:30px;color:blue;font-family:隶书}

</style>

</head>

<body>

<h1>生命在于运动</h1>

<h2>生命在于运动</h2>

<h3>生命在于运动</h3>

</form>

</body>

</html>

 

  1. class属性实现的Class selector

这里类的概念是各HTML标记所通用的属性class。比如要在网页中对段落分类,只需要为各个段落标记<p>class属性指定不同值即可。这种选择器的格式定义类似于HTMLselector

这里所说的类不同于面向对象编程语言中的类,它仅仅是HTML标记的class属性。

例子:

<html>

<head>

<title>HTML类选择器实例</title>

<style type="text/css" media="screen,projection">

p1{color:red}

p.2{color:yellow}

p.3{color:green}

</style>

</head>

<body>

<p1>生命在于运动</p1>

<p class="2">生命在于运动</p>

<p class="3">生命在于运动</p>

</form>

</body>

</html>

注:这里浏览器不支持“类”的使用。

 

  1. ID属性实现的ID selector

例子:

<html>

<head>

<title>HTML类选择器实例</title>

<style type="text/css" media="screen,projection">

#p1{color:red}

#p2{color:yellow}

#p3{color:green}

</style>

</head>

<body>

<p><span ID="p1">生命在于运动</1>

<p><span ID="p2">生命在于运动</p>

<p><span ID="p3">生命在于运动</p>

</form>

</body>

</html>

 

10.3 CSS的基本用法

  1. 正文中使用

例子:

<html>

<head>

<title>内联样式表实例</title>

</head>

<body style="font-size:60px;color:red;font-family:隶书;

<p>生命在于运动</p>

<p>生命在于运动</p>

<p>生命在于运动</p>

</body>

</html>

  1. <head></head>之间

例子:

<html>

<head>

 

<title>内联样式表实例</title>

<style>

p{font-size:60px;color:blue;font-family:隶书}

</style>

</head>

<body style="

<p>生命在于运动</p>

<p>生命在于运动</p>

<p>生命在于运动</p>

</body>

</html>

 

  1. 使用单独的文件存放的外部样式表

存放于单独的.css文件,并用<link>标记设置使用样式表而定规则的方式。

例子:

<html>

<head>

  <link rel="stylesheet" href="2.css" type="text/css" media="screen">

</head>

<body>

<center>

<h2>欢迎使用超级系统维护软件</h2>

<div class="table">

<table>

  <tr>

    <td>用户名</td>

    <td><input type="text" name="username"></td>

  </tr>

  <tr>

    <td>密码</td>

    <td><input type="password" name="password"></td>

  </tr>

  <tr>

    <td>自动登录</td>

    <td><input type="checkbox" name="auto"></td>

  </tr>

  <tr>

    <td> </td>

    <td align="right"><input type="submit" value="进入" class="botton"></td>

  </tr>

</table>

<div id="footer">版权所有:段立勇</div>

</div>

</center>

</body>

</html>

 

2.css

body,table

{

  font:12px Tahoma;

  margin:20px;

}

h2{

  font:bolder 24px Tahoma;

  color:darkred;

}

.table{

  border:1px outset lightgrey;

  padding:20px;

  background:lightyellow;

  width:300px;

}

.button{padding:2px 10px 2px 10px;

  border:1 out1set white;

  background:darkblue;

color:white;

  font:bolder 11px Tahoma

}

#footer{

  font:10px Tahoma;

  margin:30px 10px 10px 10px;

  text-align:right;

}

 

posted @ 2018-10-31 12:36  free-锻炼身体  阅读(168)  评论(0编辑  收藏  举报