理解CSS|青训营笔记

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

了解CSS

CSS是什么

Cascading Style Sheets，用来定义页面元素的样式。

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

组成：

1. 选择器，Selector
2. 属性，Property
3. 属性值，Value
4. 声明，Declaration

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

在页面中使用CSS

<!-- 外链 -->
<link rel="stylesheet" href="style.css">
<!-- 嵌入 -->
<style>
  li{margin:0;list-style:none;}
  p{margin:lem 0;}
<style>
<!-- 内联 -->
<p style="margin:lem 0">Example Content</p>

选择器

找出页面中的元素，以便给他们设置样式。

使用多种方式选择元素：

1. 按照标签名、类名或id
2. 按照属性
3. 按照DOM树中的位置

*:通配选择器

p、h1:标签选择器

#logo:id选择器

.done:类选择器

[disabled]、input[type="password"]:属性选择器,^=:以开头，$=:以结尾

伪类（pseudo-classes）

不基于标签和属性定位元素。

1. a:link:状态伪类
2. li:first-child:结构性伪类

组合

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

红色、绿色、蓝色。取值范围是00-ff或者0-255。

#000000或rgb(0,0,0)

HSL

Hue：色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360.

Saturation：饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。

Lightness：亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

hsl(0,0%,0%)

关键字

black，red……

alpha 透明度

其实是不透明度，值为1时是不透明的，取值范围为00-ff或0-1。

##00000000或rgba(0,0,0,0)或hsla(0.0%,0%,0)

文字 font

字体 font-family

批量指定字体，在最后指定通用字体，英文字体写在中文字体前，因为解析时是从前往后的。

font-size

1. 关键字：small、medium、large
2. 长度：px、em
3. 百分数：相对于父元素字体大小

其他关键字

font-style：字体（斜体）

font-weight：字重

line-height：行高

深入CSS

选择器优先级

选择器特异度（Specificity）：按id选择器、（伪）类选择器、标签选择器优先级的比较数量。

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

文字相关的属性基本都会继承，与盒模型相关的则不会继承。

显式继承

通过inherit属性值。

*{
    box-sizing:inherit;
}

初始值

CSS中每个属性都有一个初始值，可以使用initial关键字显式重置为初始值。

background-color:initial