CSS参考样式大全

谁借莪１个温暖的怀抱￠ 2022-11-16 05:47 147阅读 0赞

# **目录** #

CSS参考样式

一. 字体属性：(font)

二. 常用字体： (font-family)

三. 背景属性： (background)

四. 区块属性： (Block)

五. 方框属性： (Box)

六. 边框属性： (Border)

七. 列表属性： (List-style)

八. 定位属性： (Position)

九. CSS文字属性

十. CSS边框空白

--------------------

# CSS参考样式 #

## 一. 字体属性：(font) ##

1. 大小 \{font-size: x-large;\}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

2. 样式 \{font-style: oblique;\}(偏斜体) italic;(斜体) normal;(正常)

3. 行高 \{line-height: normal;\}(正常) 单位：PX、PD、EM

4. 粗细 \{font-weight: bold;\}(粗体) lighter;(细体) normal;(正常)

5. 变体 \{font-variant: small-caps;\}(小型大写字母) normal;(正常)

6. 大小写 \{text-transform: capitalize;\}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

7. 修饰 \{text-decoration: underline;\}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

--------------------

## 二. 常用字体： (font-family) ##

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

--------------------

## 三. 背景属性： (background) ##

1. 色彩 \{background-color: \#FFFFFF;\}

2. 图片 \{background-image: none;\}

3. 重复 \{background-repeat: no-repeat;\}repeat-x(水平);repeat-y(垂直)

4. 滚动 \{background-attachment: fixed;\}(固定) scroll;(滚动)

5. 位置 \{background-position: left;\}(水平) top(垂直);

简写方法 \{background:\#000 url(..) repeat fixed left top;\} /\*简写·这个在阅读代码中经常出现.

--------------------

## 四. 区块属性： (Block) ##

1. 字间距 \{letter-spacing: normal;\} 数值

2. 对齐 \{text-align: justify;\}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

3. 缩进 \{text-indent: 数值px;\}

4. 垂直对齐 \{vertical-align: baseline;\}(基线) sub;(下标) sup;(上标) top; text-top; middle; bottom; text-bottom;

5. 词间距word-spacing: normal; 数值

6. 空格white-space: pre;(保留) nowrap;(不换行)

7. 显示 \{display:block;\}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /\*display 属性的了解很模糊\*/

--------------------

## 五. 方框属性： (Box) ##

1. width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

--------------------

## 六. 边框属性： (Border) ##

1. border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度

border-color:\#;

简写方法border：width style color; /\*简写\*/

--------------------

## 七. 列表属性： (List-style) ##

1. 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

2. 位置list-style-position: outside;(外) inside;