CSS的理解｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天 CSS是什么 Cascading Sty

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

CSS是什么

Cascading Style Sheets,中文可以解释为层叠样式表、级联样式表

用来定义页面元素的样式

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

一般的格式为：

在页面中使用CSS的方法

外链（推荐）、嵌入、内联（不推荐）

CSS如何工作

CSS求值过程

assets.codepen.io/59477/value…

选择器 Selector

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

使用多种方式选择元素

按照标签名、类名id名
按照属性
按照DOM树中的位置

类型：通配选择器、标签选择器、id选择器、类选择器、属性选择器、伪类、选择器组合与选择器组

通配选择器

用一个“ * ”表示


* {
  color: red;
  font-size: 20px;
}

标签选择器

直接写标签名就可以了

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

id选择器

“#”+id名称

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

类选择器

用“.”+类名表示

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

属性选择器

利用标签所带属性表示

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

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

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

伪类

不基于标签和属性定位元素
包括：状态伪类、结构性伪类

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}

li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

选择器组合与选择器组

选择器组合

选择器组

选择器优先级

文本相关

颜色

颜色-RGB：由红、绿、蓝组成

颜色-HSL：

Hue:色相，是色彩的基本属性，如红色、黄色等；取值范围是0-360
Saturation:饱和度，指色彩的鲜艳程度，越高越鲜艳；取值范围是0-100%
Lightness:亮度，指颜色的明亮程度，颜色越高越亮；取值范围是0-100%

透明度-alpha：代码中常与rgb/hsl一同出现（rgba/hsla）

字体

通用字体族

font-family使用建议：字体列表最后写上通用字体族英文字体放在中文字体前

font-size字体大小

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

line-height行高

weight字重（并不是所有字体都设置有每个字重，使用前先查询该字体是否包含你所用的自重）

text-align文字对齐

letter-spacing字母间距word-spacing单词间距

text-deraction文字修饰

white-space空白符的控制 (换行和空格符)

......

调试CSS

盒子模型

width与height

指定content box宽度
取值为长度、百分数、auto
auto有浏览器根据其他属性确定
百分数相对于容器的cotent box宽度
容器有指定高度时，百分数才生效（height特有）

padding

指定元素四个方向的内边距
百分数相对于容器的宽度

border

指定容器边框样式、粗细和颜色

margin

指定元素四个方向的外
取值为长度、百分数、auto
百分数相对于容器的宽度

布局layout

能够确定内容大小和位置的算法
依据元素、容器、兄弟节点个内容信息来计算

常规流

行级VS块级

flex布局

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

grid布局

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

rf指“份”

浮动

position属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对与视口绝对定位

relative

absolute

CSS的理解 ｜ 青训营笔记