CSS复合样式
关于font
OK,我们先从font来谈起。
如下一段代码:
div{
font-size: 14px;
font-family: '\5FAE\8F6F\96C5\9ED1';
font-weight: bold;
font-style:italic;
line-height: 28px;
}
OK,我们看到,这一系列的操作都是针对font的。这些样式,其实我们是可以缩写的。
div{font: italic bold 14px/28px '\5FAE\8F6F\96C5\9ED1';}
5行的代码用一个font搞定,
那么这样写是什么意思呢?
首先,font系列,也是可以缩写的
我们来分析一下上面的例子。
div{font: italic bold 14px/28px '\5FAE\8F6F\96C5\9ED1';}
font-style:italic
font- weight:bold
font-size:14px;
line-height:28px;
font-family: '\5FAE\8F6F\96C5\9ED1'; (微软雅黑的字符编码)
当然了,这个font还有一些更简单的写法。
如果你只有 字体大小 行高 和 字体的话
那么你就可以这样写了 font:14px/28px ‘\5FAE\8F6F\96C5\9ED1’;
当然 如果你的文字还要加粗的话,可以这样写
font:bold 14px/28px ‘\5FAE\8F6F\96C5\9ED1’;
这几个属性理论上没有顺序之分的
规定的顺序为:font-style,font-variant,font-weight,font-size,font-family
关于margin
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
OK,这么四个方向的margin都一样,那么就可以简单的写成margin:10px;了
margin中一些有意思的参数:
margin:0;
当它有一个值的时:它是4个方向都一样
Margin:0 auto;
当它有两个值时,第一个参数代表上下 第二个参数代表左右
Margin:0 auto 10px;
当它有三个值时,第一个是上 第二个是左右,第三个是下
Margin:10px 16px 11px 9px;
当他有四个值时,他就是四个方向,顺序是一个顺时针的顺序,故上 右 下 左 的一个顺序
Padding
同margin
关于background
如下一段背景代码:
background-color: red;
background-image: url(1.jpg);
background-position: left top;
background-repeat: no-repeat;
我们可以把他用复合写法写成
background:red url(1.jpg) left top no-repeat;
CSS复合样式的更多相关文章
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...
- 学习前端第二天之css层叠样式
一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体 ( 可直接跟 ...
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- @错误抑制运算符和or die()
1.错误抑制运算符可在任何表达式前使用,PHP支持一个错误抑制运算符@.当将其放置在一个PHP表达式之前,则该表达式可能产生的任何错误信息都被忽略掉.@运算符只对表达式有效. 2.or die() 当 ...
- socket基础实例(一个服务端对应一个客户端情形)
服务端处理1个客户端的例子 运行结果: (1) while(accept+if(recv)) 情形 执行服务端进程: [root@localhost single_link]# ./server [s ...
- 13、NFC技术:读写非NDEF格式的数据
MifareUltralight数据格式 将NFC标签的存储区域分为16个页,每一个页可以存储4个字节,一个可存储64个字节(512位).页码从0开始(0至15).前4页(0至3)存储了NFC标签相关 ...
- sql统计重复数据
sql代码如下: 统计重复的数据 select MingCheng from tabShouFeiGongShi group by MingCheng having count(MingCheng) ...
- MemoryMappingFile泄漏分析过程
最近项目突然收到了一个紧急的问题报告 - 用户在进行某些关键操作的时候整个软件突然就crash掉了.幸好产品继承了自动抓取dump的功能... 收到dump之后,通过windbg打开,查看相应的c ...
- 在Cubieboard上关闭irqbalance服务避免内存泄漏
十一一个假期回来,顺手看了看自己的cubieboard运行状态怎么样 aria2正常: btsync正常: samba正常: 很好, 顺手htop一下,已经开机了13天了,CPU使用率4%,内存使用率 ...
- HW7.13
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 怎么利用C#中的 webclient 创建cookie
Cookies are not limited only to web browsers. any http-aware client that supports cookies can deal w ...
- js运动 摩擦运动
<!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...
- jquery cookie用法(获取cookie值,删除cookie)
1.引入文件 2.具体操作 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie ...