HTML 样式

1. font字体

font-family 字体样式 比如:微软雅黑、Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体

color 字体颜色

font-size:50px 字体大小 注意：如果您没有规定字体大小，普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

text-align:center 对齐方式

font-style 字体风格斜体 normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示

font-variant 小型大写字母

font-weight字体粗细normal:400 bold:700 最粗:900

总结

属性

描述

font

简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时，对替换字体进行智能缩放。(CSS2.1 已删除该属性。)

font-stretch

对字体进行水平拉伸。(CSS2.1 已删除该属性。)

font-style

设置字体风格。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

2. background背景

background-color 背景颜色

background-image: url(/i/eg_bg_04.gif) 背景图片

background-position:center 背景定位 居中 (属性:top、bottom、left、right 和 center)

background-repeat 属性设置是否及如何重复背景图像

总结

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

inherit

规定应该从父元素继承 background-repeat 属性的设置。

3.text文本

text-indent: 5em; 缩进

text-indent: -5em;缩进悬挂

text-align:center 对齐方式 (属性:left、right 和 center)

word-spacing: 字间隔 30px或者-0.5em

letter-spacing 字母间隔 区别:字母间隔修改的是字符或字母之间的间隔

text-decoration 划线 属性 none / underline / overline / line-through / blink

white-space 处理空白符 它会把所有空白符合并为一个空格 属性:normal丢掉多余的空白符

属性

pre-line

合并

保留

允许

normal

合并

忽略

允许

nowrap

合并

忽略

不允许

pre

保留

保留

不允许

pre-wrap

保留

保留

允许

总结

属性

描述

color

设置文本颜色

direction

设置文本方向。

line-height

设置行高。

letter-spacing

设置字符间距。

text-align

对齐元素中的文本。

text-decoration

向文本添加修饰。

text-indent

缩进元素中文本的首行。

text-shadow

设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform

控制元素中的字母。

unicode-bidi

设置文本方向。

white-space

设置元素中空白的处理方式。

word-spacing

设置字间距。

4.a链接

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

text-decoration 属性大多用于去掉链接中的下划线: none

background-color属性大多用于设置链接中的背景色

5. list-style列表

list-style-type 设置显示方式 比如说是实心圆点 黑色方块

总结

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

marker-offset

6.表格

border 边框属性

width

height

text-align:right; 表格中的文本对齐方式

vertical-align: bottom; 垂直对齐方式

padding表格内边距

总结

属性

描述

border-collapse

设置是否把表格边框合并为单一的边框。

border-spacing

设置分隔单元格边框的距离。

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。

table-layout

设置显示单元、行和列的算法。

7.outline轮廓

属性

描述

CSS

outline

在一个声明中设置所有的轮廓属性。

2

outline-color

设置轮廓的颜色。

2

outline-style

设置轮廓的样式。

2

outline-width

设置轮廓的宽度。

p

{

border:red solid thin;

outline:#00ff00 dotted thick;

}

style>

head>

​

注释：b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 (以及更高版本) 才支持 outline 属性。p>

body>

html>

抽烟 // 方块点选,点选之后可以取消

喝酒 // 圆形点选,点选之后不可以取消

14.选择 点选

float: right;

float: left;

13.float浮动

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

position 属性值的含义：

position

12. Positioning定位

属性

描述

margin

简写属性。在一个声明中设置所有外边距属性。

margin-bottom

设置元素的下外边距。

margin-left

设置元素的左外边距。

margin-right

设置元素的右外边距。

margin-top

设置元素的上外边距。

总结

11.margin外边距和外边距合并

属性

描述

border

简写属性，用于把针对四个边的属性设置在一个声明。

border-style

用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width

简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color

简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom

简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color

设置元素的下边框的颜色。

border-bottom-style

设置元素的下边框的样式。

border-bottom-width

设置元素的下边框的宽度。

border-left

简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color

设置元素的左边框的颜色。

border-left-style

设置元素的左边框的样式。

border-left-width

设置元素的左边框的宽度。

border-right

简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color

设置元素的右边框的颜色。

border-right-style

设置元素的右边框的样式。

border-right-width

设置元素的右边框的宽度。

border-top

简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color

设置元素的上边框的颜色。

border-top-style

设置元素的上边框的样式。

border-top-width

设置元素的上边框的宽度。

总结

border-color: transparent; 透明边框

border-top-colorborder-right-colorborder-bottom-colorborder-left-color

边框的颜色

border-top-widthborder-right-widthborder-bottom-widthborder-left-width

边框的宽度

边框与背景

border-top-styleborder-right-styleborder-bottom-styleborder-left-style

定义边框样式:

border-style: none 没有边框

边框的样式

10.border边框

属性

描述

padding

简写属性。作用是在一个声明中设置元素的所内边距属性。

padding-bottom

设置元素的下内边距。

padding-left

设置元素的左内边距。

padding-right

设置元素的右内边距。

padding-top

设置元素的上内边距。

总结

h1 {padding: 10px;}

例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

padding 属性接受长度值或百分比值，但不允许使用负值。

9.padding内边距

element : 元素。

padding : 内边距，也有资料将其翻译为填充。

border : 边框。

margin : 外边距，也有资料将其翻译为空白或空白边。

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

8.盒子模型