css背景
background-color{十六进制:如#b0c4de;/RGB"rgb(255,0,0)"/颜色名称"red"}
background-image{url(/image/bg.gif); /*背景图片*/ }
background-repeat{repeat; /*重复排列-网页默认*/ no-repeat; /*不重复排列*/ repeat-x; /*在x轴重复排列*/ repeat-y; /*在y轴重复排列*/ }
background-attachment{fixed; /*浮水印固定背景*/ }
background-position{ 90% 90%; /*背景图片x与y轴的位置*/ top; /*向上对齐*/ buttom; /*向下对齐*/ left; /*向左对齐*/ right; /*向右对齐*/ center; /*居中对齐*/ }
css 文本
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 设置文本方向。 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-shadow | 设置文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 设置元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
css字体
Property | 描述 |
---|---|
font | 在一个声明中设置所有的字体属性 |
font-family | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 指定字体的粗细。 |
css链接
这四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
css列表
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图像设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
css Table表格
table{border/边框 border-collapse/ 设置表格的边框是否被折叠成一个单一的边框或隔开/ Width和height属性定义表格的宽度和高度/ text-align设置水平对齐方式,向左,右,或中心 / background-color :颜色/ }
css盒子模型
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
css边框
属性 | 描述 |
---|---|
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 | 设置元素的上边框的宽度。 |
css轮廓
属性 | 说明 | 值 | CSS |
---|---|---|---|
outline | 在一个声明中设置所有的轮廓属性 |
outline-color outline-style outline-width inherit |
2 |
outline-color | 设置轮廓的颜色 |
color-name hex-number rgb-number invert inherit |
2 |
outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit |
2 |
outline-width | 设置轮廓的宽度 | thin medium thick length inherit |
css外边距
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
css padding(填充)
属性 | 说明 |
---|---|
padding | 使用简写属性设置在一个声明中的所有填充属性 |
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |
css分组和嵌套
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
css尺寸
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
line-height | 设置行高。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
width | 设置元素的宽度。 |
CSS Display(显示) 与 Visibility(可见性)
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
css Position(定位)
属性 | 说明 | 值 | CSS |
---|---|---|---|
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit |
2 |
clip | 剪辑一个绝对定位的元素 |
shape auto inherit |
2 |
cursor | 显示光标移动到指定的类型 |
url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit |
2 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit |
2 |
overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content |
2 |
overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content |
2 |
position | 指定元素的定位类型 | absolute fixed relative static inherit |
2 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit |
2 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit |
2 |
z-index | 设置元素的堆叠顺序 |
number auto inherit |
2 |
css Overflow
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
css浮动
属性 | 描述 | 值 | CSS |
---|---|---|---|
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
1 |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit |
1 |