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 ...
随机推荐
- python基础学习 Day19 面向对象的三大特性之多态、封装 property的用法(1)
一.课前内容回顾 继承作用:提高代码的重用性(要继承父类的子类都实现相同的方法:抽象类.接口) 继承解释:当你开始编写两个类的时候,出现了重复的代码,通过继承来简化代码,把重复的代码放在父类中. 单继 ...
- Java8 Optional的简单操作
我们经常会遇到这种情况:首先判断一个对象是否为null,如果不为null,获取一个对象中的一个属性,如果该属性不为null,又获取该属性的属性,如果该属性的属性不为null,又获取属性的属性的属性: ...
- pandas 数据结构基础与转换
pandas 最常用的三种基本数据结构: 1.dataFrame: https://pandas.pydata.org/pandas-docs/stable/generated/pandas.Data ...
- 1.1、CDH 搭建Hadoop在安装之前(配置网络名称)
重要: CDH需要IPv4.不支持IPv6.提示:粘合时,请使用bond0 IP地址,因为它代表所有聚合链接. 按如下方式配置群集中的每个主机,以确保所有成员可以相互通信: 将主机名设置为唯一名称(不 ...
- linux中weblogic相关命令操作
在weblogic的目录下找到bin目录,其中有startWeblogic.sh.startManagerWeblogic.sh等 首先需要启动startWeblogic.sh,这个是管理服务,也就是 ...
- nodejs windows安装
[安装步骤] 一.安装node.js 1.前往node.js官网下载(我下载的是v10.8.0)并安装工具,这里安装路径选到D盘,e:\Program Files\nodejs 安装完毕在命令行输入以 ...
- linux命令清除服务器缓存
linux 服务器开了某项服务或程序后,内存占用的非常大,停止服务或关闭进程后,内存不会立即释放,需要手动释放,使用命令 echo 3 > /proc/sys/vm/drop_chaches 释 ...
- Excel图表编辑---表格移动,样式修改
一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ...
- AltiumDesigner 网络标号放置技巧
我们在使用AD画图的过程中,灵活的使用一些小技巧可以使我们的工作事半功倍,今天给大家介绍一种在画原理图过程中的小技巧. 我们在画原理图过程中经常会放置网络标号,尤其是很多芯片管脚上,例如现在我需要在这 ...
- 转)VCSA 6.5重启无法访问,报错“503 Service Unavailable”的解决方法
1. 问题 重启vcenter,登陆vsphere client,提示 “503 Service Unavailable (Failed to connect to endpoint: [N7Vmac ...