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

以下为今日课上笔记内容

一、CSS是什么？

CSS：Cascading Style Sheets

1.用来定义页面元素的样式

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

选择器：选中页面中的元素给这些元素定义样式

像color、font-size（字体大小）、line-height（行高）这种叫做属性

多条声明+括号=声明块

选择器+大括号(括号里有声明)=规则

2.在页面中使用CSS

<!-- 外链 -->   //单独页面，单独属性，link标签
<link rel="stylesheet"href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none;}
  li { margin: 0; list-style: none;}
  
<!-- 内联 -->
<p style="margin:lem 0">Example Content</p>

style 属性 --标签样式

推荐外链内容和样式的分离

组件也可以实现分离

不推荐内联但内联可使用在UI组件库

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
  <style>
    h1 {
      color: orange;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>Web框架的架构模式探讨</h1>
  <p>在写干货之前，我想先探讨两个问题，
  模式的局限性？模式有什么用？</p>
</body>
</html>

3.CSS是如何工作的

1.选择器（Selector）

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

②使用多种方式选择元素

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

2.通配选择器

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

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

*表示匹配所有

3.标签选择器

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

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

4.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>

id得是唯一值，不唯一的话达不到预期效果。

5.类选择器

<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>

6.属性选择器

input的disabled表示这一项被禁用

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

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

<style>
  [disabled] {    //给禁用的加样式
    background: #eee;
    color: #999;
  }
</style>

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

<style>
  input[type="password"] {  //是个特定值时被选中
    border-color: red;
    color: red;
  }
</style>

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {   //href^="#"  表示以#开头会被匹配上
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {    //href$=".jpg" 表示以jpg结尾会被匹配上
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

7.伪类(pseudo-classes)

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

②几种伪类

状态伪类例如：链接
结构性伪类例如：有序列表

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

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

<style>
a:link {   //默认状态
  color: black;
}

a:visited {   //点过之后
  color: gray;
}

a:hover {   //鼠标移动到链接上
  color: orange;
}

a:active {   //鼠标按下去之后
  color: red;
}

:focus {   //输入框的聚焦状态
  outline: 2px solid orange;
}
</style>

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

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

li:first-child {  //父级第一个孩子
  color: coral
}

li:last-child {   //父级最后一个孩子
  border-bottom: none;
}
</style>

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {   
    color: red;
  }
  
  input.error {   //边框（组合）
    border-color: red;
  }
</style>

组合的多种展示

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {   //三个均为黑色
    color: black;
  }

  article > p {  //article的第一个子元素
    color: blue;
  }

  h2 + p {   //紧跟h2后的第一个
    color: red; 
  }
</style>

8.选择器组

body, h1,h2，h3,h4, h5,h6, ul,ol, li｛
margin:0;     //内边距
padding: 0;   //外边距
｝
[type="checkbox"]，[type="radio"]｛
box-sizing: border-box;
padding: 0;
｝

9.颜色

表示方法：#+十六进制或rgb+每个颜色的度

指定颜色

alaha 透明度

(透明度为1 完全看不见越小越透明)

10.字体（font-family）


<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;    //一层一层匹配，最后要加上通用字体
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

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>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

font-size

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

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {    //默认长度
    font-size: 20px;
  }

  section h2 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }

  .normal {
    font-style: normal;   //非斜体
  }

  .italic {
    font-style: italic   //斜体
  }
</style>

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }  //自重
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

line-height 行高

两行文字的基准线

font: style weight size/height family

hl ｛
/* 斜体 粗细 大小/行高 字体族 */
font: bold 14px/1.7 Helvetica, sans-serif;
｝
p｛font: 14px serif;｝

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;   //是行高的1.6倍数
  }
</style>

text-align

spacing

text-indent

text-decoration

<p class="text">This is a paragraph.     The text
is splitted into two lines.</p>

normal 正常

nowrap 禁止文字自动换行

pre 在...之前

pre-wrap 前一个包装

pre-line 前一行

重叠时会选择哪条规则

<article>
<hI class="title">拉森火山国家公园</h1></article>
<style>
.title ｛
color: blue;
｝
article h1 ｛
color: red;
｝
</style>

