CSS的学习

来源:互联网 发布:淘宝店铺导航条隐藏 编辑:程序博客网 时间:2024/05/16 10:41


加载CSS样式的方式
1.head内引用
<style type="text/css">
  选择符{属性:值;属性:值;}
</style>


<html>
  <head>
    <style type="text/css">
      h1{color:green;font-size:37px;}
      p{background:yellow;}
    </style>
  </head>
  <body>
     <h1>南昌大学计算机</h1><br>
     <p>南昌大学计算机</p>
   </body>
</html>

2.body内引用


<html>
  <body>
    <h1 style="color:green;font-size:37px;">南昌大学计算机</h1>
    <p style="background:yellow;">南昌大学计算机</p>
  </body>
</html>


3.文件外引用
css文件中编写样式
然后在html里的head导入CSS文件
1.<link rel=stylesheet href="mystyle.css" type="text/css">

2.
<style type="text/css">
   @import url(mystyle.css);
</style>


h1{color:green;font-size:37px;}
p{background:yellow;}


<html>
  <head>
    <link rel=stylesheet href="mystyle.css" type="text/css">
  </head>
  <body>
     <h1>南昌大学计算机</h1>
     <p>南昌大学计算机</p>
  </body>
</html>


<html>
  <head>
    <style type="text/css">
      @import url(mystyle.css);
    </style>
  </head>
  <body>
    <h1>南昌大学计算机</h1>
    <p>南昌大学计算机</p>
  </body>
</html>


CSS与标记对应有方式
1.标记选择符

<h1 style="color:green;font-size:37px;">南昌大学计算机</h1>
<p style="background:yellow;">南昌大学计算机</p>

2.类选择符

<html>
  <head>
    <style type="text/css">
      .littlered{color:red;font-size:18px;}
      .littlegreen{color:green;font-size:18px;}
    </style>
  </head>
  <body>
    <div class="littlered">这是红色的,而且比较小!</div>
    <span class="littlegreen">这是绿色,而且比较小!</span>
  </body>
</html>

3.id选择符

<html>
  <head>
     <style type="text/css">
        #szg{color:red}
     </style>
   </head>
   <body>
     <p id=szg>这是ID选择符号!</p>
   </body>
</html>

 

定义超链接样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
a:link{color:red;font-size=9px; text-decoration:none}
a:visited{color:green;font-size=9pt;text-decoration:none}
a:hover{color:#FF33CC;font-size=15pt;text-decoration:underline}
</style>
</head>

<body>
 <a href="#">这是超链接
 </a>
</body>
</html>