以下内容大部分来自http://www.w3school.com.cn/
字体属性
文字字体:
- 格式:
- font-family:"字体一","字体二", .... ,泛型字体 ;
- 匹配原则:
- 从字体一开始,然后游览器在字符表中按顺序找到第一个匹配的字体
- 泛型字体:
- serif:定义在组成字母的直线末尾添加小尾角或卷曲位
- sans-serif:在字母直线末尾无小尾角或卷曲位
- cursive:它涉及基于人们手写文本方法的所有字体
- fantasy:任何不规则,稍微有些古怪的字体都属于这一类
- monospace:以相等的间隔显示每个字母
文字大小:
- 格式:
- font-size:N ;
- N 取值:
- 绝对值:xx-small,x-small,small,medium,large,x-large,xx-large
- 相对值: large,smaller
- 具体数字 :num px (例:50 px)
文字效果:
- 格式:
- font-style: normal | italic(斜体) |oblique(偏斜体);
文字粗细:
- 格式:
- font-weight :normal |bold |bolder |lighter |100~900;
- 说明:
- bolder 比font-weight重一级(+100)
- lighter 比font-weight轻一级(-100)
- normal = 400
- bold = 700
设置英文大小写转换属性:
- 格式:
- font-variant = normal | small-caps;
字体属性:
- 格式:
- font: [font-style] [font-variant] [font-weight] [font-size] [font-family];
字体颜色:
- 格式:
- color: #000000~ffffff | rgb(0,0,0) | black ;
文本属性
水平对齐方式:
- 格式:text-align : left | right | center | justify(两段对齐);
垂直对齐:
- 格式:vertical-align:baseline |sub |super |top |text-top |middle |bottom |text-bottom ;
- 说明:
- sub 以下标方式显示
- super 以上标显示
- baseline 默认对齐方式
- top | text-top 向上对齐
- bottom | text-bottom 向下结合
- middle 居中对齐
文本效果:
- 格式:text-decoration:none |underline |overline(文字上方横线) |line-through |blink ;
首行缩进:
- 格式:text-indent:N(长度值) ;
文字转换:
- 格式:text-transform:capitalize(英文单词首字母都大写) |uppercase |lowercase |none ;
单词之间间隔:
- 格式:word-spacing: normal |N(长度值,正数为增加,负数为减小) ;
字符之间间距:
- 格式:letter-spacing: normal | N (长度值,正数为增加,负数为减小) ;
压缩空白属性:
- 格式:white-space: normal | nowrap | pre | pre-line | pre-wrap
- 说明:
- normal:做正常的单词绕排行和空白压缩
- nowrap:,但不绕排(不自动插入换行)
- pre:不压缩空白,按源代码标记绕排
- pre-line:不压缩空白,在源代码有分行符或者行尾处绕排
- pre-wrap:压缩空白,在源代码有分行符或者行尾处绕排
行距:
- 格式:line-height: normal | N (长度值) ;
设置标注文字水平对齐方式:
- 格式:ruby-align : center | right | left ;
设置标注文字显示的位置:
- 格式:ruby-position: above(文字上方) | inline(文字同一行) ;
文本流浮动属性:
- 格式:
- float: left | none | right ;
- 说明:
- left 盒子移动到左边文本绕右流动
- right 盒子移动到右边文本绕左流动
阻止文本流体浮动属性:
- 格式:clear: both | left | right;
- 说明:
- both 向下移动的足够远阻止文本流动
- left,right 向下移动足够远,以便文本流不围绕盒子左右流动
背景属性
背景色:
- 格式:background-color: #000000~ffffff | rgb(0,0,0) | black ;
背景图像:
- 格式:background-image: url (图片位置 | "图片位置" | '图片位置') ;
背景图像排列方式:
- 格式:background-repeat: repeat |repeat-x |repeat-y |no-repeat ;
背景图像的位置:
- 格式:
- background-position: N N(N长度值,第一水平位置,第二垂直位置);
- background-position: top | bottom | right | left | center ; [第二个为center]
- N 取值说明:
- top=0%
- bottom=100%
- right=100%
- left=0%
- center=50%
背景图像固定显示:
- 格式:background-attachment:scroll |fixed ;
背景属性:
- 格式:background:[background-color] [background-image] [background-repeat] [background-attachment];
边框属性
边框样式:
- 格式:border-style: none | dotted | solid | ridge | outset | double | dashed | groove | inset;
- 说明:
- dotted 虚点线
- solid 实线
- ridge 脊线立体效果
- outset 浮出线立体效果
- double 双实线
- dashed 虚短线
- groove 沟线立体效果
- inset 嵌入线立体效果
边框的宽度:
- 格式:border-width: thin(细线) | thick(出线) | medium(中线) | N (长度值) ;
边框颜色:
- 格式:border-color: #000000~ffffff | rgb(0,0,0) | black ;
上,下,左,右框样式:
- 格式:
- border-top-style: none | dotted | solid | ridge | outset | double | dashed | groove | inset;
- border-bottom-style: none | dotted | solid | ridge | outset | double | dashed | groove | inset;
- border-left-style: none | dotted | solid | ridge | outset | double | dashed | groove | inset;
- border-right-style: none | dotted | solid | ridge | outset | double | dashed | groove | inset;
- 说明:(参看边框样式中说明)
上,下,左,右框的宽度:
- 格式:
- border-top-width: thin(细线) | thick(出线) | medium(中线) | N (长度值) ;
- border-bottom-width: thin | thick| medium | N ;
- border-left-width: thin | thick | medium | N ;
- border-right-width: thin | thick | medium | N ;
上,下,左,右框颜色:
- 格式:
- border-top-color: #000000~ffffff | rgb(0,0,0) | black ;
- border-bottom-color: #000000~ffffff | rgb(0,0,0) | black ;
- border-left-color: #000000~ffffff | rgb(0,0,0) | black ;
- border-right-color: #000000~ffffff | rgb(0,0,0) | black ;
设置上,下,左,右边框:
- 格式:
- border-top: [border-top-style] [border-top-width] [border-top-color];
- border-bottom: [border-bottom-style] [border-bottom-width] [border-bottom-color];
- border-left: [border-left-style] [border-left-width] [border-left-color];
- border-right: [border-right-style] [border-right-width] [border-right-color];
设置边框:
- 格式:border: [border-style] [border-width] [border-color];
边界属性
设置边界:
- 格式:
- margin: [margin-top&right&bottom&left];
- margin: [margin-top&bottom] [margin-left&right] ;
- margin: [margin-top] [margin-left&right] [margin-bottom];
- margin: [margin-top] [margin-right] [margin-bottom] [margin-leftt];
- 说明:
- margin-xxx 为:长度值,正数为增加,负数为减小;
设置上,下,左,右边界:
- 格式:
- margin-top: N (长度值,正数为增加,负数为减小);
- margin-bottom: N ;
- margin-left: N ;
- margin-right:N ;
边框与内容间距属性
设置边界:
- 格式:
- padding: [padding-top&bottom&left&right] ;
- padding: [padding-top&bottom] [padding-left&right];
- padding: [padding-top] [padding-left&right] [padding-bottom];
- padding: [padding-top] [padding-right] [padding-bottom] [padding-leftt];
- 说明:
- padding-xxx (长度值,正数为增加,负数为减小);
设置上,下,左,右边框与内容间距:
- 格式:
- padding-top: N (长度值,正数为增加,负数为减小);
- padding-bottom: N ;
- padding-left: N ;
- padding-right:N ;
列表属性
列表符号样式:
- 格式:list-style-type: none | circle | disc | square | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman ;
设置图片为项目符号:
- 格式:list-style-image: none | url (图片地址 | "图片位置" | '图片位置');
设置列表数据属性:
- 格式:list-style-position:inside |outside;
列表属性:
- 格式:list-style:[list-style-type] [list-style-image] [list-style-position]
表格属性
自动和固定布局:
格式:table-layout:auto |fixed(固定);
显示或隐藏空单元格:
格式:empty-cells:hide |show ;
折叠边框:
格式:border-collapse:collapse |separate;
单元格间距:
- 格式:
- border-spacing: N; (N为长度值,N为水平和垂直间隔)
- border-spacing: N M ; (N,M为长度值,N为水平间隔,M为垂直间隔)
表格标题位置:
格式: caption-side:bottom |top;
尺寸属性
元素高度:
格式:height:N; (N为长度值)
元素宽度:
格式:width:N;(N为长度值)
元素最大高度:
格式:max-height:N;(N为长度值)
元素最小高度:
格式:min-height:N;(N为长度值)
元素最大宽度:
格式:max-width:N;(N为长度值)
元素最小高度:
格式:min-height:N;(N为长度值)
内容溢出:
格式:over-flow:auto |hidden |scroll |visible(溢出内容在盒子外显示)
元素属性
定位元素上,下,左,右外边距边界与其包含块下边界之间的偏移:
- 格式:
- top: N; (长度值,整数为向内部,负数为向外部)
- bottom: N;
- left: N;
- right: N;
定位属性:
- 格式:position: absolute | fixed | relative | static ;
- 说明:
- absolute:相对于包含盒子的盒子给盒子定位
- fixed:相对于包含盒子的盒子给盒子定位,即使页面滚动,它也不移动
- relative:相对于盒子的通常位置给盒子定位
- static:把盒子放在它通常应该放得地方
剪裁绝对定位元素:
- 格式:clip: rect(top,right,bottom,left) |auto;(top,right,bottom,left为长度值)
堆叠顺序:
- 格式: z-index: Z;(Z为数值,数值低得在底层,高的在外层)
元素是否可见:
- 格式:visibility: visible | hidden | collapse
- 说明:collapse 在表格元素中,删除一行或一列,但不会影响表格布局.但非表格时,为 "hidden"
布局时元素生成的显示框类型:
- 格式:display: inline | none | block | inline-block | list-item| run-in| table| inline-table| table-row-group| table-header-group| table-footer-group | table-row | table-column| table-cell | table-caption
- 说明:
- none 此元素不会被显示.
- block 此元素将显示为块级元素,此元素前后会带有换行符.
- inline 默认.此元素会被显示为内联元素,元素前后没有换行符.
- inline-block 行内块元素.（CSS2.1 新增的值）
- list-item 此元素会作为列表显示.
- run-in 此元素会根据上下文作为块级元素或内联元素显示.
- 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]）
鼠标在元素上得样式:
- 格式:cursor: default | auto | crosshair | pointer | move | e-resize | ne-resize| nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | url (图片地址 | "图片位置" | '图片位置' )
- 说明:
- default 默认光标（通常是一个箭头）
- auto 浏览器设置的光标.
- crosshair 光标呈现为十字线.
- pointer 光标呈现为指示链接的指针（一只手）
- move 此光标指示某对象可被移动.
- e-resize 此光标指示矩形框的边缘可被向右（东）移动.
- ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）.
- nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）.
- n-resize 此光标指示矩形框的边缘可被向上（北）移动.
- se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）.
- sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）.
- s-resize 此光标指示矩形框的边缘可被向下移动（北/西）.
- w-resize 此光标指示矩形框的边缘可被向左移动（西）.
- text 此光标指示文本.
- wait 此光标指示程序正忙（通常是一只表或沙漏）.
- help 此光标指示可用的帮助（通常是一个问号或一个气球）.
- url 需使用的自定义光标的 URL.(注释：请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标)
CSS伪类或与伪类相关的属性
设置链接:
- 设置活动链接显示的样式: a:link {.......}
- 设置正在激活的链接显示的样式: a:active {......}
- 设置访问过的链接显示的样式: a:visited{......}
其他:
- 元素获得焦点时向元素添加特殊的样式:
- 格式:元素:focus{......}
- 说明:一般使用在表单或链接上
- 设置鼠标悬挂在元素上是链接显示的样式: 元素:hover{......}
- 元素的第一个子元素添加样式: 元素:first-child{.......}
文本:
- 向文本的第一个字母添加特殊样式: 元素:first-letter {.......}
- 向文本的首行添加特殊样式: 元素:first-line {......}
- 在文本之前添加内容: 元素:before {.......}
- 在文本之后添加内容: 元素:after {......}
与伪类相关的属性:
- 插入生成内容
- 格式:content:" 插入内容 | ((" attr(href) ") [在链接中])";
- 说明:
- attr(href) 在链接文本后插入链接
- 一般与 :before 以及 :after伪元素配合使用,来插入生成内容.
CSS 背景:http://www.w3school.com.cn/css/css_background.asp
CSS 文本:http://www.w3school.com.cn/css/css_text.asp
CSS 字体:http://www.w3school.com.cn/css/css_font.asp
CSS 列表:http://www.w3school.com.cn/css/css_list.asp
CSS 表格:http://www.w3school.com.cn/css/css_table.asp
CSS 轮廓:http://www.w3school.com.cn/css/css_outline.asp
CSS 内边距:http://www.w3school.com.cn/css/css_padding.asp
CSS 边框:http://www.w3school.com.cn/css/css_border.asp
CSS 外边距:http://www.w3school.com.cn/css/css_margin.asp
CSS 伪类 (Pseudo-classes):http://www.w3school.com.cn/css/css_pseudo_classes.asp
CSS 伪元素 (Pseudo-elements):http://www.w3school.com.cn/css/css_pseudo_elements.asp
1220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
