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:
<!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链接的四种状态的更多相关文章
- CSS控制a标签链接的四种状态
/*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...
- ccs中a链接的四种状态
什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.而在一个网页中 ...
- a链接的四种状态
四种状态:hover.link.active.visible a:link{color:#fff;} a链接初始化 a:hover{color:yellow;} 把鼠标放上去的状况 a:active{ ...
- CSS超链接常见四种状态在控制
一.首选设置一下以下4种状态常: 1.a:active是超级链接的初始状态 2.a:hover是把鼠标放上去时的状况 3.a:link 是鼠标点击时 4.a:visited是访问过后的情况.
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- css中按钮的四种状态
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...
- HTML与CSS结合的四种方式
HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...
- >hibernate的四种状态
hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...
- Hibernate的session缓存和对象的四种状态
一.session缓存 说session缓存就得说到JAVA对象的生命周期,当没有任何引用指向一个对象时,对象则可以被gc回收,也就是生命周期结束了 而hibernate获取一个对象后,会将对象存入s ...
随机推荐
- 【BZOJ】1084: [SCOI2005]最大子矩阵(DP)
http://www.lydsy.com/JudgeOnline/problem.php?id=1084 有一个1A--- 本题没看懂,,不会啊囧..感觉完全设不了状态..看了题解,囧,m<=2 ...
- tableviewCell折叠状态3
// // LHQDelegateModel.h // 11 - 投资管理 - 李洪强 // // Created by vic fan on 16/4/13. // Copyright © ...
- SQL Server 中的游标(cursor)
http://www.cnblogs.com/Dlonghow/archive/2009/05/14/1456910.html 在数据库中,游标是一个十分重要的概念.游标提供了一种对从表中检索出的数据 ...
- Using pg_dump restore dump file on Odoo
pg_restore -C -d postgres db.dump
- ThinkPHP几个配置文件的位置
1.常用的ThinkPHP\Conf\convention.php 2.ThinkPHP/Lib/Behavior/ParseTemplateBehavior.class.php模板引擎相关配置
- php读取3389脚本
<?php $regkey = 'HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Td ...
- IP地址在数据库里面的存储方式
大多数公司的表结构都需要经过DBA进行审核,有时候你会看到存储IP地址采用varchar(15),这种方式都是传统的做法,这种方法需要占用15个字节,那么有更省空间的做法么?肯定是有的,那就是用int ...
- 如何在64位windows7上同时使用32位和64位的Eclipse
我用的是64位的windows7旗舰版,jdk1.7 64位机器上可以同时运行32位和64位的Eclipse,但是电脑中必须有相应的jdk.Eclipse虽然不需要安装,但是在启动时会检查系统中固定文 ...
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [2] 首页 APP 接口开发方案 ① 读取数据库方式
方案一:读取数据库方式 从数据库读取信息→封装→生成接口数据 应用场景: 数据时效性比较高的系统 方案二:读取缓存方式 从数据库获取信息(第一次设置缓存或缓存失效时)→封装(第一次设置缓存或缓存失效时 ...
- 那么都数据库表,那么多不同记录。是怎样都存储在一个key-value数据库的?
那么都数据库表,那么多不同记录.是怎样都存储在一个key-value数据库的? :设置不同的键值而已!不同的表,选出统一的key规范 jedis.sadd("tom:friend:list& ...