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 ...
随机推荐
- android中的style部分属性值介绍
转自:http://blog.sina.com.cn/s/blog_70c759fd01013phv.html Android平台定义的主题样式: android:theme="@andro ...
- HUD 2717 Catch That Cow
Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- selenium python (四)键盘事件
#!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #在实际测试过程中,有时候我们需要使用tab键将焦点转移到下一个需要操作 ...
- linux 如何让程序在开机时启动,关机前关闭
可以将自己所写的script的文件名写入/etc/rc.d/rc.local(用户自定义开机启动程序) 中,在/etc/rc.d/init.d 中貌似也可以
- ansibleplaybook的使用
1.简单格式要求 [root@ansibleserver ansible]# cat nagios.yml --- - hosts: nagiosserver tasks: - name: ensur ...
- C#语言基础01
Console.WriteLine("hello"); Console.ReadKey();// 按一个按键继续执行 string s=Console.ReadLine();//用 ...
- F#相关图书推荐
C#与F#编程实践 作 者 [捷] Tomas Petricek,[英] Jon Skeet 著:贾洪峰 译 出 版 社 清华大学出版社 出版时间 2011-10-01 版 次 1 ...
- 【转】SQL Server 数据库内部版本号
-----------数据库还原或版本升级出现版本错误时可参考. Internal SQL Server Database Version Numbers A database created by ...
- 使用iphone5修剪视频的方法
iphone5有很高的视频拍摄质量,这人很多业余爱好者也加入了视频短片的拍摄当中.在拍摄视频的过程中,为了能够捕捉到精彩瞬间,常常会提前拍摄,并延迟结束拍摄,这样就给视频增加了很多无意义的片段.这时, ...
- CentOS下挂在NTFS分区
本文参考自http://www.cnblogs.com/gbyukg/archive/2011/11/02/2232343.html centos下想访问NTFS分区,现在普遍的方法是利用ntfs-3 ...