超级链接美化

1.伪类

同一个超级链接,根据用户的点击情况,有自己样式:

超级链接根据用户点选情况,有4种状态:

a:link 没有访问的超级链接

a:visited 已经访问的超级链接

a:hover 鼠标悬停的时候

a:active 鼠标按下的时候

<style type="text/css">
a:link{
color:orange;
}
a:visited{
color:green;
}
a:hover{
color:black;
font-size: 20px;
border: 1px solid black;
}
a:active{
font-size: 30px;
}
</style>

在css里面叫做类,这个东西是工程师加的,可以明确的指定某一个标签是什么类;

但是:link、:visited,是用户指定的状态,在页面编辑的时候,我们只能定义,但是不知道是属于什么类,所以叫做“伪类”。

2.爱恨准则

先爱了,才能恨。

css有规定,四个伪类的顺序必须是:

link、visited、hover、active

love hate的顺序一样,所以可以帮助记忆,叫做“爱恨准则”。

如果顺序不一样,那么就有可能一些样式会错乱。

注意,可以省略某个,但是顺序不能变。比如我们省略visited,那么:link、hover、active

3.常见写法

一般的,我们都会把a:link、a:visited写在一起, 这样点过和没有点过样式一样:

<style type="text/css">
a:link,a:visited{
text-decoration: underline;
color:#333;
}
a:hover{
color:red;
}
</style>

如果a要转块、设置宽高,那么我们一般习惯把盒模型的属性写在a这个选择器里。把关于文字的属性,写在伪类选择器中。特别的,一定要记住text-decoration一定要写在伪类里面,或者a标签里,绝对不能从父亲继承,因为父亲继承来的text-decoration:none;干不掉超级链接默认的下划线。

 .nav ul li a{
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
color:white;
}
.nav ul li a:hover{
background-color: gold;
}

a这个选择器,“暗含”了a:linka:visited,所以也可以不写a:linka:visited,直接写a:hover

 .nav ul li a{
display: block;
width: 120px;
height: 40px;
text-decoration: none;
color:white;
}
.nav ul li a:hover{
background-color: gold;
}

伪类的权重和类一样,如果增加了一个类选择器。

background系列属性

1.background-color

背景颜色属性background-color:#f00;

没有什么好说的,我们一直在用,记住,padding区域也有背景颜色!border以内的地方都有颜色。

2.background-image

背景图片属性background-image:url(images/1.jpg);

url是uniform resource locator统一资源定位器的意思,说人话就是“网站”。

url里面没有引号,是相对路径、绝对路径都是可以的。

和插入图片不一样

背景图的应用

<img src=”” />

背景图片会默认的横向、纵向铺很多个。

3.background-repeat

repeat就是重复的意思

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-image: url(images/libai.png);
background-repeat: repeat-y;

4.background-position

图片位置属性。

background-position:100px 200px;

表示让背景图片在盒子中向右移动100px,向下移动200px。

如果想向左、向下移动,要写负数。

background-position最常见的用处就是“CSS精灵”css sprite,有些人叫做“CSS雪碧技术”。

就是指把多个小杂碎图片,合成一张图片,然后用background-position定位只显示其中某一部分。

这样能够显著降低HTTP请求数。原来10个背景需要用10张图片,但是现在只需要1个。

background-position不仅仅可以用两个数字来定位,还可以用单词来定位。

在左右层面,我们用left、center、right来表示左、中、右

在上下层面,我们用top、center、bottom来表示上、中、下

先左右后上下

background-position:left bottom;

可以用百分比来表示background-position

backgrond-position:50% 0;等价于 background-position:center top;

假设盒子现在宽度是600px,背景图的宽度是121px,所以

background-position:center top;

等价于:background-position:50% 0;

等价于:background-position:239.5px 0;

怎么计算来的?

600 / 2 - 121 /2 = 239.5px

应用:

1) 大背景

2) 通栏banner

banner的尺寸一般都非常宽,是为了照顾有钱的用户,他们使用的是宽屏显示器,分比率达到1920,所以banner的宽度基本都是1920的。我们要用背景来做banner,写上

background-image: url(images/banner160223.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E0B895;

不管多大的分辨率,我们的banner都是通栏的:

5.background-attachment

背景附属属性,attachment就是附属的意思。它的一个值比较有用fixed;

background-attachment: fixed;

css2.1层面,就这些。css3中又要增加background另外5个属性,等到时候再说。

我们可以合写:

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:-10px -100px;
background-attachment:fixed;

等价于:

background:red url(1.jpg) no-repeat -10px -100px fixed;

背景图的应用

1.图换文字

我们要插入logo:

<h1>
<img src="images/logo.png" alt="" />
</h1>

这种插入logo的方式,对搜索引擎不友好。我们希望的是h1里面是文字,而不是图片。搜索引擎是无法识别图上的文字的。

所以,比较好的方法,就是用背景图来呈递这个图片,标签中写上文字,标签中的文字是搜索引擎能抓取的。

<h1>爱前端-专业前端开发培训</h1>

    .header h1{
width: 221px;
height: 68px;
background:url(images/logo.png);
text-indent: -999em; → 赶走文字,让用户看不到文字
}

也可以:

    .header h1{
width: 221px;
height: 68px;
background:url(images/logo.png);
line-height: 400px;
overflow: hidden;
}

2.先导符号放在 padding里

3.精灵的摆放

所有要成为先导符号的小图标,一定要放到精灵图的最右边。

07_CSS入门和高级技巧(5)的更多相关文章

  1. 03_CSS入门和高级技巧(1)

    上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...

  2. (Dos)/BAT命令入门与高级技巧详解(转)

    目录 第一章 批处理基础 第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设 ...

  3. 10_CSS入门和高级技巧(8)

    图片透明 先来复习一下盒子的透明问题: opacity:0.6; 介于0~1之间,为了让IE兼容,我们要使用IE自己的滤镜: filter:alpha(opacity=60); 盒子的透明,会让里面的 ...

  4. 08_CSS入门和高级技巧(6)

    排查错误 Chrome浏览器的审查功能. 错误1:选择器写错了,压根没有选择上: 如果写了一个错误的选择器, <style type="text/css"> dvi p ...

  5. 09_CSS入门和高级技巧(7)

    浏览器兼容问题 1.现在中国网民用什么浏览器? 中国流量最大的网站就是百度,百度在统计着每一个访问者的浏览器.地域.操作系统.分辨率等等信息. 百度流量研究院:http://tongji.baidu. ...

  6. 05_CSS入门和高级技巧(3)

    上节课复习 !important不能影响就近原则,远的标签如果加上!important也干不过近的标签! !important不能影响继承权重是0,通过继承的标签加上!important也干不过直接选 ...

  7. 06_CSS入门和高级技巧(4)

    复习 CSS : 负责样式层,层叠式样式表cascading style sheet.CSS2.1,最新版本CSS3. CSS选择器: 选择哪些元素加样式.基本选择3种:标签p.id选择器#id.cl ...

  8. 04_CSS入门和高级技巧(2)

    上节课复习 HTML表格,table.tr.td(th):thead.tbody:caption. 一定要会根据图形,来写表格: <table border="1"> ...

  9. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

随机推荐

  1. 【Java】Array 数组

    概述 数组是多个相同数据类型按一定顺序排列的一组数据 特点: - 数据类型相同!! - 长度固定!! 构成数组的几个要素 - 数组名称 - 下标,又称索引 - 元素 - 数组长度 数组是一种引用类型, ...

  2. svg整体缩放至指定大小

    一.问题 svg画面跑在分辨率低的电脑上,导致不能完全显示. 二.要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸. 三.实现 1.获取本机窗口高度.宽度 let clientWidth ...

  3. D. Minimax Problem Codeforces 1288D binary_search+二进制

    题目大意:n*m的矩阵中,找到两行数,可以形成两个一维数组,数组1的位置i和数组2的位置i去最大构成新数组b的元素b[i],最终目的要使数组b中最小的数尽可能的大 题解: m的范围是(1,8),比较小 ...

  4. First Training

    B B - Local Extrema CodeForces - 888A You are given an array a. Some element of this array ai is a l ...

  5. testlink的api

    testlink可以做很多你想象得到的事情,如API测试参数管理,Excel导入导出,快速模板创建测试用例,集成Jenkins. TestLink API第三方库: TestLink-API-Pyth ...

  6. 记录在腾讯云上搭建Ubuntu服务器

    为了能让更多的比赛题复现,只好自己去手动搭建服务器 各种奇葩的操作以及很多的由于升级之后出现的问题变成了一个个坑. 写下这篇博客以此来记录我踩过的坑. 第一步 购买一个服务器,当然我购买的是学生版本的 ...

  7. Joomla 3.4.6 RCE 分析

    Joomla 3.4.6 RCE 漏洞分析,首发先知社区: https://xz.aliyun.com/t/6522 漏洞环境及利用 Joomla 3.4.6 : https://downloads. ...

  8. 【学习笔记】 $learn \ from \ failure \ ? ( 雾$

    \(1.\)变量名不要用 \(next\) ,在某些编译器里可能是关键词,可以用 \(nxt\) 代替 \(\\\) \(2.\)在判断某些条件时应该写成 flag = 条件 ? 1 : flag; ...

  9. Laravel - 上手实现 - 邮件发送

    Laravel 自带 SwiftMailer 库,集成了多种邮件API,可以很方便的实现邮件的发送. 我们使用到的是SMTP(Simple Message Transfer Protocol)简单邮件 ...

  10. Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \;

    find命令的参数: pathname: find命令所查找的目录路径.例如用.来表示当前目录,用/来表示系统根目录.-print: find命令将匹配的文件输出到标准输出.-exec: find命令 ...