******* css 常用属性 *********
【font】
KesionIMALL（后面简称IMALL）电子商务系统采用微软.NET4.0平台以及全新的软件开发环境（VS2012,SqlServer2000/2005/2008），采用B/S三层结构开发的内容管理系统。8套清新靓丽的模板风格，总有一款适合您。“PC版+手机版+微商城+APP四合为一”，同一后台、统一数据库，以最低的成本，最快速的方式搭建专属的电子商务网站。
立即学习“前端免费学习笔记（深入）”；
font 设置或检索对象中的文本特性。该属性是复合属性。
立即学习“前端免费学习笔记（深入）”；
使用第一种声明方式参数必须按照如上的排列顺序，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
立即学习“前端免费学习笔记（深入）”；
： 指定文本字体样式
： 指定文本是否为小型的大写字母
： 指定文本字体的粗细
： 指定文本字体尺寸
： 指定文本字体的行高
： 指定文本使用某个字体或字体序列
caption： 使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
icon： 使用图标标签的字体（CSS2）
menu： 使用菜单的字体（CSS2）
message-box： 使用信息对话框的文本字体（CSS2）
small-caption： 使用小控件的字体（CSS2）
status-bar： 使用窗口状态栏的字体（CSS2）
立即学习“前端免费学习笔记（深入）”；
--------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
font-family： 设置或检索用于对象中文本的字体名称序列。
立即学习“前端免费学习笔记（深入）”；
默认值：由user agent决定
立即学习“前端免费学习笔记（深入）”；
序列可包含嵌入字体。
一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。
user agent会遍历定义的字体序列，直到匹配到某个字体为止。
立即学习“前端免费学习笔记（深入）”；
body{font-family:helvetica,verdana,sans-serif;}
如上字体定义，假设你机器上没有helvetica字体，但有verdana，这时将会以verdana显示你的文字。
立即学习“前端免费学习笔记（深入）”；
： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起
： 字体序列名称。
立即学习“前端免费学习笔记（深入）”；
-----------------------------------------------------------------------------------------------
font-size： 设置或检索对象中的字体尺寸。
立即学习“前端免费学习笔记（深入）”；
： 根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)，
： 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger
： 用长度值指定文字大小。不允许负值。
： 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
立即学习“前端免费学习笔记（深入）”；
----------------------------------------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
font-stretch：设置或检索对象中的文字是否横向拉伸变形。
立即学习“前端免费学习笔记（深入）”；
文字的拉伸是相对于浏览器显示的字体的正常宽度。
立即学习“前端免费学习笔记（深入）”；
ultra-condensed： 比正常文字宽度窄4个基数。
extra-condensed： 比正常文字宽度窄3个基数。
condensed： 比正常文字宽度窄2个基数。
semi-condensed： 比正常文字宽度窄1个基数。
normal： 正常文字宽度
semi-expanded： 比正常文字宽度宽1个基数。
expanded： 比正常文字宽度宽2个基数。
extra-expanded： 比正常文字宽度宽3个基数。
ultra-expanded： 比正常文字宽度宽4个基数。
立即学习“前端免费学习笔记（深入）”；
------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
font-style ： 设置或检索对象中的文本字体样式。
立即学习“前端免费学习笔记（深入）”；
normal： 指定文本字体样式为正常的字体
italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
立即学习“前端免费学习笔记（深入）”；
---------------------------------------------------------------------------------------------
font-variant : 设置或检索对象中的文本是否为小型的大写字母。
立即学习“前端免费学习笔记（深入）”；
normal： 正常的字体
small-caps： 小型的大写字母字体
立即学习“前端免费学习笔记（深入）”；
----------------------------------------------------------
font-weight: 设置或检索对象中的文本字体的粗细。
立即学习“前端免费学习笔记（深入）”；
作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的
匹配。也就是说，用户可能看不到不同值之间的差异。
立即学习“前端免费学习笔记（深入）”；
normal： 正常的字体。相当于number为400
bold： 粗体。相当于number为700。
bolder： 特粗体。也相当于strong和b对象的作用
lighter： 细体
： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
立即学习“前端免费学习笔记（深入）”；
----------------------------------------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
********************************************************************************************************************
立即学习“前端免费学习笔记（深入）”；
display:inline 让行内显示为块的元素，变为行内显示
立即学习“前端免费学习笔记（深入）”；
display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值
立即学习“前端免费学习笔记（深入）”；
DIV1
DIV2
这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了
DIV1
DIV2
DIV1和DIV2这时候显示在同一行了
立即学习“前端免费学习笔记（深入）”；
display:block就是将元素显示为块级元素.
立即学习“前端免费学习笔记（深入）”；
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
立即学习“前端免费学习笔记（深入）”；
-------------------------------------------------------------------------------------------------------------------------
*******************************************************************************************************************
立即学习“前端免费学习笔记（深入）”；
【border】 复合属性。设置对象边框的特性。
立即学习“前端免费学习笔记（深入）”；
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
立即学习“前端免费学习笔记（深入）”；
border-color：设置或检索对象的边框颜色。
立即学习“前端免费学习笔记（深入）”；
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0或border-style设置为none，本属性将被忽略。
立即学习“前端免费学习笔记（深入）”；
-----------------------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
border-image 复合属性。设置或检索对象的边框样式使用图像来填充。
使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
立即学习“前端免费学习笔记（深入）”；
[ border-image-source ]： 设置或检索对象的边框是否用图像定义样式或图像来源路径。
[ border-image-slice ]： 设置或检索对象的边框背景图的分割方式。
[ border-image-width ]： 设置或检索对象的边框厚度。
[ border-image-outset ]： 设置或检索对象的边框背景图的扩展。
[ border-image-repeat ]： 设置或检索对象的边框图像的平铺方式。
立即学习“前端免费学习笔记（深入）”；
------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
border-radius 设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
立即学习“前端免费学习笔记（深入）”；
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
立即学习“前端免费学习笔记（深入）”；
： 用长度值设置对象的圆角半径长度。不允许负值
： 用百分比设置对象的圆角半径长度。不允许负值
立即学习“前端免费学习笔记（深入）”；
----------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
border-width 设置或检索对象的边框宽度。
立即学习“前端免费学习笔记（深入）”；
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-style设置为none，本属性将失去作用。
立即学习“前端免费学习笔记（深入）”；
： 用长度值来定义边框的厚度。不允许负值
medium： 定义默认厚度的边框。
thin： 定义比默认厚度细的边框。
thick： 定义比默认厚度粗的边框。
立即学习“前端免费学习笔记（深入）”；
-----------------------------------------
立即学习“前端免费学习笔记（深入）”；
border-left-style 设置或检索对象的左边边框样式。
立即学习“前端免费学习笔记（深入）”；
如果border-width等于0，本属性将失去作用。
立即学习“前端免费学习笔记（深入）”；
none： 无轮廓。border-color与border-width将被忽略
hidden： 隐藏边框。IE7及以下尚不支持
dotted： 点状轮廓。IE6下显示为dashed效果
dashed： 虚线轮廓。
solid： 实线轮廓
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。
立即学习“前端免费学习笔记（深入）”；
-------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
border-top 复合属性。设置对象顶部边框的特性。
立即学习“前端免费学习笔记（深入）”；
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
立即学习“前端免费学习笔记（深入）”；
[ border-top-width ]： 设置或检索对象的顶部边框宽度。
[ border-top-style ]： 设置或检索对象的顶部边框样式。
[ border-top-color ]： 设置或检索对象的顶部边框颜色。
立即学习“前端免费学习笔记（深入）”；
----------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
box-shadow 设置或检索对象阴影。
立即学习“前端免费学习笔记（深入）”；
可以设定多组效果，每组参数值以逗号分隔。
立即学习“前端免费学习笔记（深入）”；
none： 无阴影
①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
立即学习“前端免费学习笔记（深入）”；
--------------------------------------------------------------------------------
立即学习“前端免费学习笔记（深入）”；
透明度
立即学习“前端免费学习笔记（深入）”；
写成：
{
filter: alpha(opacity=10); //针对ie
}这样基本上就可以在所有浏览器中实现透明度
以上就是CSS常用属性总结四的内容，更多相关内容请关注PHP中文网（www.php.cn）！
