一、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：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>CSS链接状态</title>

     <style type="text/css">

         a:link,a:visited{

             color:#609;

             text-decoration:none;   //去掉下划线

         }

         a:hover,a:active{

             color:#C00;

             text-decoration:underline;

         }

     </style>

 </head>

 <body>

     <a href="http://www.baidu.com">百度一下，你就知道！</a><br />

     <a href="http://www.jikexueyuan.com">学知识就到极客学院！</a>

 </body>

 </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来代替**

HTML5样式和列表、CSS链接的四种状态的更多相关文章

  1. CSS控制a标签链接的四种状态

    /*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...

  2. ccs中a链接的四种状态

    什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.而在一个网页中 ...

  3. a链接的四种状态

    四种状态:hover.link.active.visible a:link{color:#fff;} a链接初始化 a:hover{color:yellow;} 把鼠标放上去的状况 a:active{ ...

  4. CSS超链接常见四种状态在控制

    一.首选设置一下以下4种状态常: 1.a:active是超级链接的初始状态 2.a:hover是把鼠标放上去时的状况 3.a:link 是鼠标点击时 4.a:visited是访问过后的情况.

  5. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  6. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  7. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

  8. >hibernate的四种状态

    hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...

  9. Hibernate的session缓存和对象的四种状态

    一.session缓存 说session缓存就得说到JAVA对象的生命周期,当没有任何引用指向一个对象时,对象则可以被gc回收,也就是生命周期结束了 而hibernate获取一个对象后,会将对象存入s ...

随机推荐

  1. JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈

    toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种 ...

  2. [iOS] UIImage和CGImageRef

    CGImageRef并不是面向对象的API,也不是类,只是一个指针类型,Quartz 2D对CGImageRef的定义为: typedef struct CGImage *CGImageRef; 由此 ...

  3. Catalan数 && 【NOIP2003】出栈序列统计

    令h(1)=1, h(0)=1,catalan数满足递归式: h(n)=h(0)*h(n-1)+h(1)*h(n-2)+...+h(n-1)h(0) (n>=2) =C(2n, n)/(n+1) ...

  4. 从prompt输入10个人的年龄放入数组，将十个人的年龄求总和。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. php+mysql分页优化版

    <?php include('conn/conn2.php'); $pagesize=5; $url=$_SERVER["REQUEST_URI"];//取当前url路径 $ ...

  6. mysql insert插入新形式，再也不需要拼接多重insert啦

    注意一下,不能省略表中的任何字段.包括自增id.而且字段的顺序必须和插入表一致 原理是“表插表” INSERT INTO prod_attr select A.* from ( SELECT AS p ...

  7. 《GK101任意波形发生器》任意波文件格式说明

    详见PDF 文档: http://files.cnblogs.com/xiaomagee/GK101%E4%BB%BB%E6%84%8F%E6%B3%A2%E6%95%B0%E6%8D%AE%E6%A ...

  8. 【Fate/kaleid liner 魔法少女☆伊莉雅】系列中实践的、新世代的动画摄影工作流

          通常的日本动画的摄影中,是以追加Cell(celluloid 赛璐珞)与背景的合成滤镜处理为主,而在[Fate/kaleid liner 魔法少女☆伊莉雅]系列的,加入了自己使用3DCG软 ...

  9. ThinkPHP 3.2 版本升级了哪些内容

    ThinkPHP 3.2 版本升级了哪些内容           ThinkPHP 3.2发布了挺长时间了,这里也总结下这次ThinkPHP 3.2到底发生了哪些变化,方便程序员们进行开发. 前言 T ...

  10. javaWeb中struts开发——Logic标签

    1.Struts标签的logic标签 Logic标签是逻辑标签,是Struts中比较重要的标签,完成各种逻辑运算操作,可以直接支持全局调转. 2.1<logic:present><l ...