• HTML5样式和列表、CSS链接的四种状态


    一、HTML5样式

    1、标签:

      <style>:样式定义;

      <link>:资源引用;

    2、属性:

      type="text/css":引入文档类型;

      rel="stylesheet":外部样式表;

    3、四种样式表插入方法:

      (1)外部样式表:

        在<head></head>中写入:

          <link  rel="stylesheet"  type="text/css"  href="...">      //href标签处引入文档的地址

      (2)内部样式表:

        在<head></head>中写入:

          <style  type="text/css">//这里用来编写样式</style>

      (3)内联样式表:

        直接在标签内部写入,例如:

          <p style="color:red">XXX</p>

      (4)导入样式:

        导入样式有6种写法:

    @import mystyle.css;
    @import 'mystyle.css';
    @import "mystyle.css";
    @import url(mystyle.css);
    @import url('mystyle.css');
    @import url("mystyle.css");

      导入样式要写在<head></head>标签的<style>标签里面。而且必须将@import导入样式放在其他定义的样式前面。

      (4)样式优先级:

       行内样式>内嵌样式>外部样式


    二、HTML5列表

    标签 描述
    <ol> 有序列表
    <ul> 无序列表
    <li> 列表项
    <dl> 自定义列表
    <dt> 自定义列表项
    <dd> 描述

      1、无序列表:

        使用标签:<ul>、<li>;属性(type):disc(默认的实体圆)、circle(空心圆)、square(实体方块)、none(什么都没有)

         **若想去掉列表前面的圆点,还可用CSS样式:list-style-type:none**

      2、有序列表:

        使用标签:<ol>、<li>;属性(type):A、a、I、i、start

      3、自定义列表:

        使用标签:<dl>、<dt>、<dd>     (<dialog>与<dt>、<dd>一起使用表示对话)


    三、CSS链接的四种状态

      一般用<a>标签表示链接,可以嵌入<href>表示跳转地址,其中<href="#">表示跳转到自己

      链接有如下四种状态:

        1、a:link    普通的、未被访问的链接

        2、a:visited    用户已访问的链接

        3、a:hover     鼠标指针位于链接的上方

        4、a:active     链接被点击的时刻

      eg:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>CSS链接状态</title>
     6     <style type="text/css">
     7         a:link,a:visited{ 
     8             color:#609;
     9             text-decoration:none;   //去掉下划线
    10         }
    11         a:hover,a:active{ 
    12             color:#C00;
    13             text-decoration:underline;
    14         }
    15     </style>
    16 </head>
    17 
    18 <body>
    19     <a href="http://www.baidu.com">百度一下,你就知道!</a><br />
    20     <a href="http://www.jikexueyuan.com">学知识就到极客学院!</a>
    21 </body>
    22 </html>

        效果:

      另外,<a>中还有<target>属性,用来规定在何处打开链接:

        (1)target="_blank":以前页面任然存在,在新的页面打开

        (2)target="_self":在当前页面打开

        (3)target="_parent":在父级空间打开

        (4)target="_top":在顶级页面打开

      (3)(4)是<iframe>配合<a>标签的使用效果

      

      **<a>中还有name 属性,name 属性规定锚(anchor)的名称。可以使用 name 属性创建 HTML 页面中的书签,name可以用id来代替**

  • 相关阅读:
    USTC 软硕讯飞班参考资源
    nginx 负载均衡
    Meidawiki 配置
    10 款实用的jquery插件
    Mongodb 定时释放内存
    互联网产品精神解读
    简单的缓冲区溢出实验
    fatal error C1902: 程序数据库管理器不匹配;请检查安装解决
    C#的override、new、vitutal一例
    SQL Server 2008导入、导出数据库
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/4992875.html
Copyright © 2020-2023  润新知