CSS的引入方式

样式表 优点 缺点 范围
行内样式表 书写方便 结构样式混写 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底 控制一个页面
外部样式表 完全实现结构和样式分离 需要引入 控制多个页面 
<link rel="stylesheet" href="a.css">
<!-- href="路径" -->

emmet 语法

快速生成HTML标签

  • 生成多个标签：div*****10
  • 有父子级关系的标签：ul > li
  • 兄弟关系：div**+**p
  • 带有类名或者标签名的：div**.**pink（class名）div#gray(id名)
  • 生成的div的类名是有顺序的：p.demo**$***5
  • 生成的标签默认显示几个文字：div{这里写文字}

注意：$是自增的符号

快速生成CSS样式

  • width：100px; w100
  • 可以用首字母快速生成样式

复合选择器

  1. 后代选择器

可以选择父元素里的子元素

ul li{
    width: 300px;
}

注意：

  1. 元素一和元素二必须用空格隔开
  2. 只要有一层以上的关系就可以用，就像:
<ul>
    <li>
        <a href="#">aaa</a>
    </li>
</ul>

也可以通过后代选择器对“a”标签进行选择（ul li a）

  1. 子选择器

只选择父元素最近一级的子元素

元素1>元素2{样式声明}

注意：

  1. 元素1和元素2用大于号隔开

  2. 元素1是父级，元素2是子级，最终选择元素2

  3. 并集选择器

可以将多个标签用同一样式

元素1，元素2{样式声明}

注意：

  1. 用逗号来实现
  2. 任何选择器都可以作为并集选择器的一部分
  3. 最后一个元素不需要加逗号
div,
p,
.pig li{样式声明}
  1. 伪类选择器

链接伪类选择器

给某些选择器添加特殊效果，用“ : ”来实现

属性 定义
a:link 选择所有未被访问的链接
a：visited 选择所有已经被访问过的链接
a：hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起）

这个好好玩！

注意：按照 lvha的顺序！！！

focus伪类选择器

用于选取获得焦点的表单元素input：focus{样式声明}

选择器 作用 用法
后代选择器 用来选择后代元素 符号是空格 .nav a
子代选择器 选择最近一级元素 符号是大于号 .nav>p
并集选择器 选择某些相同样式的元素 符号是逗号 .nav,.header
链接伪类选择器 选择不同状态的链接 a:hover{}
:focus 选择器 选择获得光标的表单 input：focus