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

2. 理解CSS

2.1 CSS是什么？

2.2 在页面中使用CSS

        <!--外链-->
        <link rel="stylesheet" href="/assets/style.css">

        <!--嵌入-->
        <style>
            li{margin: 0; list-style: none;}
            p{margin: lem 0;}
        </style>

        <!--内联-->
        <p style="margin: lem 0;">Example Content</p>

2.3 CSS是如何工作的？

2.4 选择器 Selector

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

2.4.1 通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

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

2.4.2 标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

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

2.4.3 id选择器

<h1 id="logo">
  <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>

2.4.4 类选择器

<h2>Todo List</h2>
<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>

2.4.5 属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

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

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

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

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

2.5 伪类（pseudo-classes）

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

<a href="http://example.com">
  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;
}

<!--CSS[伪类](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes) `:focus`表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。-->
:focus {
  outline: 2px solid orange;
}
</style>

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

2.6 组合

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

2.7 字体

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

2.7.1 font-family 使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前面

font-size

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

text-align : left center right justify

spacing : letter-spacing(字间距)，word-spacing(单词间距)

text-indent: 对其距离（0~200px）

text-decoration: none underline line-through(删除线) overline(上划线)

调试CSS：右键点击页面，选择【检查】

理解CSS【上】 | 青训营笔记