css控制超链接(css超链接样式)
2014-04-15 14:43
656 查看
一、伪类
CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)
偽类的语法:元素标签 偽类名称{属性:属性值;}
二、超链接
a:link:未访问的链接
a:hover:鼠标移动到链接上
a:active:鼠标按下链接
a:visited:已访问的链接
如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A
三、:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)
四、练习
1.给链接加上边框
2.在超链接中用背景图象添加记号(给超链接a加上背景图片即可)
7.创建按钮和翻转
8.纯 css 工具提示
CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)
偽类的语法:元素标签 偽类名称{属性:属性值;}
二、超链接
a:link:未访问的链接
a:hover:鼠标移动到链接上
a:active:鼠标按下链接
a:visited:已访问的链接
如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A
<style type="text/css"> a:link{text-decoration:none; color:#000;} a:visited{text-decoration:none; color:#6F0;} a:hover{text-decoration:underline; color:#00F;} a:active{text-decoration:overline; color:#F00;} a.web:visited{text-decoration:none; color:#000;} </style> </head> <body> <div id="link"> <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>" class="web">网页设计</a> | <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">平面设计</a> | <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网站前端</a> | <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">动画设计</a> | <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">软件开发</a> | <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网页营销</a> <a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">我会闪</a> </div> </body>
三、:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)
<style type="text/css"> input{ width:200px; height:25px; border:2px solid #FF0; } input:focus{ background:#9FF; } </style> </head> <body> <label>用户名: <input type="text" name="username"/></label> <label>密 码: <input type="text" name="pwd"/></label> </body>
四、练习
1.给链接加上边框
<style type="text/css"> a{ font-size:36px; } a:link{ color:#009; text-decoration:none; border-bottom:2px solid #F00; line-height:150%; /*line-height:是为了和下划线分开点*/ } </style> </head></p> <p><body> <a href="#">PHP.COM中文网</a> </body>
2.在超链接中用背景图象添加记号(给超链接a加上背景图片即可)
<style type="text/css"> a:link{ color: #f00; padding-left:13px; background:url(fasfas.gif) no-repeat left center; text-decoration:none; } a:visited{ color:#900; padding-left:13px; background:url(das.gif) no-repeat left center; text-decoration:none;</p> <p>} <!--将visited改为hover可以实现鼠标浮动的效果--> </style> </head></p> <p><body> <p>PHP100.COM中文网,<a href="<a href="http://www.baidu.com">PHP</a">www.baidu.com">PHP</a</a>>资源共享站</p> </body>
7.创建按钮和翻转
<style type="text/css"> a { Display: block; Width: 140px; Padding: 3px; height:30ox Line-height: 30px; Background-color: #94b8e9; Border: 1px solid black; Color: #000; Text-decoration: none; Text-align: center; } a:hover { background-color: #369; color:#fff; } </style> </head> <body> <a href="http:\\www.baidu.com">PHP100.COM中文网</a> </body>
8.纯 css 工具提示
<style type="text/css"> a.tooltip { position: relative; } a.tooltip span { display: none; } a.tooltip:hover { font-size: 100%; /* Fixes bug in IE5.x/Win */ } a.tooltip:hover span { display:block; position:absolute; top:1em; left:2em; padding: 0.2em 0.6em; border:1px solid #996633; background-color:#FFFF66; color:# 000; } </style> </head> <body> <p><a href="#">PHP.COM<span>PHP官网</span></a></p> <p> <a href="<a href="http://www.anfsdfasdybufdsfdasfdd.com/">http://www.anfsdfasdybufdsfdasfdd.com/</a>" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England. </p> </body>
相关文章推荐
- CSS超链接样式常见四种状态控制
- CSS超链接样式常见四种状态控制
- 如何用CSS控制超链接字体样式
- 用CSS控制超链接文字样式
- 使用CSS控制超链接样式的注意事项
- Java与Flex学习笔记(12)----用CSS控制页面样式
- Css <ul><li>列表的样式的控制</li></ul>
- jquery 利用CSS 控制打印样式
- CSS控制print打印样式
- CSS list-style属性控制li标签样式
- CSS list-style修改列表属性控制li标签样式
- CSS:控制HTML页面超链接不显示下划线
- css如何设置超链接样式
- css通过伪类来设置超链接样式附示例
- CSS控制输入框input悬停交互样式
- CSS控制让每行显示4个图片的样式
- CSS控制来实现去除超链接的下划线
- JQuery学习笔记8:JQuery之CSS样式控制
- Css <ul><li>列表的样式的控制</li></ul>
- css文字控制与css文本样式示例和属性