码迷,mamicode.com
首页 > 其他好文 > 详细

第一章入门篇伪类伪对象

时间:2018-11-05 21:26:57      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:col   opened   元素   src   open   ack   input   属性   site   

1.伪类

伪类用来指定HTML元素某个状态下的样式,格式 选择符:伪类{属性:属性值}

 

技术分享图片
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>伪类</title>
    <style type ="text/css" >
        a:link{ text-decoration:none;font-size:50px;/*链接默认状态下的样式*/ }
        a:visited{ color:Red;/*链接访问过后的样式*/}
        a:hover{ text-decoration:underline; color:Silver;/*鼠标放在链接上时的样式*/}
        a:active{ color:Maroon;/*点击链接时的样式*/}
        /*设置a伪类的顺序必须按照上面的顺序书写,否则可能无效*/
        
        
        input:hover{ background-color:#F00;/*鼠标放在输入框时改变背景色*/}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#">伪类</a>可以用来指定选择符在某种状态下的样式,用来增加交互效果而不必使用过多的JavaScript!
        <br />
        <input type ="text" />
    </div>
    </form>
</body>
</html>
View Code

2.伪对象

伪对象是在在指定的HTML元素之外加上额外的信息,格式: 选择符:伪对象{属性:属性值}

技术分享图片
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>伪对象</title>
    <style type ="text/css" >
    p:before{ content:"双十一";  font-weight:bold; }
    p:after{ content:",准备好剁手了吗?"; color:Red;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <b>伪对象可在HTML元素的前面或后面加上额外的信息!</b>
        <p>快到了</p>
    </div>
    </form>
</body>
</html>
View Code

 

第一章入门篇伪类伪对象

标签:col   opened   元素   src   open   ack   input   属性   site   

原文地址:https://www.cnblogs.com/lidaying5/p/9879683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!