DHTML【8】--CSS

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

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

有三种方式，看下图：

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

1.内联引入

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

例子：

<html>

<head>

</head>

<body>

<tableborder="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标签内定义选择器，美化当前页面。

例子：

<html>

<head>

div{ background:#00ff00}

.Waring{ background:#ff0000; cursor:help}

#OnePerson{font-size:36px;color:#F0F}

</style>

</head>

<body>

<hr/>

<hr/>

</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>五月天</p>

<hr/>

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

</body>

</html>

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

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

转载于:https://blog.51cto.com/jhq0113/1265397

DHTML【8】--CSS相关推荐

DHTML【7】--CSS
本节将要介绍CSS的选择器,CSS有三种常用的选择器,还有三种扩展选择器,说到选择器,那么选择器是做什么用的呢? 上一节我们介绍CSS常用属性的时候,我们都是通过在标签内定义Style属性来介绍的,但 ...
DHTML【6】--CSS
从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网.网易首页等网站都非常好看,那都是一些 ...
【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
html多重边框，中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
【CSS】【14】CSS中使用背景图像
默认情况下背景图像会自动向水平和竖直两个方向平铺,如果不希望不平铺,或者只希望沿一个方向平铺,可以使backgroud-repeat属性来控制,该属性可以取以下4种之一 repeat:沿水平和竖直两个 ...
【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
【CSS】【7】CSS的盒子模型
一.margin与padding的区别: 当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图: 这里单独地把一个盒子拿出来,就会发现由外边距.边框.内边距和 ...
【18】CSS基础(3)——理解层叠式
本篇学习目标: 理解CSS的层叠式(层叠式包含继承性和层叠性)比较重点 CSS 的概念回顾:点击查看 ★CSS:cascading style sheet层叠样式表,是一种用来表示HTML样式的计算机 ...
【聊一聊】css中的经典布局——双飞翼布局
上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...

DHTML【8】--CSS

DHTML【8】--CSS相关推荐

最新文章

热门文章