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

走进前端技术栈-css

css是什么

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

设置字体和颜色
设置位置和大小
添加动画效果最简单的css代码：

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

由一条一条的规则组成，👆就是一条规则

在页面中使用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>

推荐使用外链的方式，不推荐内联。

最简单的使用css的示例：

通过style去引入样式，h1和p是选择器

CSS是如何工作的

加载HTML➡️解析HTML➡️加载CSS➡️解析CSS➡️添加样式到DOM节点➡️创建DOM树➡️展示页面

选择器Selector

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

通配选择器

使用*号匹配所有标签

标签选择器

使用h1,p这种选择单个或某一类标签

id选择器

例如一个标签设置了id=logo，就可以使用 #logo{},注意id需要唯一

类选择器

使用class，比较常用

属性选择器

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

<style>
  input[type="password"]{
    color: red;
  }
  
</style>

伪类

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类例如对于链接的几种状态：

<style>
a:link {  当前
  color: black;
}
a:visited {   点击过
  color: gray;
}
a:hover {   鼠标放上去
  color: orange;
}
a:active {   鼠标点下去
  color: red;
}

输入框的状态：

:focus {  当输入时
  outline: 2px solid orange;
}

结构性伪类：

border-bottom:none 没有下边框

总之，可以通过元素在父级节点中的相对位置来选中。

组合

选择器组

body, h1, h2, h3, h4, h5, h6,ul, ol, li {
    margin: 0;
    padding: 0;
}
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

颜色 RGB

两种表示方式：

#号和六位十六进制数字： #00ff0f
rgb(163, 100, 200) 使用hsl：
hsl(211, 66%, 59%) 还有一种直接用单词指定颜色

alpha 透明度

rgb(163, 100, 200, 0.47)

字体 font-family

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }

通用字体族

font-family 使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面使用web-fonts

<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

关键字
- small, medium, large
长度
- px, em
百分数
- 相对于父元素字体大小 line-height

{
    line-height: 1.6;
    line-height: 45px;
}

可以统一在font中设置：

h1 {
    /* 粗体 大小/行高 字体族 */
    font: bold, 14px/1.7 Helvetica, sans-serif;
}
- text-align: center | left | right  文本对齐方式
- spacing
    - letter-spacing
    - word-spacing
- text-indent
- text-decoration
    - none
    - underline
    - ling-through
    - overline
- white-space 控制空白符
    - normal 多个空格展示一个
    - nowrap 不换行
    - pre 保留所有的空格和换行
    - pre-wrap 保留空格，有换行
    - pre-line

走进前端技术栈CSS | 青训营笔记