样式表style

制作一个风格统一的网页，需要样式表对颜色、字体等属性的规范，同时也省去在body中多次定义的麻烦，所以一个样式表是必不可少的。

样式表有两种引用的方法：一种是直接写在html的<head>中，另一种是引用外部的.css文件。

第一种方法的使用（样式表选择器）

首先在head中用style标签声明

<style type="text/css">样式表内容</style>

1、用标签定位元素，设置属性

body
{
     background-color:#CC0;
     background-image:url(../../xxx.jpg);<!--"(../../)"表示在html文件所在的文件夹的上两级-->
     background-repeat:no-repeat;
}
table
{
     background-image:url(../../xxx.jpg);
     background-repeat:repeat;
}

2、自定义名：（1）给样式组设置一个自定义名字，然后在<body>的标签中运用

.ming
{
     background-image:url(../../xxx.jpg);
     background-repeat:no-repeat;
     background-size:contain
}
<body class="ming">
<table class = "ming"></table>
</body>

（2）"标签名 .自定义名"（只能在标签内使用，标签名和“.自定义名”之间有一个空格）

table .ming
{
     color:#3F0;
}
<body>
    <table class = "ming"></table>
    <font class = "ming"></font><!--此处是不能调用的-->
</body>

（3）、".自定义名 标签"（自动寻找在“.自定义名”后存在标签的部分并赋给它样式）

.ming font
{
     font:"华文彩云";
}
<body>
  <table class = "ming">
    <tr>
    <td>
         <font>我会变色</font>
    </tr>
    </td>
    <tr>
    <td>
         <button>我不会变色</button>
    </tr>
    </td>
  </table>
</body>

 

3、通过id值查找适合的元素：#id（在#后加上ID值，可以对此ID所在的元素单独设置）[#id也同样可以用自定义名的几种方法]

#id1
{
     color:#3F0;
}
<body>
         <table>
              <tr>
              <td> 
                    <input type="text"  id="id1" />
               </td>
               </tr>
         </table>
</body>

选择器优先级：

   ID>class名>标签

 

第二种方法的使用（CSS）

导入：

    在html文件的<head>中：<link rel=”stylesheet” href=”xxx.css”>

链接的style：

  a:link 超链接被点前状态

  a:visited 超链接点击后状态

  a:hover 悬停在超链接时

  a:active 点击超链接时

  在定义这些状态时，有一个顺序l v h a