关于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. UIScrollView 不能滚动的问题

    uiscrollview是开发sdk自带的控件, 在使用的时候,发现滚动不了, 最常山见的原因是 contentSize 这个属性,比uiscrollview的frame要小...所以无需滚动,自然就 ...

  2. memcache保存php的session 解决多服务器的session问题

    PECL :: Package :: memcache 2.1.1 版本的 Changelog 中有一条: - Added experimental session storage support. ...

  3. hdu 2177(威佐夫博奕)

    题意:容易理解,在威佐夫博奕的基础上新增加了一条要求:就是如果在赢得条件下,输出第一步怎么走. 分析:使用暴力判断,详细见代码. 代码: #include<stdio.h> #includ ...

  4. YII 快速创建项目GII

    Yii 是一个基于组件.纯OOP的.用于开发大型 Web 应用的高性能PHP框架. 它将Web编程中的可重用性发挥到极致,能够显著加速开发进程 .Yii适合大流量的应用,如门户.BBS.CMS及B2B ...

  5. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  6. HTML和URL比较

    1.录制脚本的基本原则 2.HTML和URL based script介绍 3.选择录制方式原则 4.HTML based script设置

  7. C语言实现strcpy

    strcpy.h: #ifndef STRCPY_H #define STRCPY_H #include <stdio.h> char *cat_strcpy(char *dst, con ...

  8. Tilera 服务器上hadoop单机版测试

    ---恢复内容开始--- 本篇博客用来记录在单个Tilera服务器上安装hadoop并且测试的经历,参阅了大多数博客. 1.Tilera服务器介绍 本Tilera服务器配备9核CPU,共挂在6块硬盘, ...

  9. 将dataset写入数据库

    最近在将excel中的文件导入到数据库中,用程序进行编写,由于数据量较大所以速度很慢,后来采用了SqlBulkCopy类,解决了速度的问题,我就insert语句,sqldataadapter.upda ...

  10. Chapter 3 Start Caffe with MNIST Demo

    先从一个具体的例子来开始Caffe,以MNIST手写数据为例. 1.下载数据 下载mnist到caffe-master\data\mnist文件夹. THE MNIST DATABASE:Yann L ...