我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > Html/Css > 使用CSS的基础实例
热门文章排行
热门文章排行 用CSS美化你的网页(11-24)
妙运用CSS样式表立刻改变鼠标的样式(12-07)
背景图的详细设定(12-07)
让字体美起来 (1)(10-21)
Xhtml(5):head区的其他设置(10-13)
精采文章排行
精采文章排行 HTML中meta作用(11-01)
奇妙的文字图形 font-family的非常用(11-01)
css网页设计技巧(11-01)
CSS制作的阴影链接文字(11-01)
CSS实现当前页的滑动门菜单效果方法(11-01)
技术专题推荐
网管论坛交流
 

使用CSS的基础实例 

作者:   来源:网页教学网   点击:   日期:2006-10-13

我们现在设计网页都要使用CSS了,今天在这个教程中给大家以实例的形式教给大家如何使用CSS,通过四个例子来说明CSS的使用!通过这个教程中的四个实例让大家理解在HTML中加入CSS之后,CSS在什么时候起作用?以及不加CSS会如何显示。激起你学习CSS的兴趣。

  首先我们先建立一个CSS文件,打开我们的记事本,然后输入下面的内容:

  p
  {
    color: #ff0000;
    background: transparent;
  }

  然后保存为style1.css(在这个CSS文件中我们定义p标签的的风格为红色、背景透明)

  实例1:把下列文件保存为.htm文件,注意要和style1.css保存在同一目录中。

  <html>
  <head>
    <title>网页教学网实例教程1</title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      p
      {
        color:#00ff00;
        background:transparent;
      }
    </style>
  </head>
  <body>
    <p style="color:#0000ff;background:transparent;">兰色文本显示  </p>
  </body>
  </html>

  实例2:

  <html>
  <head>
    <title>网页教学网CSS实例2</title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      p
      {
        color:#00ff00;
        background:transparent;
      }
    </style>
  </head>
  <body>
    <p>绿色文本显示</p>
  </body>
  </html>

  实例3:

  <html>
  <head>
    <title>网页教学网CSS实例3</title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p>红色文本显示</p>
  </body>
  </html>

  实例4:

  <html>
  <head>
    <title>网页教学网CSS实例4</title>
  </head>
  <body>
    <p>默认的浏览器显示的文本</p>
  </body>
  </html>

  通过以上四个实例大家理解CSS的定义,在什么地方起作用等问题。



文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·10个你未必知道的CSS技巧 ·Html网页页面head区规范知识
·引入CSS样式的五种方式 ·网页设计中HTML常犯的五个错误
·HTML小技巧 ·web标准化 用CSS定义标题的几个实例

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。