理解CSS（一）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天重点内容 CSS概念页面中使用

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

重点内容

CSS概念
页面中使用CSS的几种方式
CSS的工作方式
选择器
伪类
选择器的组合与选择器组
CSS的一些重要属性
调试CSS

详细介绍

CSS概念

CSS全称Cascading Style Sheets,主要用来定义页面元素的样式
具体可以：

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

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

其中h1为选择器（Selector)，color和font-size为属性(Property),white和14px为属性值(Value)

如何在一般的页面中使用CSS

主要有三种方式：

外链

<link href=”filename.css” rel=”stylesheet”>

嵌入

<style>
body{
width: 100%;
}

h1 {
color: #FFF;
}
</style>

内联

<h1 style=”font-family: Arial;”>Hello World</h1>

CSS如何工作

选择器Selector

选择器的主要作用就是找出页面中的元素，以便给他们设置样式，也就是说，找准你需要设置样式的元素
选择元素的几种方式

按照标签名、类名或id
按照属性
按照DOM树中的位置
接下来介绍几种常用的选择器：

通配选择器

通配符选择器使用“*”来定义，表示选中页面中所有的标签。
但是一般是在页面初始化的时候才使用，或者某些特殊情况下例如清除页面内外边距

* {
  margin:0;
  padding:0;
}

标签选择器

标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容。

h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}

id选择器/类选择器

类比标签选择器，作用范围为某个id/类内的内容

#logo {
    font-size: 60px;
    font-weight: 200;
  }
.done {
  color: gray;
  text-decoration: line-through;
}

属性选择器

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

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

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

伪类

伪类是用来添加一些选择器的特殊效果，伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。
一般分为状态伪类和结构性伪类，详细可参考CSS 伪类 | 菜鸟教程 (runoob.com)

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

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

选择器的组合

选择器组（分组选择器）

h1,h4,p { color: blue; }

与选择器的组合第一种的区别

常用的CSS重要的简单属性

颜色
透明度alpha
字体font-family (字体列表最后写上通用字体族，英文字体放在中文字体前面）
字体大小 font-size
行间距 line-height

等等还有很多不具体介绍了，建议直接查CSS 参考手册 | 菜鸟教程 (runoob.com)

如何调试CSS

个人总结

本节主要记录了CSS的一些基础用法，初学者最好能一边学一边自己尝试编写，这样效果更佳。

理解CSS（一）｜ 青训营笔记