CSS

这是一篇关于CSS的思维导图，包括：基础选择器、字体属性、文本属性、CSS引入方式、Emmet语法、CSS复合选择器、Chrome调试工具。

CSS

• 基础选择器
  • 选择不同的标签更改样式
  • 标签选择器
    • 可以选出所有相同标签比如<p>
      • p { clor： red；}
  • 类选择器
    • 可以选出一个或多个标签
      • .nav { color： red；}
  • id选择器
    • 一次只能选一个标签
      • #nav {color： red； }
  • 通配符选择器
    • 选择所有标签
      • * {color： red：}
• 字体属性
  • 设置字体 font-family
    • p { font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif; }
  • 字体大小 font-size
    • h2 { font-size: 16px; }
  • 字体粗细 font-weigh
    • h2 { font-weight: 400; }
      • normal默认
      • bold加粗
      • 100~900 400等于normal 700等于bold
  • 文字样式 font-style
    • .font { font-style: italic; }
      • normal默认
      • italic倾斜（可以让斜体文字回正）
  • 字体复合属性
    • p { font: italic 700 16px "Microsoft yahei"; }
      • 属性顺序不可更换 之间用空格隔开 字号和字体必须要有
• 文本属性
  • 定义文本外观
  • 文本颜色 color
    • div { color: #6c961f; }
  • 对齐文本 text-align
    • h1 { text-align: center; }
      • left左对齐（默认）
      • center居中
      • right右对齐
  • 装饰文本 text-decoration
    • a { text-decoration: none; }
      • none默认
      • underline下划线（重点）
      • overline上划线
      • line-through删除线
  • 文本缩进 text-indent
    • p { text-indent: 2em; }
  • 行间距 line-height
    • p { line-height: 30px; }
• CSS引入方式
  • 行内样式表
    • <p style="color: pink; font-size: 20px;">标签内容</p>
  • 内部样式表
    • <style> div { color: pink; } </style>
  • 外部样式表
    • <link rel="stylesheet" href="style.css">
      • 引入外部链接样式
• Emmet语法
  • 生成标签 直接输入标签名 按tab键即可 比如div 然后tab键，就可以生成<div></div>
  • 如果想要生成多个相同标签 加上*就可以了 比如div*3就可以快速生成3个div
  • 如果有父子级关系的标签，可以用>比如ul>li就可以了
  • 如果有兄弟关系的标签，用+就可以了比如div+p
  • 如果生成带有类名或者id名字的，直接写demo或者#twotab键就可以了
  • 如果生成的div类名是有顺序的，可以用自增符号$
  • 如果想要生成的标签内部写内容可以用{ }表示
• CSS复合选择器
  • 后代选择器，选择父元素里的子元素
    • ol li { color: pink; }
  • 子选择器，选择某元素最近的一级子元素
    • .nav>a { color: pink; }
  • 并集选择器，选择多组标签 同时为他们定义相同样式
    • div, p, .pig li { color: pink; }
  • 伪类选择器，给某些选择器添加特殊效果
    • a:link
      • 把未访问过的链接选出来
    • a:visited
      • 选择访问过的链接
    • a:hover
      • 选择鼠标经过的链接
    • a:active
      • 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
    • 请按照lvha顺序声明 :link-:visited-:hover-:active
    • :focus 用于选取获得光标的表单元素
      • input:focus { background-color: pink; }
  • 子主题
• Chrome调试工具
• 主题