css 笔记

偷心无痕 2015-11-03

展开全文

字体属性

文字字体:

格式:
- 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 定义的可用光标)