跳到主要内容

CSS 样式总结

· 阅读需 9 分钟
Yana Ching
Yana Ching
Front End Engineer

行内元素​

  • width、height 无效，可通过 line-height 设置

  • margin、padding 左右有效，上下无效

float​

  • none：设置对象不浮动
  • left：设置对象浮在左边
  • right：设置对象浮在右边

clear​

  • none：允许两边都可以有浮动对象
  • both：不允许有浮动对象
  • left：不允许左边有浮动对象
  • right：不允许右边有浮动对象

position （子绝父相）​

  • static：常规留
  • relative：参照自身
  • absolute：参照父元素，无父元素则参照 body
  • fixed：以窗口为参照

line-height 特殊使用​

  • 行高会继承，因此直接给父级，当 line-height 等于 height 的时候垂直居中

解决边框叠加问题​

margin-left: -1px; /* 解决边框叠加问题 */

清除浮动​

/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /* I6/I7专用 */
}

background​

所有背景属性都不能继承

背景色​

p {
  background-color: gray;
}

背景图像​

body {
  background-image: url(/i/eg_bg_04.gif);
}

/** 背景重复 */
body {
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
}
值描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承 background-repeat 属性的设置。

背景定位​

p {
  background-position: top;
  background-position: 50% 50%;
  background-position: 50px 100px;
}
// 左上为原点
单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left

背景关联​

background-attachment: fixed // 固定背景图片;;
值描述
scroll默认值。背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时，背景图像不会移动。
inherit规定应该从父元素继承 background-attachment 属性的设置。

text​

简写​

- font-style - font-variant - font-weight - font-size/line-height - font-family p.ex2 {
  font: italic bold 12px/20px arial, sans-serif;
}

缩进 text-indent（可继承）​

p {
  text-indent: 5em;
}
p {
  text-indent: 20%;
} // 缩进值是父元素的 20%，即 100 个像素

对齐 text-align​

值描述
left把文本排列到左边。默认值：由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit规定应该从父元素继承 text-align 属性的值。

字间隔 word-spacing​

p {
  word-spacing: 25px;
}
值描述
normal默认。定义单词间的标准空间。
length定义单词间的固定空间。
inherit规定应该从父元素继承 word-spacing 属性的值。

字母间隔 letter-spacing​

h1 {
  letter-spacing: -0.5em;
}
h4 {
  letter-spacing: 20px;
}
值描述
normal默认。规定字符间没有额外的空间。
length定义字符间的固定空间（允许使用负值）。
inherit规定应该从父元素继承 letter-spacing 属性的值。

文本装饰 text-decoration 值覆盖​

h2 {
  text-decoration: underline overline;
}
值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

处理空白符 white-space​

值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。


字体​


font-family 指定字体​


p {
  font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;
}


font-style 字体风格​


    

  • normal - 文本正常显示
    • 

  • italic - 文本斜体显示
    • 

  • oblique - 文本倾斜显示
    • 



字体变形 font-variant 设定小型大写字母​


p {
  font-variant: small-caps;
}


normal默认值。浏览器会显示一个标准的字体。
small-caps浏览器会显示小型大写字母的字体。
inherit规定应该从父元素继承 font-variant 属性的值。


字体大小 font-size​


推荐使用 em 尺寸单位 em 的值会相对于父元素的字体大小改变


p {
  font-size: 14px;
}

h1 {
  font-size: 3.75em;
} /* 60px/16=3.75em */
h2 {
  font-size: 2.5em;
} /* 40px/16=2.5em */
p {
  font-size: 0.875em;
} /* 14px/16=0.875em */


值描述
xx-small x-small small medium large x-large xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller把 font-size 设置为比父元素更小的尺寸。
larger把 font-size 设置为比父元素更大的尺寸。
length把 font-size 设置为一个固定的值。
%把 font-size 设置为基于父元素的一个百分比值。
inherit规定应该从父元素继承字体尺寸。


字体粗细 font-weight​


normal(400) / bold(700) / bolder / lighter p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}
p.thicker {
  font-weight: 900;
}


链接​


a:link {
  color: #ff0000;
} /* 未被访问的链接 */
a:visited {
  color: #00ff00;
} /* 已被访问的链接 */
a:hover {
  color: #ff00ff;
} /* 鼠标指针移动到链接上 */
a:active {
  color: #0000ff;
} /* 正在被点击的链接 */


    

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

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

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

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



列表​


简写​


list-style-type list-style-position list-style-image ul {
  list-style: square inside url('/i/arrow.gif');
}


列表类型 list-style-type​


ul {
  list-style-type: square;
}


列表项图像 list-style-image​


ul li {
  list-style-image: url(xxx.gif);
}


列表标志位置 list-style-position​


inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。


表格​


表格边框​


border: 1px solid blue;


折叠边框 border-collapse​


table {
  border-collapse: collapse;
}


表格宽高​


width: 100px;
width: 100%;
height: 100px;
height: 100%;


box-shadow 盒子阴影​


box-shadow: h-shadow v-shadow blur spread color inset;


值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。