这是我参与「第五届青训营 」伴学笔记创作活动的第2天

1. CSS 代码构成

1.1 CSS是什么？

• Cascading Style Sheets
• 页面样式

1.2 CSS作用

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

2. CSS 使用方法

• 外链 <link rel="stylesheet" href="/.....">
• 嵌入 <style> li {margin:0;} </style>
• 内联 <p style="marginLlem 0"></p>

3. CSS 流程之选择器组、文本渲染

选择器Selector

• 找出页面中的元素，便于给他们设置样式
• 使用多种方式选择元素
• 按照标签名、类名或id
• 按照属性
• 按照DOM树中的位置

通配选择器

<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

标签选择器

<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

id选择器

  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

类选择器

<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

属性选择器

<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

伪类

• 不属于标签和属性定位元素
• 状态伪类和结构性伪类

  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后面且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

颜色

• RGB
• HSL
• alpha 透明度
• font-family 字体

4. 调试 CSS

• 右键点击页面，选择【检查】
• 使用快捷键
• Ctrl+Shift+I