第四课 CSS

• 在浏览器中打开开发者工具然后选择一个你喜欢的网页学习他的布局及元素，如果有不清楚的标签就在MDN上学习，并在codepen上尝试学习。
  
  
• 在浏览器开发者工具中颜色的设置：color：rgba（01,05,6,0.3//透明度）

【链接的样式】

• Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
• Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
• Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
• Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
• Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。

*   链接具有下划线。
*   未访问过的 (Unvisited) 的链接是蓝色的。
*   访问过的 (Visited) 的链接是紫色的.
*   悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
*   选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用Full Keyboard Access: All controls 选项，然后再按下 Ctrl + F7 ，这样就可以起作用)
*   激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)

• 链接属性调试
  

CSS重置

//输入框
//按钮
hover//得到焦点
blur//失去焦点

后代选择器

• 后代选择器：类选择器+空格+标签选择器（即选择父标签里的字标签）

• 标签选择器还可以和类选择器一起使用，如

  
  

的意思

• 他所包含的内容会被划分为一个版块，如

  
  
A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

---

参考资料：

• 网页的默认字体是16号字
  代码尝试：熟悉我们不熟悉的代码
  按钮示例：尝试按钮的样式