这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
本课知识概览
- 认识CSS
- 学会使用CSS
- 学会调试CSS
本课重点内容
CSS是神马？
定义：用来定义页面元素的样式
例如：颜色、背景、动画、大小、位置……
工作机理：
使用CSS：
- 使用外联方式：
<link rel="stylesheet" href="css文件路径"> - 使用嵌入方式：
<style> 这里写css </style>
选择器
认识选择器
选择器可以指定对某个标签进行样式设置，如上图指定的是所有h1标签
选择器内写属性和属性值/声明，可以为其设置相应的样式
选择器分类
- 通配选择器:
* - id选择器：
#id名
id的值在页面中需要唯一！！！
- 类选择器：
.类名 - 属性选择器：
[属性名]
进阶：
input[type="password]会选择input输入框里面，类型为密码属性的输入框a[href^="#"]a标签的href以#开头就选择a[href$="#"]a标签的href以#结束就选择
- 伪类：不基于标签和属性定位的元素，例如
a:link {color:#000000;} /* 未访问的链接 */
a:visited {color:#000000;} /* 已访问的链接 */
a:hover {color:#000000;} /* 鼠标划过链接 */
a:active {color:#000000;} /* 已选中的链接 */
选择器组合
利用选择器组合可以更简单更精确的控制选择器选择的标签。
学CSS必备其他知识
颜色
- RGB:红绿蓝通过不同配比组合成为一种色彩
衍生 rgba：增加了透明度
- HSL：
字体
使用font-family来使用，优先使用排在前面的，如果浏览器不支持/没有，那么选择后面的
若使用Web font：可能会导致性能上的开销
通用字体：
