走进前端技术栈-CSS(1) | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第2天. 今天学习CSS，主要了解CSS的使用方法.

什么是CSS

CSS(Cascading Style Sheets,层叠样式表)是用来定义页面元素的样式,包括字体,颜色,位置,大小等样式. CSS代码一般如下所示.

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

其中, 一个选择器(如h1,1级标题)加上一个大括号, 我们称为规则. 属性名(如color,font-size)和对应的属性值(冒号后的内容)构成一条声明, 规则中包含多条声明.

在html页面中定义CSS样式的方法有三种.

<link rel="stylesheet" href="/assets/style.css">

把CSS定义保存在css文件中,然后使用link标签引入css样式. 使用这种方法可以将内容和样式分离, 此时只需在css文件中修改样式即可, 推荐使用.

在html页面的style标签中编写, 如下.

<style>
    h1 {
      color: orange;
      font-size: 24px;
    }
 </style>

这里的h1是一个标签选择器, 将在下文进行详细讲解.

直接写在标签的style属性里面, 此时不用再写选择器.

<h1 style="color:orange">这里是内容</h1>

用来选择页面中的元素, 可以使用这几种方式 : 按照标签名; 类名或ID; 属性; DOM树中的位置. 各个选择器的使用方法说明如下.

通配选择器, 即*,可以匹配所有
标签选择器, 即h1,p,div等
id选择器, 例如给标签h1设置了id属性,id="logo",则可以通过#logo来选择.id的属性值在页面中唯一.
类选择器, 常用,可以避免同一标签太多和id只有一个的问题,选择适量的元素设置CSS样式.例如给标签设置类名class="done",则可以通过.done来选择.
属性选择器, 通过元素的属性或属性值来选择元素,例如以下代码.也可以通过匹配属性值进行选择,如a[href^="#"]表示href属性值以#开头的元素, $=表示以指定字符串结尾.

<input type="password" value="zhao">
<style> 
input[type="password"] {
  color : gray;
}

伪类
- 状态伪类: 元素处于某种特定的状态才会选中. 例如访问过的链接(:visited), 没有访问过的链接(:link), 鼠标经过(:hover), 鼠标按下后(:active), 聚焦到输入框(:focus)
- 结构性伪类: 根据DOM节点在DOM树中出现的位置来决定是否选择. 例如:first-child选中第一个子节点, last-child选中最后一个子节点.
组合使用

可以将上述选择方法组合使用. 例如直接组合input.error指input标签下类名为error的元素. 更多组合方式: