DHTML【8】--CSS

最新推荐文章于 2021-08-03 18:36:01 发布

苍穹0113

最新推荐文章于 2021-08-03 18:36:01 发布

阅读量1.3k

点赞数

分类专栏：【DHTML】 DHTML基础文章标签： CSs与HTML结合方式

本文链接：https://blog.csdn.net/jhq0113/article/details/9794651

版权

DHTML基础同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

【DHTML】

11 篇文章 0 订阅

订阅专栏

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

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

有三种方式，看下图：

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

1. 内联引入

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

例子：

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

例子：

 
      <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>

</head>

<body>

<hr/>

<hr/>

</body>

</html>

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

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

苍穹0113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
DHTML【8】--CSS

在讲HTML时说过，有个Style标签是在CSS里用的，是的，在HTML中添加CSS样式必须要用到Style，在标签里单独定义标签属性时用的是Style属性。上一节我们也说过，先不用管那个Style标签，那么这一节，我们就单独来解决这个Style标签。看一看帮助文档，他是怎么说Style的，指定页面的样式表，Style 元素只能在 HTML 文档的 Head节内使用，那么究竟该怎么指定
复制链接

扫一扫