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>



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

时间: 2024-10-03 01:28:10

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

【06】链接的四种状态

链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 魔芋:记忆技巧 love hate link visited hover active 设置链接样式,必须按照这样的顺序设定,否则肯定在某些浏览器上效果不一样. ** 原文地址:https://www.cnblogs.com/moyuling/p/9030699.html

a链接的四种状态

四种状态:hover.link.active.visible a:link{color:#fff;} a链接初始化 a:hover{color:yellow;} 把鼠标放上去的状况 a:active{color:pink;} 触发时候的状态,按下去不松开的情况 a:visited{color:green;} 访问后的情况

html 链接的四种状态

Link.此时,链接就在那儿等着用户点击. Visited.用户此前点击过这个链接. Hover.鼠标指针正悬停在链接上. Active.链接正在被点击(鼠标在元素上按下,还没有释放) 以下就是这些状态对应的4个伪类选择符(使用了a选择符和一些示例声明): a:link {color:black;} a:visited {color:gray;} a:hover {text-decoration:none;} a:active {color:red;} 备注:由于这 4 个伪类的特指度(本章后面

css设置链接&lt;a&gt;四个状态代码实例

css设置链接<a>四个状态代码实例:本章节介绍一下如何设置链接<a>四个状态,因为默认状态下的链接状态在实际应用中可能无法完全满足我们的需要,下面先介绍链接a有哪四个状态.1.默认状态,也就是没有进行任何操作的状态,对应的css代码是a:link.2.鼠标悬浮状态,也就是当鼠标放在链接上时候的状态,对应的css代码是a:hover.3.鼠标按下状态,这个时候鼠标在连接上已经按下,但是还没有松开的状态,对应的css代码是a:active.4.鼠标点击过的状态:也就是鼠标点击过链接并

css中按钮的四种状态

css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框 下面的例子中.btn1用focus按钮会按下,不弹起 .btn2用active按钮点击按下,会弹起 <button class="btn btn1">Save Settings</button> <button class="btn bt

&gt;hibernate的四种状态

hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数据库中有相对应的记录 该状态有两个特点①有OID      ②对对象的修改会同步到数据库中 3.游离状态 数据库中有相对应的记录,该对象不再session的管理中,修改此对象时,该数据库不会有变化 4.删除状态 执行了delete()方法的对象,最后被回收

Java多线程(4)----线程的四种状态

与人有生老病死一样,线程也同样要经历开始(等待).运行.挂起和停止四种不同的状态.这四种状态都可以通过Thread类中的方法进行控制.下面给出了Thread类中和这四种状态相关的方法. 1 // 开始线程 2 public void start( ); 3 public void run( ); 4 5 // 挂起和唤醒线程 6 public void resume( ); // 不建议使用 7 public void suspend( ); // 不建议使用 8 public static v

java线程四种状态

一个线程可以有四种状态: 1.新(new), 即线程刚刚创建,而并未执行 2.可运行(runnable),意味着一旦时间分片机制有空闲的CPU周期提供给一个线程,那个线程便可立即开始运行.因此,线程可能在.也可能不在运行当中,但一旦条件许可,没有什么能阻止它的运行——它既没有“死”掉,也未被“堵塞”. 3.Dead,从自己的run()方法中返回后,一个线程便已“死”掉.亦可调用 stop()令其死掉,但会产生一个违例——属于Error的一个子类(也就是说,我们通常不捕获它).记住一个违例的“掷”

div与css结合的四种方式

第一种方式:               <div style=" background-color:#00ff00;font-size: 20px"> 第一种方式</div >               缺点:这种方式暴露的缺点是 代码严重重复. 第二种方式: 格式:标签名{                     属性一:属性值:                     属性二:属性值:                     ...