关于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复合样式的更多相关文章

  1. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...

  2. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  3. 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  4. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  5. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  6. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  7. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  8. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. @错误抑制运算符和or die()

    1.错误抑制运算符可在任何表达式前使用,PHP支持一个错误抑制运算符@.当将其放置在一个PHP表达式之前,则该表达式可能产生的任何错误信息都被忽略掉.@运算符只对表达式有效. 2.or die() 当 ...

  2. socket基础实例(一个服务端对应一个客户端情形)

    服务端处理1个客户端的例子 运行结果: (1) while(accept+if(recv)) 情形 执行服务端进程: [root@localhost single_link]# ./server [s ...

  3. 13、NFC技术:读写非NDEF格式的数据

    MifareUltralight数据格式 将NFC标签的存储区域分为16个页,每一个页可以存储4个字节,一个可存储64个字节(512位).页码从0开始(0至15).前4页(0至3)存储了NFC标签相关 ...

  4. sql统计重复数据

    sql代码如下: 统计重复的数据 select MingCheng from tabShouFeiGongShi group by MingCheng having count(MingCheng) ...

  5. MemoryMappingFile泄漏分析过程

    最近项目突然收到了一个紧急的问题报告 - 用户在进行某些关键操作的时候整个软件突然就crash掉了.幸好产品继承了自动抓取dump的功能...   收到dump之后,通过windbg打开,查看相应的c ...

  6. 在Cubieboard上关闭irqbalance服务避免内存泄漏

    十一一个假期回来,顺手看了看自己的cubieboard运行状态怎么样 aria2正常: btsync正常: samba正常: 很好, 顺手htop一下,已经开机了13天了,CPU使用率4%,内存使用率 ...

  7. HW7.13

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  8. 怎么利用C#中的 webclient 创建cookie

    Cookies are not limited only to web browsers. any http-aware client that supports cookies can deal w ...

  9. js运动 摩擦运动

    <!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...

  10. jquery cookie用法(获取cookie值,删除cookie)

    1.引入文件 2.具体操作 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie ...