前端CSS-font属性,超链接的美化,css精灵,background综合属性

1. font属性

  • 使用font属性,能够将字号、行高、字体,能够一起设置。
font:14px/24px "Times New Roman","Microsoft YaHei","SimSun";

等价于三行语句:

font-size:14px;
line-height:24px;
font-family:"Times New Roman","Microsoft YaHei","SimSun";
  • 行高也可以用百分比,表示自豪的百分之多少.一般来说,都是大于100%的,因为行高一定要大于字号.
font:12px/200% “宋体”

等价于

font:12px/24px “宋体”;

2.1 超链接的美化,牢记"爱恨准则"

  • 4个"伪类"
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}

:link表示, 用户没有点击过这个链接的样式。 是英语“链接”的意思。

:visited 表示, 用户访问过了这个链接的样式。 是英语“访问过的”的意思。

:hover 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。

:active 表示, 用户用鼠标点击这个链接,但是不松手,此刻的样式。 是英语“激活”的意思。

记住,这四种状态,在css中年,必须按照固定呢的顺序写:a:link 、a:visited 、a:hover 、a:active,如果不按照顺序,那么将失效

2.2 超链接的美化

  • a标签在使用的时候,非常的难。因为不仅仅要控制a这个盒子,也要控制它的伪类。
  • 我们一定要将a标签写在前面,:link、:visited、:hover、:active这些伪类写在后面。
  • a标签中,描述盒子; 伪类中描述文字的样式、背景。
.nav ul li a{
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link ,.nav ul li a:visited{
text-decoration: none;
background-color: yellowgreen;
color:white;
}
.nav ul li a:hover{
background-color: purple;
font-weight: bold;
color:yellow;
}

记住,所有的a不继承text,font这些东西.因为a自己有一个伪类的权重.

  • 最标准的,就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中,发现不写link、visited浏览器也挺兼容。所以就把a标签简化了:a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态。
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}

3.1 css精灵

  • “css精灵”,英语css sprite,所以也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
  • css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

  • 用fireWorks精确控制精灵

4. background综合属性

  • background属性和border一样,是一个综合属性:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
  • 可以任意省略部分:
background: red;

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

精灵的使用: background: url(images/taobao.png) no-repeat 0 -133px;

前端CSS-font属性,超链接的美化,css精灵,background综合属性的更多相关文章

  1. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  2. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  3. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  4. CSS font 复合属性的顺序

    CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...

  5. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  6. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. CSS(五):背景、列表、超链接伪类、鼠标形状控制属性

    一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...

  9. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

随机推荐

  1. 增加一条新记录,同时返回其自增id

    方法一.是在Insert或Update触发器中用select来返回需要的字段值.默认情况下,当insert时,触发其insert触发器,它的默认返回值是影响到的行数,语句是:select @@rowc ...

  2. MySQL 忘记root密码的两种处理方法

    [背景] 由于各个原因,我遇到过不只一次我服务的客户忘记了MySQL的root密码:如果是普通用户还好,我们可以用root用户去改它的密码,要命 的是把root给丢了! 对于MySQL来说如果你忘记了 ...

  3. Oracle多表关联如何更新多个字段

    注意点:1.被update主表一定要加上过滤条件.2.查询出来更新结果集,同时也要作为被更新主表的条件,作为同步大家都是更新这部分数据.update student stu set (stu.name ...

  4. LVL类及接口使用介绍(License Verification Library )

    原文:http://android.eoe.cn/topic/android_sdk LVL Classes and Interfaces-LVL类和接口 Table 1 lists all of t ...

  5. [MeetCoder] Count Pairs

    Count Pairs Description You are given n circles centered on Y-aixs. The ith circle’s center is at po ...

  6. 【Unity】3.1 利用内置的3D对象创建三维模型

    分类:Unity.C#.VS2015 创建日期:2016-04-02 一.基本概念 Unity已经内置了一些基本的3D对象,利用这些内置的3D对象就可以直接构建出各种3D模型(当然,复杂的三维模型还需 ...

  7. Android 录音获取分贝值的办法

    参考:http://blog.csdn.net/greatpresident/article/details/38402147 public class MediaRecorderDemo { pri ...

  8. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

  9. 每日英语:Proactive Advice for Dealing With Grief: Seek Out New Experiences

    When her husband died of cancer 10 years ago, Becky Aikman says she experienced grief and adapted to ...

  10. Asp.Net MVC App_Code无法识别

    Asp.Net MVC需要写公共类的时候 右击添加 App_Code 文件夹,新建类—>右击类—>属性,生成操作 —>选择 —>编译 Asp.Net MVC项目本身是个应用程序 ...