首页 > web前端 > css教程 > CSS常用属性总结四

CSS常用属性总结四

黄舟
发布: 2017-01-19 14:32:20
原创
1167 人浏览过

       ******* CSS 常用属性  *********

【font】 

 

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)!


相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板