CSS

CSS

介绍

Cascading Style Sheet 层叠样式表

当浏览器读到一个样式表，就会按照这个样式表来对文档进行渲染（格式化）

语法

选择器

注释方式

/这里面放注释内容/

引入css

行内样式

• 直接在标签的style属性内书写

内部样式

• 在head标签内的style标签内书写

外部样式

• 在外部的一个css文件内属性，
  然后在head标签内用link标签引用

选择器

基本选择器

• 元素选择器
  • 标签名
  • 通过标签名选择标签，选择所有此标签
• ID选择器

  • 加上标签的ID值

  • 因为标签的ID是唯一的，所以可以直接选择到唯一标签
• 类选择器
  • .加上标签的class值
  • 因为class的值可以是多个比如class="a b c"
  • 所以可以由多个css渲染
• 通用选择器
  • 选择此页面的所有标签

组合选择器

• 后代选择器
  • 选择器空格选择器
  • 表示在上个选择器选择完标签后，
    在这条件下选择标签内的标签——后代
• 儿子选择器
  • 选择器>选择器
  • 与后代选择器一样，但是只选择儿子这一层，对于儿子的后代则忽略选择
• 毗邻选择器
  • 选择器1+选择器2
  • 只有选择器2紧跟在选择器1之后才能被选择
• 弟弟选择器
  • 选择器1~选择器2
  • 选择器2和选择器1在同一标签内则称为兄弟标签
  • 弟弟标签只选择器2必须在选择器1之后

属性选择器

• 标签[属性]
  • 选择有这个属性的这个标签
• 标签[属性="值"]
  • 选择属性为这个值的这个标签
• [属性="值"]
  • 选择属性为这个值的标签
• [属性]
  • 选择有这个属性的所有标签
• 扩展
  • [name^="hello"]
    • 找到name属性值以hello开头的所有标签
  • [name$="hello"]
    • 找到name属性值以hello结尾的所有标签
  • [title*="hello"]
    • 找到name属性值包含hello的所有标签
  • [title~="hello"]
    • 找到name属性值中有一个值为hello的所有标签

选择器的分组和嵌套

• 分组
  • 选择器，选择器
  • 表示这两个选择器都被选择
• 嵌套
  • 选择器空格选择器
  • 和后代选择器类似

伪类选择器

• a:link
  • 未访问的链接
• a:hover
  • 鼠标移动的链接上
• a:active
  • 选定链接
• a:visited
  • 已访问的链接
• input:focus
  • 输入框被选中时，获取焦点时的样式

伪元素选择器

• p:first-letter
  • 常用的给首字母设置特殊样式
• p:before
  • 在每个p标签前插入内容
• p:after
  • 在每个p标签后插入内容
• before和after多用于清除浮动。

选择器的优先级

• CSS的继承
  • 有很多样式后代都会继承父元素
  • 有些属性无法继承：如
    • border
    • margin
    • padding
    • background-image
• 内联样式
• ID选择器
• 类选择器
• 元素选择器
• 可以通过！important属性强制让选择器选到的元素进行修改——最后不要使用

PS：选择器可以随意混搭使用，

选择到同一标签的方式有很多中，
ID选择器没必要放在最后，因为它已经选到唯一标签了

CSS属性

分支主题 6

分支主题 5

XMind: ZEN - Trial Version