关于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. android中的style部分属性值介绍

    转自:http://blog.sina.com.cn/s/blog_70c759fd01013phv.html Android平台定义的主题样式: android:theme="@andro ...

  2. HUD 2717 Catch That Cow

    Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. selenium python (四)键盘事件

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #在实际测试过程中,有时候我们需要使用tab键将焦点转移到下一个需要操作 ...

  4. linux 如何让程序在开机时启动,关机前关闭

    可以将自己所写的script的文件名写入/etc/rc.d/rc.local(用户自定义开机启动程序) 中,在/etc/rc.d/init.d 中貌似也可以

  5. ansibleplaybook的使用

    1.简单格式要求 [root@ansibleserver ansible]# cat nagios.yml --- - hosts: nagiosserver tasks: - name: ensur ...

  6. C#语言基础01

    Console.WriteLine("hello"); Console.ReadKey();// 按一个按键继续执行 string s=Console.ReadLine();//用 ...

  7. F#相关图书推荐

    C#与F#编程实践 作      者 [捷] Tomas Petricek,[英] Jon Skeet 著:贾洪峰 译 出 版 社 清华大学出版社 出版时间 2011-10-01 版      次 1 ...

  8. 【转】SQL Server 数据库内部版本号

    -----------数据库还原或版本升级出现版本错误时可参考. Internal SQL Server Database Version Numbers A database created by ...

  9. 使用iphone5修剪视频的方法

    iphone5有很高的视频拍摄质量,这人很多业余爱好者也加入了视频短片的拍摄当中.在拍摄视频的过程中,为了能够捕捉到精彩瞬间,常常会提前拍摄,并延迟结束拍摄,这样就给视频增加了很多无意义的片段.这时, ...

  10. CentOS下挂在NTFS分区

    本文参考自http://www.cnblogs.com/gbyukg/archive/2011/11/02/2232343.html centos下想访问NTFS分区,现在普遍的方法是利用ntfs-3 ...