CSS中(font和background)的简写形式
转自:http://blog.csdn.net/shenzhennba/article/details/7356095
1.字体属性主要包括下面几个:
font-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);
font-variant (字体变化): normal(正常)或small-caps(小体大写字母);
font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);
font-size(字体大小): 可通过多种不同单位(比如像素或百分比等)来设置, 如:12xp,12pt,120%,1em
如果用 font属性的话,就可以把几个样式进行简化,减少书的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):
font-style | font-variant | font-weight | font-size | font-family
例如:
.fontStyle01{
font-style: italic;
font-variant: normal
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
上面的样式简写为:
.fontStyle01{font:italic normal bold 12px arial,verdana;}
2.背景
background-color:#999999; //元素的背景色
background-image : url("path/bgFile.gif"); //设置背景图像
background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式
background-attachment : fixed | scroll; //设置背景图片的固定方式
background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%]; //设置背景的左上角位置,坐标可以是以百分比或固定单位
background缩写各个值的次序依次如下:
background-color | background-image | background-repeat | background-attachment | background-position
如果省略某个属性不写出来,那么将自动为它取缺省值。比如,如果去掉background-attachment和background-position的话:
background: #FFCC66 url("butterfly.gif") no-repeat;
例如:
.bg01{
background-image: url("path/bgFile.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
上面可以简写为:
.bg01{
background:#FFCC66 url("path/bgFile.gif") no-repeat fixed left top;
}
补充:background-size
取值:
1、value1 value2
宽度 高度
2、value1% value2%
百分比
3、cover
覆盖,将背景图像等比缩放,直到背景能够覆盖到元素的所有区域
4、contain
包含,将背景图像等比缩放,直到背景图像碰到右边或下边时,停止缩放。
CSS中(font和background)的简写形式的更多相关文章
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...
- css中 font常用的样式属性
今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型: 如: font-family:宋体; 2)字体大小 语法:font-size: ...
- css 中font属性知识点总结
一. font属性值可以继承.例如子元素可以继承父元素的行高,字体大小等等. 二.font属性可以进行连写:font: font-sytle font-weight font-size/line- ...
- CSS中常用的简写模式
一.font属性简写 font-style:字体样式 normal 默认值.浏览器显示一个标准的字体样式. italic 浏览器会显示一个斜体的字体样式. oblique 浏览器会显示一个倾斜的字体样 ...
- TP5.1:将外部资源引入到框架中(css/js/font文件)
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS 背景图像 background属性简写
background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...
随机推荐
- C# CefSharp MemoryStreamResponseFilter这个类使用过程中遇到的bug,dataIn.CopyTo(dataOut)异常
使用这个类,可以获取请求的所有数据,可用来下载网站的图片.js等 cef给出的源码 dataIn.CopyTo(dataOut);这句代码,有时候会有问题.问题是这个:dataIn.length 会大 ...
- CSS----学习
CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...
- html页面嵌套---分享功能
1.使用原因 项目中用到了thymeleaf去渲染模板,但是我们这有一个分享的页面,分享出去的页面要加上与生成模板不一样的内容.因为重新再加一套模板又会引起内容的重复与资源浪费.这里就用到了JS的lo ...
- python list 常用
l = [,,,] b = [,,] l.remove() #val del l[] #key new_list = l.extend(b) #[,,,,,,] new_list = l.append ...
- Linux命令_1
文件和目录命令 从P19开始的笔记 目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch mkdir rm 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 ...
- Real Time Rendering 1
[Real Time Rendering 1] 1.RTR是一本导论.官网:http://www.realtimerendering.com. 2.At around 6 fps, a sense o ...
- python 文件操作: 文件操作的函数, 模式及常用操作.
1.文件操作的函数: open("文件名(路径)", mode = '模式', encoding = "字符集") 2.模式: r , w , a , r+ , ...
- vue element upload上传、清除等
如果项目中可以使用file-list,那我们可以点击file-list删除文件列表: 有时候项目中是不要这个文件列表的,所以在上传成功以后,文件列表一直存在,要重新上传就必须刷新页面,所以我们需要手动 ...
- mybatis知识点(已掌握)
1.${} 和 #{} 的区别? ${} 直接显示传入数据,不能防止sql注入,一般用于传数据库对象(比如表名). #{} 传入数据被当成字符串,自动加上双引号,防止sql注入. 2.有哪些Execu ...
- unity3d休闲篮球类游戏《Flick Basketball 》上线项目完整源码
下载地址: https://item.taobao.com/item.htm?id=576135964241