一、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. BZOJ 1036 && 树链剖分

    还是太弱啊..各种数据结构只听过名字却没有一点概念..树链剖分也在这个范畴..今天来进一步深化一下教育改革推进全民素质提高. 性质 忘了在哪里看到的一篇blog有一句话讲得非常好,树链剖分不是一种数据 ...

  2. Servlet的生命周期，并说出Servlet和CGI的区别，Servlet与JSP的区别

    一.Servlet 生命周期 1.加载 2.实例化 3.初始化 4.处理请求 5.销毁 二.Servlet与cgi的区别: Servlet处于服务器进程中,它通过多线程方式运行其service方法,一 ...

  3. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  4. 用特征来实现混入(mix-in)式的多重继承

    用特征来实现混入(mix-in)式的多重继承 Scala里相当于Java接口的是特征(Trait).Trait的英文意思是特质和性状(本文称其为特征),实际上他比接口还功能强大.与接口不同的是,它还可 ...

  5. FXK Javascript

    Javascript是一门神奇的语言,很不爽的一门语言,很纠结的一门语言. 以下内容,专业人士请不要看,只供像我一样的菜鸟参考. (1)Javascript找不到函数.明明已经引用了JS文件,却提示找 ...

  6. Javascript - 数组去重复

    这里我使用的场景是将表单中所有的input的值塞入数组中,然后通过去除重复的值.如果数组的长度和原数组的长度一致,说明没有重复,如果不一致(少于)则报错 //通过$.unique对数组进行“去重”,再 ...

  7. 初学者对Spring MVC的认识

    首先是要一定说明的是,这倒是说明是什么?对吧Spring MVC 是SpringFrameWork的后续产品,并且已经融入到Spring Web Flow中同时Spring MVC 分离了控制器,模型 ...

  8. JQuery文件上传插件uploadify在MVC中Session丢失的解决方案

    <script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...

  9. Javascript 笔记与总结（2-4）Javascript 内置对象

    ① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...

  10. P1541 乌龟棋

    30分做法,暴力枚举: #include <bits/stdc++.h> using namespace std; const int maxn = 400; int n, m; int ...