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

理解CSS

一、本堂课重点内容：

什么是CSS？

Cascading Style Sheets 层叠样式表：用来定义页面元素的样式

设置字体和颜色

设置位置和大小

添加动画效果

如何在页面中使用CSS？

 <!-- 外链（推荐） -->
  <link rel="stylesheet" href="/src/css/style.css">
  <!-- 嵌入 -->
  <style>
    li {
      margin: 0;
      list-style: none;
    }

    p {
      margin: lem 0;
    }
  </style>
  <!-- 内联 -->
  <p style="margin:lem 0;">Example content</p>

CSS是如何工作的？

CSS选择器（selector）

作用：

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

方式：

按照标签名、类名、id

按照属性

按照DOM树中的位置

通配选择器

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

标签选择器

    li {
      margin: 0;
      list-style: none;
    }

    p {
      margin: lem 0;
    }

id选择器(id唯一)

  <style>
    #logo {
      width: 200px;
      height: 200px;
    }
  </style>
  <img id="logo" src="#" alt="Example">

类选择器

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

属性选择器

  <style>
    [disabled]{
        background:#eee;
        color:#999
    }
  </style>
  <label>用户名:</label>
  <input value="name" disabled />
  <label>密码:</label>
  <input value="123456" type="password" />

 <style>
    input[type="password"]{
        border-color:red;
        color:red
    }
  </style>
  <label>用户名:</label>
  <input value="name" disabled />
  <label>密码:</label>
  <input value="123456" type="password" />

  <style>
    /* 以#开头 */
    a[href^="#"] {
      color: #f54767;
      background-color: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
      padding-left: 1.1em;
    }

    /* 以.jpg结尾 */
    a[href$=".jpg"] {
      color: deepskyblue;
      background-color: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
      padding-left: 1.2em;
    }
  </style>
  <p><a href="#top">回到顶部</a></p>
  <p><a href="a.jpg">查看图片</a></p>

伪类（pseudo-classes）

概念：

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

分类：

状态伪类

结构性伪类

状态伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

/* 焦点 */
:focus{
  color: #000FFF;
}

结构性伪类

p:first-child {
  color: blue;
}

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

效果图：

组合（Combinators）

初始值

盒模型

二、详细知识点介绍：

字体（font-family）

CSS字型

在CSS中，有两种类型的字体系列名称：

通用字体系列 ：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

特定字体系列 ：一个特定的字体系列（如 "Times" 或 "Courier"）

Generic family	字体系列	说明
Serif	Times New Roman Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明。

p{font-family:"Times New Roman", Times, serif;}

字体样式

这个属性有三个值：

正常 - 正常显示文本

斜体 - 以斜体字显示的文字

倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

边框（border）

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

块级&行级

块级： 不和其他盒子并列摆放

适用所有的盒模型属性

行级： 和其他行级盒子一起放在一行或拆开成多行

盒模型中的width、height不适用

display属性

block 块级盒子

inline 行级盒子

inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行

none 排版时完全被忽略

行级排版上下文

块级排版上下文

Flex Box布局

display:flex

justify-content

align-items

Flexibility

flex-grow

    .a , .b , .c{
        width: 100px;
    }
    
    /* 弹性布局，例A */
    .a{
        flex-grow: 2
    }
    
    /* 弹性布局，例B */
    .b{
        flex-grow: 1
    }

A、B、C原本各占100px，而这行的空间减去原本的300px后，还剩下一部分空间，剩下的这一部分空间按照2：1的比例分配给A和B，得到如下图所示布局效果。

Flex布局的一些缩写

Grid布局

float浮动

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

    .text_line { clear:both; }

Position属性

fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

relative定位

absolute定位

sticky定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。

三、实践练习例子：

所有CSS伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 `<input>` 元素。
:disabled	input:disabled	选择每个被禁用的 `<input>` 元素。
:empty	p:empty	选择没有子元素的每个 `<p>` 元素。
:enabled	input:enabled	选择每个已启用的 `<input>` 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 `<p>` 元素。
:first-of-type	p:first-of-type	选择作为其父的首个`<p>`元素的每个 `<p>` 元素。
:focus	input:focus	选择获得焦点的 `<input>` 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 `<input>` 元素。
:invalid	input:invalid	选择所有具有无效值的`<input>`元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 `<p>` 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个`<p>`元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个`<p>`元素的每个 `<p>` 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 `<p>` 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个`<p>`元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个`<p>`元素的每个`<p>`元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 `<p>` 元素的每个 `<p>` 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 `<p>` 元素的每个 `<p>` 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 `<p>` 元素。
:optional	input:optional	选择不带 "required" 属性的 `<input>` 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 `<input>` 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 `<input>` 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 `<input>` 元素。
:required	input:required	选择指定了 "required" 属性的 `<input>` 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的`#news`元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 `<input>` 元素。
:visited	a:visited	选择所有已访问的链接。

所有CSS伪元素

选择器	例子	例子描述
::after	p::after	在每个 `<p>` 元素之后插入内容。
::before	p::before	在每个 `<p>` 元素之前插入内容。
::first-letter	p::first-letter	选择每个`<p>`元素的首字母。
::first-line	p::first-line	选择每个 `<p>` 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

四、课后个人总结：

选择器的特异度（Specificity）

id(100) > class(10) > 标签（1）

继承

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

显式继承

有些元素默认不可继承，可以在通配选择器中设置该元素为inherit

    * {
      box-sizing: inherit;
    }

    html {
      box-sizing: border-box;
    }

    .some-widget {
      box-sizing: content-box;
    }

理解CSS | 青训营笔记

理解CSS

一、本堂课重点内容：

什么是CSS？

如何在页面中使用CSS？

CSS是如何工作的？

CSS选择器（selector）

作用：

方式：

通配选择器

标签选择器

id选择器(id唯一)

类选择器

属性选择器

伪类（pseudo-classes）

概念：

分类：

状态伪类

结构性伪类

组合（Combinators）

初始值

盒模型

二、详细知识点介绍：

字体（font-family）

CSS字型

字体系列

字体样式

所有CSS字体属性

边框（border）

border-style 值:

Overflow

块级&行级

display属性

行级排版上下文

块级排版上下文

Flex Box布局

justify-content

align-items

Flexibility

flex-grow

Flex布局的一些缩写

Grid布局

float浮动

元素怎样浮动

清除浮动 - 使用 clear

Position属性

fixed定位

relative定位

absolute定位

sticky定位

三、实践练习例子：

所有CSS伪类

所有CSS伪元素

四、课后个人总结：

选择器的特异度（Specificity）

继承

显式继承

CSS求值过程

五、引用参考：