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

一、CSS基础

1.CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
基础代码
- h1选择器：选中页面中的元素
- color属性
- white 属性值

h1{
   color:white;
   font-size:14px;
}

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>

3.CSS是如何工作的

c04c528ac15e41918274038ec99ea93a_tplv-k3u1fbpfcp-watermark.png

二、选择器Selector

1.选择器的作用

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

2.通配选择器

*{}：匹配所有的HTML元素。

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

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

展示效果：

26ba58775e1f4ed8bf8c75cf420324c0_tplv-k3u1fbpfcp-watermark.png

3.标签选择器

p{}：匹配对应的标签元素。

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

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

展示效果：

4.id选择器

#logo{}：匹配对应的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>

展示效果：

fed855e99c574eeba70f04e7c729fd54_tplv-k3u1fbpfcp-watermark.png

5.类选择器

.done：匹配所有类名相同的元素。

<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>

展示效果：

6.属性选择器

[disabled] {}：匹配相对应属性的元素。

<label>用户名: </label>
<input value="zhao" disabled />
<label>密码: </label>
<input value="123456" type="password" />

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

展示效果：

7.伪类

不基于标签和属性定位元素
几种伪类

1.状态伪类:元素在某种特定的状态下被选中

<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: rad;
}

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

展示效果：

2.结构性伪类:元素在DOM树中的位置相关

<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>

展示效果：

8.选择器组合方式

名称	语法	说明	示例
直接组合	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

例：

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

<style>
  article p {
    color: black;
}

  article > p {
    color: blue;
}

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

展示效果：

9.选择器组

将相同样式的选择器组合在一起，用逗号隔开。

body, hl, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-gizing: border-box;
  padding: 0;
}

三、颜色和字体

1.颜色

CSS中颜色最常用的三种方式：RGB模型、HSL模型和关键字

RGB模型：#000000或rgb(0,0,0)
HSL模型：hsl(258,100%,50%)
- Hue：色相是彩色的基本属性，如红色、蓝色等；取值范围是0-360。
- Saturation：饱和度是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
- Lightness：亮度指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。
关键字：red
alpha透明度：取值为0-1，取值越高越不明显

2.字体

通用字体族分为5种，分别为：

Serif衬线体：Georgia、宋体
Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
Cursive手写体：Caflisch Script、楷体
Fantasy：Comic Sans MS、Papyrus
Monospace等宽字体：Consolas、Courier、中文字体

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

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

展示效果：

1673945700355(1).jpg

@font-face远程字体
- 关键字
  - small、medium、large
- 长度
  - px、em
- 百分数
  - 相对于父元素字体大小
建议
- 通用字体族在字体列表最后写
- 英文字体放在中文字体前面

四、调试CSS

右键点击页面，选择检查
使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

理解CSS| 青训营笔记