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

最新推荐文章于 2021-08-01 16:23:04 发布

aisijue2425

最新推荐文章于 2021-08-01 16:23:04 发布

阅读量624

点赞数 1

文章标签： xhtml

原文链接：http://www.cnblogs.com/jasmine-95/p/4992875.html

版权

一、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）内联样式表：

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

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

转载于:https://www.cnblogs.com/jasmine-95/p/4992875.html

aisijue2425

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5样式和列表、CSS链接的四种状态

一、HTML5样式1、标签：　　<style>:样式定义；　　<link>：资源引用；2、属性：　　type="text/css":引入文档类型；　　rel="stylesheet":外部样式表；3、四种样式表插入方法：　　（1）外部样式表：　　　　在<head></head>中写入：　　　　　　&l...
复制链接

扫一扫