CSS复习

CSS组成

CSS=选择器+声明(属性:属性值)

选择器

1. 简单选择器

• 标签选择器
  • 写法

   标签名 {
      /* CSS属性 */
   }

• ID选择器
  • 写法

   ID {
      /* CSS属性 */
   }

• class选择器
  • 写法

   class名 {
      /* CSS属性 */
   }

• 属性选择器
  • 写法

   [HTML属性] {
      /* CSS属性 */
   }

2. 复合选择器

是简单选择器按照一定规则组合而成。

• 组合选择器
  • 写法

   简单选择器1,简单选择器2 {
      /* CSS属性 */
   }

• 作用
  多个选择器使用同一套属性。
• 子选择器
  • 写法

   简单选择器1>简单选择器2 {
      /* CSS属性 */
   }

• 后代选择器
  • 写法

   简单选择器1 简单选择器2 {
      /* CSS属性 */
   }

注意：选择器中间必须有空格。

伪类

• :hover选择器
  当鼠标放到元素上面样式会发生改变。
• 超链接的伪类

a:link{color:#ff0000;}   /* 未访问的链接 */
a:visited{color:#00CC00;}/* 已访问的链接 */
a:hover{color:#000FF;}   /* 鼠标指针移动到链接上 */
a:active{color:#FF00FF;} /* 选定的链接 */

属性

• 字体font
  • 大小font-size
  • 风格font-style
  • 粗细font-weight
  • 字体font-family
  • 颜色color
• 文本text
  • 对齐text-align
  • 修饰text-decoration
• 边框border
• 颜色border-color
• 粗细border-width
• 风格border-style
  • 简写

border : border-width border-style border-color;

• 上边框border-top
• 下边框border-bottom
• 左边框border-left
• 右边框border-right
• 背景background
• 颜色background-color
• 图片background-image
• 重复background-repeat
• 位置background-position
• 关联background-attachment
• 内边距padding
• 外边距margin
• 显示display
  • 内联标签的display是inline
  • 块级标签的display是block

在HTML4中，内联标签可以嵌套于块级标签中，块标签不可以嵌套于内联标签中。HTML5规则有些不同。