设置元素的最大高度、最小高度、最大宽度、最小宽度,用max-height、min-height、max-width、min-width。
visibility:设置元素是否可见。visible和hidden。
filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;opacity: 0.7;
文本:
- 使用 text-indent 属性,元素首行缩进。一般来说,适用于所有的块级元素,但无法适用于行内元素和类似于图片这样的元素。可以用%、固定值和负值、继承(使用此值,父元素最好要padding相应值)。
- 使用text-align属性,会影响一个元素中的文本行互相之间的对齐方式。(块级和表元素居中要使用外边距实现)。left、right 、center和<center>(不仅影响文本,还会把整个元素居中)、justify(使文本的两端都对齐,由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,不同浏览器拉伸定义不同,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间)、inherit(继承)。
- word-spacing 属性可以改变字(单词)之间的标准间隔。接受正值和负值。
- letter-spacing 属性,字母间隔修改的是字符或字母之间的间隔。
- text-transform 属性处理文本的大小写。none、uppercase(小写改为大写)、lowercase(大写改为小写)和capitalize(只对每个单词的首字母大写)。
- text-decoration文本装饰。none、underline(下划线)、overline(上划线)、line-through(贯穿线)、blink(闪烁)。text-decoration 值会替换而不是累积起来。
a:link a:visited {text-decoration: underline overline;}
- white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。normal(如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格)、nowrap(防止元素中的文本换行,除非使用了一个 br 元素)、pre(浏览器将会注意额外的空格,甚至回车)、 pre-wrap (浏览器不仅会保留空白符并保留换行符,还允许自动换行)和 pre-line(浏览器会保留换行符,并允许自动换行,但是会合并空白符)。
- direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。ltr 和 rtl两个值。对于行内元素,只有当 unicode-bidi 属性设置为 embed (这个值对于双向算法会打开附件的一层嵌套)或 bidi-override(会为行内元素创建一个覆盖) 时才会应用 direction 属性。
- line-height设置行间距。百分比(100%为标准行高,即当前字体尺寸。大多数浏览器中默认行高大约是 110% 到 120%。)、像素值(大多数浏览器中默认行高大约是 20px。)和数值(默认行高大约是 1。1为标准行高。)、normal、inherit。不允许使用负值。
- color:文本颜色
- background-color:文本背景颜色。
背景:(background)CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
- background-color :设置背景色
- background-image:把图像放入背景。p.flower {background-image: url(/i/eg_bg_03.gif);}
- background-repeat:在页面上对背景图像进行平铺。repeat、repeat-x、repeat-y、no-repeat、inherit。
- background-position:改变图像在背景中的位置。可以使用关键字、像素值、百分比、负值,可以混合使用 % 和 position 值。通常两个值,一个水平方向,一个竖直方向。关键字:top、bottom、left、right 和 center(通常成对出现)。如果只出现一个值,那么第二值是center。像素值:规定了一个值,另一个值将是50%。百分比:左上角是 0% 0%。右下角是 100% 100%。规定了一个值,另一个值将是50%。
- background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。scroll、fixed和inherit。
- background-size:规定背景图片的尺寸。
- background-origin:规定背景图片的定位区域。规定 background-position 属性相对于什么位置来定位。padding-box(背景图像相对于内边距框来定位)、border-box(相对于边框盒来定位)和content-box(相对于内容框来定位)。
- background-clip:规定背景的绘制区域。border-box(背景被裁剪到边框盒)、padding-box(被裁剪到内边距框)和content-box(被裁剪到内容框)。
轮廓:(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
- outline-color:设置轮廓的颜色。
- outline-width:设置轮廓的宽度。
- outline-style:设置轮廓的样式。轮廓线不会占据空间,也不一定是矩形。
none | 默认。定义无轮廓。 |
dotted | 定义点状的轮廓。 |
dashed | 定义虚线轮廓。 |
solid | 定义实线轮廓。 |
double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
inherit | 规定应该从父元素继承轮廓样式的设置。 |
字体:
- font-family:
- 两种不同类型的字体系列名称:
- 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace"Sans-serif CursiveFantasy)
- 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier"Georgia )
- 两种字体结合解决用户代理上没有安装字体的问题,font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;按顺序优先使用。
- 最常用的三种类型:直接中文;英文形式;unicode码;
中文名 英文名 Unicode Windows * 宋体 SimSun 5B8B4F53 * 黑体 SimHei 9ED14F53 * 微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1 微软正黑体 Microsoft JhengHei 5FAEx8F6F6B639ED14F53 新宋体 NSimSun 65B05B8B4F53 新细明体 PMingLiU 65B07EC6660E4F53 细明体 MingLiU 7EC6660E4F53 标楷体 DFKai-SB 680769774F53 仿宋 FangSong 4EFF5B8B 楷体 KaiTi 69774F53 仿宋_GB2312 FangSong_GB2312 4EFF5B8B_GB2312 楷体_GB2312 KaiTi_GB2312 69774F53_GB2312 Mac OS * 华文细黑 STHeiti Light [STXihei] 534E65877EC69ED1 * 华文黑体 STHeiti 534E65879ED14F53 华文楷体 STKaiti 534E658769774F53 华文宋体 STSong 534E65875B8B4F53 华文仿宋 STFangsong 534E65874EFF5B8B 丽黑 Pro LiHei Pro Medium 4E3D9ED1 Pro 丽宋 Pro LiSong Pro Light 4E3D5B8B Pro 标楷体 BiauKai 680769774F53 苹果丽中黑 Apple LiGothic Medium 82F9679C4E3D4E2D9ED1 苹果丽细宋 Apple LiSung Light 82F9679C4E3D7EC65B8B - 两种不同类型的字体系列名称:
- font-style 属性最常用于规定斜体文本。
- normal - 文本正常显示
- italic - 文本斜体显示。一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。
- oblique - 文本倾斜显示。正常竖直文本的一个倾斜版本。
- font-variant 属性可以设定小型大写字母。
- font-weight 属性设置文本的粗细。normal(400)、bold(700)、bolder、 lighter、inherit和数值(关键字 100 ~ 900 为字体指定了 9 级加粗度)。
- font-size 属性设置文本的大小。可以是绝对或相对值。普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。为了在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小,使用百分比和em结合的方式,body{font-size:100%;}h1{font-size:3.75em}。
链接:a:link,a:visited,a:hover,a:active
列表:(list-style)允许你放置、改变列表项标志,或者将图像作为列表项标志。
- list-style-image:对各标志使用一个图像。值为url('/images/blueball.gif')。始终规定一个 "list-style-type" 属性以防图像不可用。
- list-style-position :设置在何处放置列表项标记。
side 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 inherit 规定应该从父元素继承 list-style-position 属性的值。 - list-style-type:设置列表项标记的类型。
none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。) lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。) hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic 简单的表意数字 hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
表格:
- border-spacing :设置相邻单元格的边框间的距离(仅用于“边框分离”模式separate)。如果定义一个 length 参数,那么定义的是水平和垂直间距。如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。不允许使用负值。
- caption-side :设置表格标题的位置。top和bottom。
- empty-cells :设置是否显示表格中的空单元格(仅用于“分离边框”模式)。hide和show。
- tableLayout :用来显示表格单元格、行、列的算法规则。automatic(默认。列宽度由单元格内容设定)和fixed(列宽由表格宽度和列宽度设定)。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。
- border-collapse :设置表格的边框是否被合并为一个单一的边框。
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
display:规定元素应该生成的框的类型。
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
媒介类型:(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
注释:媒介类型名称对大小写不敏感。
媒介类型 | 描述 |
---|---|
all | 用于所有的媒介设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
用于打印机。 | |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |