CSS3点点滴滴

css查遗补漏

标签（空格分隔）： css

---

• 如果值为若干单词，则要给值加引号。p {font-family: "sans serif";}

• body的字体有继承兼容性问题，通常这么搞：

  body {
  
  font-family: Verdana, sans-serif;
  
  }
  
  p, td, ul, ol, li, dl, dt, dd {
  
  font-family: Verdana, sans-serif;
  
  }
  
  p {
  
  font-family: Times, "Times New Roman", serif;
  
  }

• 在用空格分割的多属性值时，用下面的选择器：[class~=hide] { color:red; }注意波浪号的使用。

• 所有的背景属性都是不可继承的！backgroud-color/img/position/repeat等等。

• 如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距。

• 文本控制：text-indent首行缩进，text-align水平对齐，word-spacing单词间隔，

• letter-spacing字母间隔、text-transform大小写转换等

• text-decoration文本装饰！很重要！none、underline、overline、line-through、blink等5个可选参数值。

• line-height行高

• 在 CSS 中，有两种不同类型的字体系列名称：
  
  通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
  
  特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
  
  除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
  
  Serif 字体
  
  Sans-serif 字体
  
  Monospace 字体
  
  Cursive 字体
  
  Fantasy 字体

• 可以为给定的元素指定一系列类似的字体。把这些字体按照优先顺序排列，然后用逗号进行连接，根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。：
  
  p {font-family: Times, TimesNR, 'New Century Schoolbook',
  
  Georgia, 'New York', serif;}

• font-style 规定斜体文本。
  
  该属性有三个值：
  
  normal - 文本正常显示
  
  italic - 文本斜体显示
  
  oblique - 文本倾斜显示

• font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。
  
  关键字 100 ~ 900 为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

• 注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。可以使用下面这个公式将像素转换为 em：pixels/16=em
  
  （注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

• a标签的四种状态：
  
  a:link - 普通的、未被访问的链接
  
  a:visited - 用户已访问的链接
  
  a:hover - 鼠标指针位于链接的上方
  
  a:active - 链接被点击的时刻
  
  当为链接的不同状态设置样式时，请按照以下次序规则：
  
  a:hover 必须位于 a:link 和 a:visited 之后
  
  a:active 必须位于 a:hover 之后

• list-style-type修改用于列表项的标志类型。ul {list-style-type : square}
  
  ul li {list-style-image : url(xxx.gif)}或合并属性：li {list-style : url(example.gif) square inside}

• border-collapse 属性设置为collapse可将表格边框折叠为单一边框。注意：如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。

• vertical-align 属性设置垂直对齐方式

• 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

• 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。提示：背景应用于由内容和内边距、边框组成的区域。

• 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

    * {
      margin: 0;
      padding: 0;
    }

• margin可以是负值，而且在很多情况下都要使用负值的外边距。

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

• 注意：当使用百分比作为单位时，上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

• 由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

• border: medium double rgb(250,0,255)

• CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

• a:link, a:visited {
  
  border-style: solid;
  
  border-width: 5px;
  
  border-color: transparent;
  
  }
  
  a:hover {border-color: gray;}

• 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
  
  margin: top right bottom left

• CSS 外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。

• 注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

• position 属性值的含义：
  
  static
  
  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  
  relative
  
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  
  absolute
  
  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  
  fixed
  
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  
  提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

• overflow 属性可以确定是否显示滚动条等行为。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。hidden隐藏，auto自动。

• clip:rect(0px 50px 200px 0px)属性剪切图像

• Z-index设置元素的堆叠顺序。数字越大，越是靠上层。可设置负值。

• 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留，并且移动后可能会覆盖其它的元素。

• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。普通流中其它元素的布局就像绝对定位的元素不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  
  由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像。

• 要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

• 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

• CSS 伪类用于向某些选择器添加特殊的效果。伪类名称对大小写不敏感。

• :first-child 向元素的第一个子元素添加样式。注意了，例如p:first-child 上例中，指的是作为别的元素的第一个子元素，并且是p标签的被选中。而不是p标签的第一个子元素被选中！

• 伪类，冒号后面跟着的。有active focus link visited hover active first-child last等等

• CSS2 - :before 伪元素
  
  ":before" 伪元素可以在元素的内容前面插入新内容。
  
  下面的例子在每个 <h1> 元素前面插入一幅图片：

h1:before
  {
  content:url(logo.gif);
  }

• CSS2 - :after 伪元素
  
  ":after" 伪元素可以在元素的内容之后插入新内容。
  
  下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after
  {
  content:url(logo.gif);
  }

• visibility:hidden让元素不可见。与display：none不一样。

• cursor：光标的形状

• opacity：透明度。0-1的数值，越接近0，越透明。

• 媒体类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

• @media 规则使让你可以在相同的样式表中，使用不同的样式规则来针对不同的媒介。
  
  例如：@media screen
  
  {
  
  p.test {font-family:verdana,sans-serif; font-size:14px}
  
  }
  
  注释：媒介类型名称对大小写不敏感。
  
  媒介类型 描述
  
  all 用于所有的媒介设备。
  
  aural 用于语音和音频合成器。
  
  braille 用于盲人用点字法触觉回馈设备。
  
  embossed 用于分页的盲人用点字法打印机。
  
  handheld 用于小的手持的设备。
  
  print 用于打印机。
  
  projection 用于方案展示，比如幻灯片。
  
  screen 用于电脑显示器。
  
  tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
  
  tv 用于电视机类型的设备。

• 在 CSS3 中，border-radius 属性用于创建圆角

• 在 CSS3 中，box-shadow 用于向方框添加阴影：box-shadow: 10px 10px 5px #888888;

• 通过 CSS3 的 border-image 属性，您可以使用图片来创建边框，border-image:url(border.png) 30 30 round;

• 在 CSS3 中，background-size 属性规定背景图片的尺寸

• CSS3 background-origin 属性规定背景图片的定位区域

• 在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow: 5px 5px 5px #FF0000;
  
  h-shadow 必需。水平阴影的位置。允许负值。
  
  v-shadow 必需。垂直阴影的位置。允许负值。
  
  blur 可选。模糊的距离。
  
  color 可选。阴影的颜色。

• 在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

• 您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
  
  *在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
  
  如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
  
  实例：

  @font-face
  {
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
  url('Sansation_Light.eot'); /* IE9+ */
  }

  div
  {
  font-family:myFirstFont;
  }

• 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);

• rotateY() 旋转
  
  通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

• 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：
  
  规定您希望把效果添加到哪个 CSS 属性上
  
  规定效果的时长
  
  transition: width 2s;
  
  如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

• 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

• @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

  @keyframes myfirst
  
  {
  
  from {background: red;}
  
  to {background: yellow;}
  
  }
  
  @-moz-keyframes myfirst /* Firefox /
  
  {
  
  from {background: red;}
  
  to {background: yellow;}
  
  }
  
  @-webkit-keyframes myfirst / Safari 和 Chrome /
  
  {
  
  from {background: red;}
  
  to {background: yellow;}
  
  }
  
  @-o-keyframes myfirst / Opera */
  
  {
  
  from {background: red;}
  
  to {background: yellow;}
  
  }

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

参考：http://www.w3school.com.cn/css3/css3_animation.asp

• 通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
• 在 CSS3，resize 属性规定是否可由用户调整元素尺寸。