css常用标签集合(上)

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

上一篇:WPF:如何实现通用窗口?


下一篇:WEB前端基础之SCC(字体颜色背景-盒子模型)