css 笔记 --- css 属性

 以下内容大部分来自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