方法

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {    //覆盖上个属性
    color: #fff;
    background: #218de6;
  }
</style>

继承

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

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

初始值

CSS 中，每个属性都有一个初始值

background-color 的初始值为 transparent

margin-left 的初始值为 0

可以使用initial关键字显式重置为初始值

background-color: initial

CSS求值过程

布局

width

指定 content box 宽度
取值为长度、百分数、auto
auto 由浏览器根据其它属性确定
百分数相对于容器的 content box 宽度

height

指定 content box 高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

border

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

当四条边框颜色不同时

margin

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

使用 margin:auto 水平居中

<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

margin collapse

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

box-sizing: border-box

<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

overflow

块级 vs.行级

Block Level Box
Inline Level Box

不和其它盒子并列摆放
和其它行级盒子一起放在一行或拆开成多行

适用所有的盒模型属性
盒模型中的width、height不适用

块级元素

生成块级盒子
body、article、div、main、section、h1-6、p、ul、li等
display: block

行级元素

生成行级盒子
内容分散在多个行盒 (line box) 中
span、em、strong、cite、code 等
display: inline

display 属性

block 块级盒子

inline 块级盒子

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

none 排版时完全被忽略

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流

其它元素都在常规流之内 (in-flow)

常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

1）Inline Formatting Context (IFC)

2）只包含行级盒子的容器会创建一个IFC

3）IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
verticalalign 决定一个盒子在行内的垂直对齐
避开浮动(float)元素*

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

块级排版上下文

1）Block Formatting Context (BFC)

2）某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-blockFlex子项和Grid子项
overflow 值不是 visible 的块盒
display: flow-root;

BFC内的排版规则

盒子从上到下摆放
垂直margin 合并
BFC内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

Flex Box 是什么?

1）一种新的排版上下文

2）它可以控制子级盒子的:

摆放的流向(右左上下)
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐是否允许折行

<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>

Flexibility

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

flex-grow

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

flex-shrink

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

flex

flex:1 flex-grow:1

flex:100px flex-basis:100px

flex: 2 1 flex-basis:100px

flex:1 100px flex-grow: 1; flex-basis:100px

flex: 2 0 100px flex-grow: 2; flex-shrink: 0; flex-basis: 100px

flex: auto flex: 1 1 auto

flex: none flex: 0 0 auto

划分网格

网格区域

float 浮动

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

position 属性

static 默认值，非定位元素

relative 相对自身原本位置偏移，不脱离文档流

absolute 绝对定位，相对非 static 祖先元素定位

fixed 相对于视口绝对定位

<h1>页面标题</h1>
<div class="container">
  <div class="box"></div>
  <p>段落内容段落内容 1</p>
  <p>段落内容段落内容 2</p>
  <p>段落内容段落内容 3</p>
  <p>段落内容段落内容 4</p>
</div>

<style>
  .container {
    background: lightblue;
  }

  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</main>
<a href="#" class="go-top">返回顶部</a>

<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  
  .go-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    color: #fff;
  }

  nav a {
    padding: 0 1em;
    color: rgba(255, 255, 255, 0.7);
  }

  nav a:hover {
    color: #fff;
  }

  body {
    margin: 0;
    font-size: 14px;
  }

  a {
    color: #fff;
    text-decoration: none;
  }

  section {
    height: 100vh;
    color: #fff;
    text-align: center;
    font-size: 5em;
    line-height: 100vh;
  }

  section:nth-child(1) {
    background: #F44336;
  }

  section:nth-child(2) {
    background: #3F51B5;
  }

  section:nth-child(3) {
    background: #FFC107;
  }

  section:nth-child(4) {
    background: #607D8B;
  }

  section:nth-child(5) {
    background: #4CAF50;
  }
</style>

注：图可上下滑动但导航那一栏不变

学习 CSS的几点建议

充分利用 MDN 和 W3C CSS 规范

保持好奇心，善用览器的开发者工具

持续学习，CSS 新特性还在不断出现

理解 CSS | 青训营笔记

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

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