HTML5基础加强css样式篇（多媒体选择器）（十七）
2017-03-16 10:32
585 查看
1打印机：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
}
/*控制打印机的打印样式*/
@media print {
/*选择器及其样式*/
a{
font-size: 18px;
color: red;
}
/*属性选择函数 attr(元素的属性名) */
a:after{
content: " " attr(href) ;
}
}
</style>
</head>
<body>
<a href="http://www.baiu.com">baidu</a>
<script type="text/javascript">
</script>
</body>
</html>
打印效果预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
}
/*控制打印机的打印样式*/
@media print {
/*选择器及其样式*/
a{
font-size: 18px;
color: red;
}
/*属性选择函数 attr(元素的属性名) */
a:after{
content: " " attr(href) ;
}
}
</style>
</head>
<body>
<a href="http://www.baiu.com">baidu</a>
<script type="text/javascript">
</script>
</body>
</html>
打印效果预览：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5基础加强css样式篇（target目标伪类选择器应用）（十）
- HTML5基础加强css样式篇（结构化伪类选择器:nth-child和nth-of-type比较）（十二）
- HTML5基础加强css样式篇（结构化伪类选择器：nth-of-type）（十一）
- HTML5基础加强css样式篇（target目标伪类选择器）（九）
- HTML5基础加强css样式篇（css过度效果：界面的浮层遮罩和消失）（十九）
- HTML5基础加强css样式篇（常用伪元素选择器after，before）（十五）
- HTML5基础加强css样式篇（css过度覆盖问题）（二十一）
- HTML5基础加强css样式篇（css过渡属性简写，cubic-bezier过度曲线函数使用）（二十）
- HTML5基础加强css样式篇（animation属性animation-name,animation-delay,animation-duration，等)（三十）
- HTML5基础加强css样式篇（css属性transform 函数（3D）transform-style）（二十五）
- HTML5基础加强css样式篇（checked状态伪类和清除默认样式）（十三）
- HTML5基础加强css样式篇（css过渡结束事件：transitionend）（二十三）
- HTML5基础加强css样式篇（animation简写，控制多个动画，动画帧简写）（三十二）
- HTML5基础加强css样式篇（font-family，font-size， font-style，font-variant， font-weight ， font 简写属性 ）（五）
- HTML5基础加强css样式篇（text-align，text-decoration，text-indent，text-transform，letter-spacing，word-spacin）（四）
- HTML5基础加强css样式篇（属性选择器）（十四）
- HTML5基础加强css样式篇（css属性border详解（一））（三十三）
- HTML5基础加强css样式篇（css属性transform 函数（3D）3D盒子）（二十七）
- HTML5基础加强css样式篇（DOM的属性操作（对class属性值的操作 setAttribute,removeAttribute,classlist：remove，add,toggle））（七）
- HTML5基础加强css样式篇（css过度效果）（十八）