一、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. 移动前端调试方案（Android + Chrome 实现远程调试）

    一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在p ...

  2. CCSpriteBatchNode的优化性能

    当将大量精灵加载到CCLayer时,如果直接利用[self addChild:sprite]去加载,每加载一个精灵,都必须open,draw,close, 而利用 CCSpriteBatchNode去 ...

  3. 【wikioi】1010 过河卒

    题目链接 算法:DFS+剪枝 14.01.02 PS: 递推应该也可以的,改天看看 刚开始最容易想到的是朴素搜索 #include <iostream> using namespace s ...

  4. UiAutomator 测试工程开发小结

    一.    关于bundle无法导入中文参数 答:    将文件改为UTF-8格式 二.    关于对无法抓取的控件进行快速输入问题 答:    主要通过pressKeyCode方法,首先将光标锁定在 ...

  5. mongodb与mysql命令对比

    mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...

  6. Winform窗体事件发生顺序

    Form 和Control 类公开了一组与应用程序启动和关闭相关联的事件.当Windows 窗体应用程序启动时,主窗体的启动事件按以下顺序引发: System.Windows.Forms.Contro ...

  7. Medical Image Processing Conference and Journal 医学图像处理会议与期刊

    会议: Information Processing in Medical Imaging,IPMI IPMI2013 International Conference on Medical Imag ...

  8. Apache开启不了------The requested operation has failed!

    1.这个问题通常是由于端口被占用了,cmd输入netstat -ano查看端口号,根据端口号80的程序的pid在任务管理器下杀掉它. 2.我遇到这个问题不是这个原因.我由于刚配置了虚拟目录.查看虚拟目 ...

  9. MongoDB空间整理

    测试环境:192.168.1.55,单机数据量: 4千万左右.测试:db.repaireDatabase效果db.compact 效果通过stats命令获取该数据库的相关信息:db.stats() { ...

  10. Solve one floodlight install problem

    参考: Floodlight安装 SDNLAB Floodlight官网 Installation Guide 问题: 在follow安装教程安装Floodlight的过程中,ant编译时出现了: [ ...