zoukankan      html  css  js  c++  java
  • css基础知识

    一、CSS的四种实现方式:

    1.内嵌式:
    <style type="text/css">
    <!--
    CSS代码段
    -->
    </style>

    2.外链式:
    <link href="*.css" rel="stylesheet" type="text/css">

    3.导入式
    <style type="text/css">
    <!--
    @import url("*.css");
    -->
    </style>

    3.属性式:
    <div style="position:absolute; 200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>


    二.CSS的定义:
    选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
    如:
    td{font-size:12px;color:#FFFF00}
    .myname{font-size:12px;color:#FFFF00}
    a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}


    三.四种选择对象

    1.HTML selector (TagName)
    2.class selector (.NAME)
    3.ID selector (#IDname)
    4.特殊对象 (a:hover a:link a:visited a:active)


    1.HTML selector
    HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。

    例:
    <html>
    <head>
    <title>第七频道 CSS教程 作者:幻影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    td
    {
    color: #FF0000;
    }
     

    -->
    </style>
    </head>
    <body>
    <table width="300" border="0">
      <tr>
        <td>第七频道 CSS教程</td>
      </tr>
      <tr>
        <td>第七频道</td>
      </tr>
    </table>
    </body>
    </html>

    注意:在<TD>中没有应用什么,其中文字自动变红色。

    2.class selector
    定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。

    例:
    <html>
    <head>
    <title>第七频道 CSS教程 作者:幻影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    .fontRed
    {
    color: #FF0000;
    }

    -->
    </style>
    </head>
    <body>
    <table width="300" border="0">
      <tr>
        <td class="fontRed">第七频道</td>
      </tr>
      <tr>
        <td>第七频道</td>
      </tr>
    </table>
    </body>
    </html>

    注意:在第二个<TD>中没有“class="fontRed"”,所以文字没有变红色。

    3.ID selector
    定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。

    例:
    <html>
    <head>
    <title>第七频道 CSS教程 作者:幻影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    #fontRed
    {
    color: #FF0000;
    }

    -->
    </style>
    </head>
    <body>
    <table width="300" border="0">
      <tr>
        <td ID="fontRed">第七频道</td>
      </tr>
      <tr>
        <td>第七频道</td>
      </tr>
    </table>
    </body>
    </html>

    注意:在第二个<TD>中没有“ID="fontRed"”,所以文字没有变红色。

    4.特殊对象
    特殊对象包括四种,是针对链接对象设置的:
    a:hover 鼠标移上时的超链接
    a:link 常规,非访问超链接
    a:visited 访问过的超链接
    a:active 鼠标点击时的超链接

    特殊对象的作用范围是所有<a>置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。

    例:
    <html>
    <head>
    <title>第七频道 CSS教程 作者:幻影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    a
    {
    color: #FF0000;
    }
    a:hover
    {
    color: #0000FF;
    text-decoration: underline;
    }

    -->
    </style>
    </head>
    <body>
    <table width="300" border="0">
      <tr>
        <td><a href=
    http://www.channel7.con>第七频道</a></td>
      </tr>
      <tr>
        <td>第七频道</td>
      </tr>
    </table>
    </body>
    </html>
    注意下面,很有用!!!
    a.classname:hover
    a#IDname:hover
    这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的<a>置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。


    四.应用:
    1.置标符 自动应用
    2.特制类 class="NAME"
    3.ID   ID="IDname"
    4.特殊对象 自动应用


    五.CSS属性
    CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

    CSS属性参考:http://www.channel7.cn/2005/6-25/141521.html

    最后最需要的可能就是一个完整的CSS应用的例子了。我这里没有给。因为随便打开一个网页的源代码,例子随处可见。

  • 相关阅读:
    Qt共享内存实现进程间通信(QSharedMemory)
    Qt5.5制作简单的屏幕截图程序
    006--C++动态内存(简介)
    005--C++字符
    004--C++11的初始化方式
    003--sizeof的使用
    002--C++程序的创建
    001--基础知识准备
    Qt5.5连接MySQL
    vue-cli中如何创建并引入自定义组件
  • 原文地址:https://www.cnblogs.com/sutengcn/p/206593.html
Copyright © 2011-2022 走看看