在讲HTML时说过，有个Style标签是在CSS里用的，是的，在HTML中添加CSS样式必须要用到Style，在标签里单独定义标签属性时用的是Style属性。上一节我们也说过，先不用管那个Style标签，那么这一节，我们就单独来解决这个Style标签。

看一看帮助文档，他是怎么说Style的，指定页面的样式表，Style 元素只能在 HTML 文档的 Head节内使用，那么究竟该怎么指定呢？

有三种方式，看下图：

最常用的要数第一层，外部引用，这样的化程序员和美工设计者分工非常明确，便于分开操作，也可以增加代码的复用性，后来需要补充的属性可以页面嵌入，很少用内联的形式。其实除了外部引入方式，我们没有接触过，页面嵌入和内联形式都接触过了，就再都介绍介绍吧。

1. 内联引入

思想：通过标签的Style属性设置当前标签的样式。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
 
<body>
 
<table align= "center" border= "10px" bordercolor= "#0000FF" cellspacing= "0" >
 
< caption >DHTML技术</ caption >
 
<tr style="background-color:#FF0000; font-size:18px"> <th>名称</th><th>HTML</th><th>CSS</th><th>JavaScript</th><th>DOM</th><th>Jquery</th><th>Ajax</th></tr>
<tr style= "background-color:#00FF00; font-size:36px" ><td>难易程度</td><td>非常容易</td><td>特别容易</td><td>比较容易</td><td>较容易</td><td>容易</td><td>相当容易</td></tr>
<tr style= "background-color:#FF0000; font-size:18px" ><td>独立新技术</td><td>是</td><td>是</td><td>是</td><td>是</td><td>否</td><td>否</td></tr>
<tr style= "background-color:#00FF00; font-size:36px" ><td>深度要求</td><td>很深</td><td>深一点</td><td>更深一点</td><td>深</td><td>较深</td><td>最深</td></tr>
<tr style= "background-color:#FF0000; font-size:18px" ><td>是否学过</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
</table>
</body>
</html>

红色的代码是嵌入在tr标签内，输入内联形式。

2. 页面嵌入

思想：在Head标签内定义选择器，美化当前页面。

例子：

1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style type=
"text/css"
>
div{
background
:
#00ff00
}
.Waring{
background
:
#ff0000
;
cursor
:
help
}
#OnePerson{
font-size
:
36px
;
color
:
#F0F
}
</style>
</head>
 
<body>
<div>半路</div>
<hr/>
<p class=
"Waring"
>薛凯琪</p>
<hr/>
<input id=
"OnePerson"
type=
"text"
value=
"一个人失忆" 
/>
 
 
</body>
</html>

 

这回懂了上一节的遗留问题，其实看看就能知道，太简单了。

3. 外部引入

思想：单独建立一个Css文件，在Css文件中写Css代码样式，在HTML代码中通过Link标签导入，效果和页面嵌入一样。

例子：

Css文件名css1.css，文件代码：

p{ font-size:24px;color:#00ff00}

div{font-size:xx-large;background-color:#F0F;color:#FFF}

a:active{color:Green}

a:hover{cursor:move}

a:link{color:Red}

a:visited{color:#FF0}

HTML页面代码：

<html>

<head>

<link type="text/css"rel="Stylesheet" href="css1.css"/>

</head>

<body>

<div>如烟</div>

<hr/>

<p class="Waring">五月天</p>

<hr/>

<a href="www.baidu.com">百度首页</a>

</body>

</html>

Css文件代码和页面嵌入类型代码格式一样。注意link标签的引入。

按照我的进度，今天应该是CSS的最后一节了，下一节将介绍JavaScript，JavaScript在目前非常火，具有跨平台性，甚至因为JavaScript技术诞生出好多综合技术，相当了得，敬请期待下一节吧。

DHTML【8】--CSS的更多相关文章

  1. DHTML【6】--CSS

    从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网.网易首页等网站都非常好看,那都是一些 ...

  2. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  3. 【10】css hack原理及常用hack

    [10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...

  4. 【01】CSS规范

    [01]CSS规范 []https://drafts.csswg.org/indexes/(下图)   https://www.w3.org/TR/2011/REC-CSS2-20110607/   ...

  5. 【04】 CSS开发注意事项

    [04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系 ...

  6. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

  7. 【荐】CSS实现漂亮实用带箭头的流程图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  9. 【经验】css

    1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...

随机推荐

  1. (转)最近研究xcodebuild批量打包的一些心得

    以前的时候只知道做安卓开发的兄弟挺辛苦的,不但开发的时候要适配一堆的机型,好不容易开发完了还要打一堆不同的包给不同的市场.没想到现在这些市场都开辟iOS市场,于是需要打一堆的包给不同的市场,面对暂时给 ...

  2. javascript实现限制上传文件的大小

    目录 基本思路 示例 [一].基本思路 在FireFox.Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大 ...

  3. 怎样修复“Windows/System32/Config/System中文件丢失或损坏”故障

    怎样修复“Windows/System32/Config/System中文件丢失或损坏”故障 英文原文引自 http://xphelpandsupport.mvps.org/how_do_i_repa ...

  4. 全文搜索-介绍-elasticsearch-definitive-guide翻译

    全文搜索 我们通过前文的简单样例,已经了解了结构化数据的条件搜索:如今.让我们来了解全文搜索-- 如何通过匹配全部域的文本找到最相关的文章. 关于全文搜索有两个最重要的方面: 相似度计算 通过TF/I ...

  5. poj 3181 Dollar Dayz (整数划分问题－－－递归＋ＤＰ)

    题目:http://poj.org/problem?id=3181 思路:将整数N划分为一系列正整数之和,最大不超过K.称为整数N的K划分. 递归:直接看代码: 动态规划:dp［i］［j］:＝将整数i ...

  6. cocos2d-x CCAction(转载)

    接触开发2d后,越来越多的用到动作的内容,看到一篇关于动作比较完整的文章,最主要的是动作的类图,从类图可以更加的理解各个类之间的继承的关系,以及使用更容易的去应用 . 文章有一些方法已经被修改了,现在 ...

  7. SQL2008安装重启失败

    我今天安装SQL2008的一些问题经历SQL2008安装重启失败大致出错信息如下:RebootRequiredCheck 检查是否需要挂起计算机重新启动.挂起重新启动会导致安装程序失败. 失败 需要重 ...

  8. ASP.NET 获取IP信息等探针

    获取客户端:HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"]: 获取URL Request.RawUrl:获取客 ...

  9. displaytag 添加超链接

    方法1:在<display:column>中使用属性autolink="true",不过这条属性只对两种情况起作用:网址和邮箱,如果只是普通字符串,那么还是普通字符串, ...

  10. oracle nvl()函数在使用中出现的问题

    看一条sql select q.*, r.goods_name from (select nvl(t.goods_code, s.goods_code) goods_code, t.buy_open_ ...