精华内容
下载资源
问答
  • 第五天 超链接伪类

    2014-11-26 15:01:00
    今天我们开始学习《十天学会web标准(div+css)》超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一、超链接的四种样式 本来计划这节课放到第九章中讲解,但...

    http://www.aa25.cn/div_css/906.shtml

    今天我们开始学习《十天学会web标准(div+css)》超链接伪类,包含以下内容和知识点:

    • 链接的四种样式
    • 将链接转换为块状
    • 用css制作按钮
    • 首字下沉

    一、超链接的四种样式

    本来计划这节课放到第九章中讲解,但下边的章节都涉及到了,所以提前来学习一下,上节课讲解的内容比较多,这节课就少讲些,只要理解了伪类,就轻松多了。

    超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站。说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式:

    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

    以上分别定义了超链接未访问时的链接样式,已访问的链接样式,鼠标移上时链接样式和选定的链接样式。之所以称之为伪类,也就是说它不是一个真实的类,正常的类是以点开始,后边跟一个名称,而它是以a开始后边跟个冒号,再跟个状态限定字符;比如第三个a:hover的样式,只有当鼠标移动到该链接上时它才生效,而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高,比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的,设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。

    下面来做一个默认状态下是蓝色,鼠标放上是红色加下划线,选定(按下)时为紫色,已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容:

    <p><a href="#">这里是链接</a></p>
    <p><a href="10.html">这里也是链接</a></p>

    从上图中可以看出,插入的超链接默认是蓝色来下划线的,这是标签的默认样式所致,下来我们在css样式中定义

    设置完a:link的样式后,下面分别设置a:visited ,a:hover ,a:active的样式

    生成的源代码如下:

     


      提示:可以先修改部分代码后再运行


     注意:四种状态的顺序一定不能颠倒,否则有些不生效

     

    二、将链接转换为块级元素

    链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需增加一个display:block的css属性即可。

    a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

    这样设置的结果是全局a都执行这个样式显示,下面设置一下鼠标划过时 的状态,其它几种状态设置方法相同

     


      提示:可以先修改部分代码后再运行

     

     

    三、用css制作按钮

    学会了把超链接转换为块级元素,想制作个css按钮简直太简单了,只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解,设置最常用的默认样式和鼠标移上时的样式,如下图

    首先需要准备默认状态和鼠标划过状态的图片如下:

    修改之前的html如下,然后重新定义css样式:

    <p><a href="#">免费注册</a></p>

     


      提示:可以先修改部分代码后再运行

     

     

    本例中运用到了背景图片,有关背景图片的详细运用将在下一节中讲解,你也可以查看css样式表手册,首先了解下或者学习如下视频教程http://www.aa25.cn/div_css/895.shtml

    四、首字下沉

    首字下沉是css伪类上的又一个运用,它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式,而不需要把首字添加一个标签或通过程序来实现,今天以制作word里的首字下沉为例来讲解,应用如下伪元素:

    :first-letter

    在页面中添加如下一段内容,只用设置样式就可以实现首字下沉了:

    <p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构,网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>

    为了便于观察效果,我们设置p的样式如下:

    p { width: 400px; line-height: 1.5; font-size: 14px; }

    然后设置p:first-letter的样式

     


      提示:可以先修改部分代码后再运行

    转载于:https://www.cnblogs.com/shenming/p/4123276.html

    展开全文
  • CSS基础学习-列表和超链接伪类 列表 列表属性(list) 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position ...

    CSS基础学习-列表和超链接伪类

    列表

    列表属性(list)

    属性描述
    list-style简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image将图象设置为列表项标志。
    list-style-position设置列表中列表项标志的位置。
    list-style-type设置列表项标志的类型。
    marker-offset

    列表类型

    要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。
    例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。
    在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
    要修改用于列表项的标志类型,可以使用属性 list-style-type

    ul.a {
      list-style-type: circle;
    }
    ul.b {
      list-style-type: square;
    }
    ol.c {
      list-style-type: upper-roman;
    }
    ol.d {
      list-style-type: lower-alpha;
    }
    

    css

    list-style-type 属性

    描述
    none无标记。
    disc默认。标记是实心圆。
    circle标记是空心圆。
    square标记是实心方块。
    decimal标记是数字。
    decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
    lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin大写拉丁字母(A, B, C, D, E, 等。)
    hebrew传统的希伯来编号方式
    armenian传统的亚美尼亚编号方式
    georgian传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic简单的表意数字
    hiragana标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
    katakana标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
    hiragana-iroha标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
    katakana-iroha标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
    更多实例
    ### 列表项图像
    有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用list-style-image属性做到:
    ul li {list-style-image : url(xxx.gif)}
    

    只需要简单地使用一个 url() 值,就可以使用图像作为标志。

    css

    list-style-image 属性

    描述
    URL图像的路径。
    none默认。无图形被显示。
    inherit规定应该从父元素继承 list-style-image 属性的值。

    列表标志位置

    CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用list-style-position完成的。

    规定列表中列表项目标记的位置:

    ul
      {
      list-style-position:inside;
      }
    

    list-style-position 属性

    描述
    inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。
    outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
    inherit规定应该从父元素继承 list-style-position 属性的值。
    ### 简写列表样式
    为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,就像这样:
    li {list-style : url(example.gif) square inside}
    

    list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
    更多实例

    超链接

    设置链接样式

    链接可以使用任何 CSS 属性(例如 colorfont-familybackground等)来设置样式。
    实例

    css
    此外,可以根据链接处于什么状态来设置链接的不同样式。

    四种链接状态分别是:

    • a:link - 正常的,未访问的链接
    • a:visited - 用户访问过的链接
    • a:hover - 用户将鼠标悬停在链接上时
    • a:active - 链接被点击时

    实例

    /* 未被访问的链接 */
    a:link {
      color: red;
    }
    /* 已被访问的链接 */
    a:visited {
      color: green;
    }
    /* 将鼠标悬停在链接上 */
    a:hover {
      color: hotpink;
    }
    /* 被选择的链接 */
    a:active {
      color: blue;
    }
    

    css

    总结:
    如果为多个链接状态设置样式,请遵循如下顺序规则:
    *a:hover 必须 a:linka:visited 之后

    • a:active 必须在 a:hover 之后

    文本装饰

    text-decoration 属性主要用于从链接中删除下划线:
    实例

    a:link {
      text-decoration: none;
    }
    
    a:visited {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    a:active {
      text-decoration: underline;
    }
    

    css

    背景色

    background-color 属性可用于指定链接的背景色:
    实例

    a:link {
      background-color: yellow;
    }
    
    a:visited {
      background-color: cyan;
    }
    
    a:hover {
      background-color: lightgreen;
    }
    
    a:active {
      background-color: hotpink;
    } 
    

    css

    链接按钮

    本例演示了一个更高级的例子,其中组合了多个 CSS 属性,将链接显示为框/按钮:
    实例

    a:link, a:visited {
      background-color: #f44336;
      color: white;
      padding: 14px 25px;
      text-align: center; 
      text-decoration: none;
      display: inline-block;
    }
    
    a:hover, a:active {
      background-color: red;
    }
    

    css
    更多实例

    伪类

    什么是伪类?

    伪类用于定义元素的特殊状态。
    例如,它可以用于:

    • 设置鼠标悬停在元素上时的样式
    • 为已访问和未访问链接设置不同的样式
    • 设置元素获得焦点时的样式

    语法

    伪类的语法:

    selector:pseudo-class {  property: value;}
    

    锚伪类

    链接能够以不同的方式显示:

    /* 未访问的链接 */a:link {  color: #FF0000;}/* 已访问的链接 */a:visited {  color: #00FF00;}/* 鼠标悬停链接 */a:hover {  color: #FF00FF;}/* 已选择的链接 */a:active {  color: #0000FF;}
    

    css

    注意:a:hover 必须在 CSS 定义中的 a:linka:visited 之后,才能生效!a:active必须在 CSS 定义中的a:hover之后才能生效!伪类名称对大小写不敏感。

    伪类和 CSS 类

    伪类可以与 CSS 类结合使用:当您将鼠标悬停在例子中的链接上时,它会改变颜色:

    a.highlight:hover {  color: #ff0000;}
    

    css

    悬停在 <div>

    <div> 元素上使用 :hover 伪类的实例:

    div:hover {  background-color: blue;}
    

    css

    简单的工具提示悬停

    把鼠标悬停到<div> 元素以显示<p> 元素(类似工具提示的效果):

    p {  display: none;  background-color: yellow;  padding: 20px;}div:hover p {  display: block;}
    

    css

    CSS - :first-child 伪类

    :first-child 伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。匹配首个 <p>元素在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 <p> 元素:

    p:first-child {  color: blue;}
    

    css

    匹配所有 <p>元素中的首个<i> 元素

    在下面的例子中,选择器匹配所有<p> 元素中的第一个<i>元素:

    p i:first-child {  color: blue;}
    

    css

    匹配所有首个 <p> 元素中的所有 <i>元素

    在下面的例子中,选择器匹配作为另一个元素的第一个子元素的<p> 元素中的所有 <i> 元素:

    p:first-child i {  color: blue;}
    

    css

    CSS - :lang 伪类

    :lang伪类允许您为不同的语言定义特殊的规则。在下面的例子中,:lang 为属性为 lang="en"<q> 元素定义引号:

    <html><head><style>q:lang(en) {  quotes: "~" "~";}</style></head><body><p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p></body></html>
    

    css

    所有 CSS 伪类

    选择器例子例子描述
    :activea:active选择活动的链接。
    :checkedinput:checked选择每个被选中的<input> 元素。
    :disabledinput:disabled选择每个被禁用的 <input> 元素。
    :emptyp:empty选择没有子元素的每个 <p>元素。
    :enabledinput:enabled选择每个已启用的 <input> 元素。
    :first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
    :first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
    :focusinput:focus选择获得焦点的 <input> 元素。
    :hovera:hover选择鼠标悬停其上的链接。
    :in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
    :invalidinput:invalid选择所有具有无效值的 元素。
    :lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 <p> 元素。
    :last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
    :last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个<p>元素。
    :linka:link选择所有未被访问的链接。
    :not(selector):not(p)选择每个非 <p> 元素的元素。
    :nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
    :nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个

    元素,从最后一个子元素计数。

    :nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数
    :nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p>元素的每个 <p>元素。
    :only-of-typep:only-of-type选择作为其父的唯一 <p>元素的每个 <p> 元素。
    :only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
    :optionalinput:optional选择不带 "required"属性的 <input> 元素。
    :out-of-rangeinput:out-of-range选择值在指定范围之外的 <input>元素。
    :read-onlyinput:read-only选择指定了 "readonly"属性的 <input> 元素。
    :read-writeinput:read-write选择不带 "readonly"属性的<input>元素。
    :requiredinput:required选择指定了 "required"属性的 <input>元素。
    :rootroot选择元素的根元素。
    :target#news:target选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
    :validinput:valid选择所有具有有效值的<input>元素。
    :visiteda:visited选择所有已访问的链接。

    所有 CSS 伪元素

    选择器例子例子描述
    ::afterp::after在每个

    元素之后插入内容。

    ::beforep::before在每个

    元素之前插入内容。

    ::first-letterp::first-letter选择每个

    元素的首字母。

    ::first-linep::first-line选择每个

    元素的首行。

    ::selectionp::selection选择用户选择的元素部分。
    展开全文
  • 今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一、超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而...

    今天我们开始学习超链接伪类,包含以下内容和知识点:

    链接的四种样式
    将链接转换为块状
    用css制作按钮
    首字下沉
    一、超链接的四种样式

    超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站。说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式:

    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

    以上分别定义了超链接未访问时的链接样式,已访问的链接样式,鼠标移上时链接样式和选定的链接样式。之所以称之为伪类,也就是说它不是一个真实的类,正常的类是以点开始,后边跟一个名称,而它是以a开始后边跟个冒号,再跟个状态限定字符;比如第三个a:hover的样式,只有当鼠标移动到该链接上时它才生效,而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高,比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的,设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。

    下面来做一个默认状态下是蓝色,鼠标放上是红色加下划线,选定(按下)时为紫色,已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容:

    <style type="text/css">
    a:link { color: #06F; text-decoration: none; }
    a:visited { color: #999; text-decoration: line-through; }
    a:hover { color: #F00; text-decoration: underline; }
    a:active { color: #F0F; }
    </style>
    <p><a href="#">这里是链接</a></p>
    <p><a href="#">这里也是链接</a>

    注意:四种状态的顺序一定不能颠倒,否则有些不生效

    二、将链接转换为块级元素
    链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需增加一个display:block的css属性即可。

    a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
    a:hover { color: #FF4; text-decoration: none; background: #333; }
    </style>
    <a href="#">块级连接</a>

     

    展开全文
  • 一、超链接的四种样式 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 .....

    知识点

    • 链接的四种样式
    • 将链接转换为块状
    • 用css制作按钮
    • 首字下沉

    一、超链接的四种样式

    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */
    
    a:link { color: #06F; text-decoration: none; } //去除默认样式
    a:visited { color: #999; text-decoration: line-through; }// 删除线
    a:hover { color: #F00; text-decoration: underline; }//下划线
    a:active { color: #F0F; }
    
    

    注意:四种状态的顺序一定不能颠倒,否则有些不生效 link visited hover active

    二、将链接转换为块级元素

    链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需增加一个display:block的css属性即可。

    <style type="text/css">
    			a {
    				display: block; //转换成块元素
    				height: 30px;
    				width: 100px;
    				line-height: 30px; //设置居中对齐
    				text-align: center;
    				background: #CCC;
    			}
    
    			a:hover {
    				color: #FFF;
    				text-decoration: none;
    				background: #333;
    			}
    		</style>
    

    运行效果
    在这里插入图片描述
    三、用css制作按钮

    学会了把链接转换为块元素,按钮就很好做了。想要带图片的,添加一个背景就可以了。

    <style type="text/css">
    			a {
    				display: block;
    				height: 34px;
    				width: 107px;
    				line-height: 2;
    				text-align: center;
    				/* background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; */
    				color: #d84700;
    				background-color: #0062CC;
    				font-size: 14px;
    				font-weight: bold;
    				text-decoration: none;
    				padding-top: 3px;
    			}
    
    			a:hover {
    				background-color: pink
    				/* background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px; */
    			}
    		</style>
    

    按钮
    在这里插入图片描述
    四、首字下沉

    首字下沉是css伪类上的又一个运用,它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式,而不需要把首字添加一个标签或通过程序来实现,今天以制作word里的首字下沉为例来讲解,应用如下伪元素:
    :first-letter

    <style type="text/css">
    			p {
    				width: 400px;
    				line-height: 1.5;
    				font-size: 14px;
    			}
    
    			p:first-letter {
    				font-family: "microsoft yahei";
    				font-size: 40px;
    				float: left;
    				padding-right: 10px;
    				line-height: 1;
    			}
    		</style>
    

    效果图
    在这里插入图片描述

    展开全文
  • 一、超链接的四种样式 本来计划这节课放到第九章中讲解,但下边的章节都涉及到了,所以提前来学习...说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式: a:link {color: #FF0000} /* 未访问的
  • css让超链接不下划线的方法:首先创建一个HTML示例文件;然后添加一个a标签;最后给a标签添加“text-...css让超链接不下划线?css中去除下划线,可以设置a标签的text-decoration属性为none。使用一个案例来说明...
  • 默认的超链接下划线动画十分的生硬,我们可以通过一些简单的处理,来制作出平滑过渡效果的超链接下划线动画效果。众所周知,超链接元素在默认情况下鼠标滑过时会出现一条下划线。默认的超链接下划线动画十分的生硬...
  • CSS伪类,是一种特殊的,它针对到...用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了。 1...
  • 关于超链接下划线

    2008-07-16 08:59:00
    关于超链接中的下划线这个及细节的问题,想必大家都有过讨论和思考,大家都知道,把握一个原则即可:“让使用者清楚的区分超链接文本和其他文本形式,并潜意识知道可以点击。”;但对于是否可以潜意识知道可以点击,...
  • 这个同样是一个CSS样式的问题。 使用的代码如下: ...其中,上面的四个英文中,link是连接在平常的状态,active是在按下的那一刻的状态,visited是被访问完了过后的状态,hover是鼠标放置于超链接文字上面未点击...
  • 通过CSS样式修改超链接颜色下划线

    千次阅读 2018-04-09 17:36:21
    } /* 未访问链接*/ a:...} /* 鼠标点击时 */ 去掉下划线可以将a标签的text-decoration属性改为none的即可! text-decoration:none; 示例: test css this a label 以加载CSS文件方式 test css this a label 非常简单!
  • 我们设置一个超链接,对其设置CSS样式,通过CSS A设置其四种样式效果。通过一个简单的对文本设置css a样式情况了解学习CSS a锚文本样式。 1、案例css代码   .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ ...
  • 用CSS设置a标签的超链接下划线

    千次阅读 2019-10-20 20:29:55
    添加属性 text-decoration: none 即可 示例 <a href="www.baidu.com" style="text-decoration: none;">{{ item.title }}</a>
  • 超链接a常用的样式控制包括超链接伪类和CSS鼠标样式。1. 超链接伪类 A. 超链接伪类可以定义链接在不同时期的样式,使用方法为: 选择器:link{CSS样式},元素未访问时的样式 选择器:visited{CSS样式},元素访问后...
  • 比如:访问过的超链接、普通的超链接、获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 正常链接:-a:link 访问过的链接:-a:visited(只能定义字体颜色) 鼠标滑过的链接:-a:...
  • 1.超链接伪类 超链接默认有自带的一种样式。 默认情况:字体为蓝色,有下划 鼠标点击时:字体为红色,下划线。 鼠标点击后:字体为紫色,下划线。 点击时,指的是点击超链接的一瞬间的状态。 &...
  • 默认情况下,超链接是蓝色字体并下划线,被访问后,链接文本会变为紫色并且也下划线。并且,默认的链接样式平淡无奇,通过CSS,可以设置超链接的各种属性,如字体、颜色、背景等,并结合链接...
  • 而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式 a:link{...} a:visited{...} a:hover{...} a:active{...} 定义四个伪,必须按照link、visited、hover、active的顺序进行,不然...
  • CSS中的伪类选择器,颜色设置,度量单位,文本字体及文本样式设置。
  • div css 下划线text-decoration

    万次阅读 2011-10-18 13:57:00
    html原始下划线标签uA伪类超链接下划线鼠标经过出现下划线对对象的下划线 接下来,我们来介绍通过css样式对文字、区域设置下划线样式——css下划线 常见和常用的下划线样式 1、文字带下划线的方式显示 - TO
  • 1、在CSS中,两个规则的优先级一样高的时候,后定义的规则优先,所以对于超链接的几个选择器,一般的顺序是:a:link,a:visited,a:hover,a:focus,a:active;这个不用专门去记下来,当你做上几个简单的例子之后...
  • css如何设置超链接样式

    千次阅读 2013-11-22 12:20:06
    css设置超链接样式是通过伪类来实现的   (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:设置对象在其鼠标悬停时的样式表属性。 (4)...
  • 标签定义超链接,用于从一张页面链接到另一张页面。 元素的属性有:href、download,、hreflang、 media、 rel、 target 以及 type ,其中最重要的属性是 href 属性,它指示链接的目标,若使用该属性则其他属性均...
  • 使用标签 标签用于定义超链接,用于从一张页面链接到另一张页面。 元素最重要的属性是 href 属性,它负责指示链接目标。也用于设置锚点,用于页面定位。...如果想要更改默认样式,可以使用a元素伪类来定义样式。
  • 例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写: a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}例子 2 与简单属性选择器类似,可以把多个属性-值选择器链接在...
  • 伪类选择器 复合选择器的优先级问题 总结 (1)连接符参与优先级计算(2)*的优先级为0(3)同级之间比较个数,同级之间可跨越 学习目标 掌握常用选择器的使用 熟悉选择器的优先级关系 掌握...
  • 龙源期刊网 http://doc.wendoc.comDreamweaver中用CSS实现多种样式文字超链接技术...简述了文本超链接的含义及特征,介绍了默认超链接样式及其改变方法,提出了多种样式文字超链接设置的必要性,阐述了如何利用“CSS...
  • title: CSS鼠标动作的五种状态[UI元素的伪类选择器] abbrlink: 29618 date: 2020-07-08 12:20:16 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 初始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,070
精华内容 828
热门标签
关键字:

超链接伪类不带下划线