W3school学习笔记之CSS

1、选择器

• id和class属性不要以数字开头，其在 Mozilla/Firefox 浏览器中不起作用。
• 不要在属性值与单位之间留有空格。这仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

2、背景

• background 简写属性（background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,background-image）
• background-attachment：scroll，fixed
• background-color
• background-image
• background-position：设置背景图像的起始位置。
• background-repeat：设置背景图像是否及如何重复

3、文本格式

• text-align：center，justify，left，right
• text-decoration：overline，line-through，underline，none
• text-transform：uppercase，lowercase，capitalize
• text-indent：文本缩进
• letter-spacing：字符间距
• word-spacing：字间距
• vertical-align：元素的垂直对齐
• white-space：设置元素中空白的处理方式

4、字体格式

• font

  设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”（其中font-size和font-family的值是必需的）

• font-style：italic斜体

• font-size：文本的字体大小（px,em,%）

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

• font-variant：small-caps以小型大写字体显示文本。
• font-weight：指定字体的粗细。

5、链接

• a:link：正常，未访问过的链接
• a:visited：用户已访问过的链接
• a:hover：当用户鼠标放在链接上时
• a:active：链接被点击的那一刻

6、列表样式

• list-style：简写属性。 list-style-type, list-style-position,list-style-image
• list-style-image：将图象设置为列表项标志。
• list-style-position：inside，outside设置列表中列表项标志的位置。
• list-style-type：设置列表项标志的类型。

7、表格

• border-collapse:collapse;折叠边框
• caption-side:bottom;表格标题置下

8、盒子模型

• border-style

  • none：默认无边框
  • dotted：定义一个点线框
  • dashed：定义一个虚线框
  • solid：定义实线边界
  • double：定义两个边界。 两个边界的宽度和border-width的值相同
  • groove：定义3D沟槽边界。
  • ridge：定义3D脊边界。
  • inset：定义一个3D的嵌入边框。
  • outset：定义一个3D突出边框。

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

9、定位属性

• visibility 属性
  
  • visible：默认值。元素是可见的。
  • hidden：元素是不可见的。
  • collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。
• display属性
  
  • none：此元素不会被显示。
  • block
  • inline
  • inline-block 行内块元素
• clip：rect (top, right, bottom, left)剪辑一个绝对定位的元素
• cursor：显示光标类型（url，auto，crosshair，default，pointer，move，text，wait，help，……）
• overflow：设置当元素的内容溢出其区域时发生的事情（auto，hidden，scroll，visible）
• position：指定元素的定位类型（absolute，fixed，relative，static）

10、伪类选择器

• :link
• :visited
• :active
• :hover
• :focus
• :first-child第一个子元素
• :lang(language

q:lang(no){
    quotes: '"' '"' "'" "'";//前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。
}

11、伪元素选择器

• :first-letter第一个字母
• :first-line第一行
• :before
• :after

12、透明度

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */