Jul. 25th 笔记 - 理解CSS (1)

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

CSS - Cascading Style Sheets

我们在上一节课学到，前端技术栈主要分为：
{服务器端} <-> {HTTP, socket 等网络协议} <-> {(JavaScript 行为) (CSS 样式) (HTML 内容)}
在这里CSS就是用来定义页面元素的样式

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

一个栗子：

h1{ 
/* 选择器 selector */
    color: white
    /* 选择器 property & 属性值 value */
    font-size: 14px
    /* 声明 declaration */
}

如何使用 CSS

共有三种方式：

外链

<link rel="stylesheet" href="some_location">

嵌入

 <style>
 li {margin:0; list-style: none;}
 </style>

内联
```
<p style="margin:1em 0">Example</p>
```

在实际应用中，我们通常使用外链的方法，这样可以将内容与样式分离，方便统一管理。

CSS是如何工作的

选择器

选择器在CSS中的作用即为找出相关元素，并设置样式。我们可以使用多种方式选择元素。

标签吗，类名，ID
属性
在DOM树的位置

通配选择器: 匹配所有元素

*{
  color: red;
}

元素选择器：匹配某种元素

div{
  color: red;
}

类选择器：匹配类名相同的元素

.className{
  color: red;
}

id 选择器：匹配某种ID的元素

#logo{
  color: red;
}

属性选择器：匹配某种属性

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

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

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

伪类选择器：

状态伪类：元素在某种状态（active, hover, ect.）
结构伪类：在DOM树中的位置（first-child, ect.）

选择器的组合

选择器组

将相同样式的选择器组合在一起，即为选择器组

颜色

RGB（三原色，透明度）: #XXXXXX & rgb(X,X,X) & rgba(X,X,X,X)
HSL（色相，饱和度，亮度，透明度）: hsl(XX,XX%,XX%) & hsla(XX,XX%,XX%,XX)

字体

兼容性考虑，需设置多个字体族

通用字体族：

Serif 衬线体
Sans-Serif 无衬线体
Cursive 手写体
Fantasy 梦幻字体族
Monospace 等宽字体

远程字体的调用

一个栗子：

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

字号 - font-size

共有三种取值方式：

关键字
长度单位
百分比

字体样式 - font-style

三种取值：

normal
italic
obilque

字重 - font-weight

有两种取值方式：

参数（100,900）
关键字（normal-400, bold-700）

行距 - line-height

四种取值方式：

normal
参数
参数 + 单位
百分比

对齐方式 - text-align

四种取值：

left
right
center
justify

缩进 - text-indent

两种取值：

参数
百分比

文本装饰 - text-decoration

四种样式：

none
underline
line-through
overline

white-space

六种样式：

normal: 连续的空白符会被合并，换行符会被当作空白符来处理
nowrap: normal 一样，连续的空白符会被合并。但文本内的换行无效
pre: 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行
pre-wrap: 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。
pre-line: 连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。
参考： developer.mozilla.org/zh-CN/docs/…

Jul. 25th 笔记 - 理解CSS (1)｜ 青训营笔记