前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端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综合属性的更多相关文章
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 文本属性和字体属性,超链接导航栏案例 background
文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...
- background系列属性
1.background-color背景颜色属性 ①颜色表示方法 英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色 也 ...
- CSS font 复合属性的顺序
CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...
- 【转载】CSS font关键字属性值的简单研究
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS(五):背景、列表、超链接伪类、鼠标形状控制属性
一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
随机推荐
- 常用代码之七:静态htm如何包含header.htm和footer.htm。
要实现这个有多种解决方案,比如asp, php, 服务器端技术,IFrame等,但本文所记录的仅限于用jQuery和纯htm的解决方案. <head> <title></ ...
- U811.1接口EAI系列之一-通用访问EAI方法--统一调用EAI公共方法--VB语言
1.现在做的项目是关于业务系统与U811.1的接口项目. 2.那么就需要调整通过EAI调用生成U8业务单据. 3.下面就一个通用的向U8-EAI传递XML的通用方法 4.肯定有人会问怎么还用VB调用呢 ...
- 《KAFKA官方文档》入门指南(转)
1.入门指南 1.1简介 Apache的Kafka™是一个分布式流平台(a distributed streaming platform).这到底意味着什么? 我们认为,一个流处理平台应该具有三个关键 ...
- Jmeter录制HTTPS
Jmeter有录制功能,录制HTTPs需要增加一个证书配置,录制步骤如下: 1.打开jmeter,添加线程组.线程组右键,逻辑控制器>录制控制器 工作台 右键 非测试元件 >HTTP代理服 ...
- JEECG中t:dictSelect的extendJson用法
1.t:dictSelect的各个属性值如下: 属性名 类型 描述 是否必须 默认值 title string 标题 否 null field string 控件字段名字 是 null typeGro ...
- unity, Animator.ResetTrigger
解: 正确的写法应该是:Animator.SetTrigger("unfoldTrigger")Animator.ResetTrigger("unfoldTrigger& ...
- 【转】在 XAML 的属性中,转义大括号 {}
我们知道大括号"{}"在XAML中是用来处理标记扩展的. 比如: <Button Content="{Binding}"/> 但如何转义而表示普 ...
- 【Android开发】Android Host详解(翻译自官方文档)
原文:http://android.eoe.cn/topic/summary 文档内容 API概述 Android中manifest文件需求 工作的设备 * 发现设备 * 获得和设备进行“交流”的权限 ...
- Android 7.0 Dialog 无法显示的问题
app 在 Android 7.0 上登录的时候, Dialog 不显示了,但是半透明背景显示 经过搜索和对比,发现出现该问题是因为重写了 getResources() 方法造成的 .重写该方法是为了 ...
- angular-1.3 之ng-model-options指令
ng-model-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法. ng-model-options允许我们控制ng-model何时进行同步. 比如:1.当某个确 ...