CSS | 青训营笔记

叁川故里
50 阅读5分钟

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

CSS

理解 CSS

Cascading Style Sheets, 层叠式样表

基础

基础代码

 h1 /* 给 h1 标签设置 */ {
     color /* 标签 */: white /* 属性值 */;
     font-size: 14px; /* 一整条叫一个 Declaration */
 }

使用 css

 <!-- 外链 -->
 <link rel="stylesheet" href="/assets/style.css">
 <!-- 嵌入 -->
 <style>
     /* css 代码段 */
 </style>
 <!-- 内联 -->
 <p style="margin: 1em 0">Content</p>

一般推荐外链, 嵌入和内联耦合度太低了

要分工明确, 把样式统一划给 css

使用

 <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>content</p>
 </body>

CSS 是如何工作的

image.png

选择器

选择器 Selecter

  • 标签名, 类名 (class 属性. 前面加 . ), id (id 属性, 前面加 # )

     h1 {}
 .class {}
 #id {}

  • 属性

     <input value="zhao" disabled />
 <style>
     [disabled] {}
     input[type="password"] {}  /* input 的 type = password 时生效 */
     a[href^="#"] {}  /* 以 # 开头 */
     a[href$=".jpg"] {}  /* 以 .jpg 结尾 */
 </style>

  • 状态

     a:link {}  /* 链接没有被访问时 */ 
 a:visited {}  /* 被访问过后 */
 ​
 :focus {
     outline: 2px solid orange;
 }

  • 伪类: DOM 树中的位置, 相对于父级节点的位置

     li:first-child {}  /* 列表第一个 */
 li:last-child {}  /* 列表最后一个 */
 ​
 input.error {}  /*  */

  • 通配选择器: * 选择全部

组合 Combinators

image.png

  • 直接组合, 看起来就是指标签满足这个元素
  • 后代组合, 就是把 A 里面的所以 B 都设定
  • 亲子组合, 就是后台选择器, 只生效一层
  • 兄弟选择器,
  • 相邻, 字面意思

选择器组

就是把一堆选择器, 逗号隔开, 设置相同的声明

字体样式

颜色模型

RGB
  • rgba( , , )
HSL
  • Hue, 色相
  • Saturation, 饱和度
  • Lightness, 亮度
  • hsl( , , )
透明度
  • rgba( , , , ) , hsla( , , , )
  • 0 - 1, 数值越低越透明

字体 font-family

 h1 {
     font-family: 字体1, 字体2, ...挨个选择存在的;
 }
 /* 有英文字体就先写英文的, 英文字体不包含中文, 中文被迫选择其他字体, 
 先写了中文的, 中文字体包含英文字体 */
 @font-face {
     font-family: f1;
     src: url("网络地址") format("后缀");
 }
通用字体
  • serif, 衬线体
  • sans-serif, 无衬线体
  • cursive, 手写体
  • fantasy,
  • monospace, 等宽字体
font 属性

可以把一堆属性全部放在这一个上面

font: style weight size/height family

 h1 {
     font: bold 14px/1.7 Helvetica, sans-serif;
 }
 p {
     font: 14px serif;
 }
其他
 p {
     font-size: 36px;  /* 字体大小 */
     font-style: normal;  /* 字体风格, 比如还有 italic 斜体 */
     font-weight: 100;  /* 自重, 就是颜色颜色深浅 100~900 */
     line-height: ;  /* 行高 */
     test-align: left;  /* center, right, justify 文字对齐 */
     letter-spacing: 0px;  /* 字符间距 */
     word-spacing: 0px;  /* 字间距 */
     text-indent: 0px;  /* 首行缩进 */
     text-decoration: none; /* 文字修饰 underline(下线), line-through(删除线), overline(上) */
     white-space: normal;  /* 对空格和换行的处理 */
 }

检查 CSS

就是在浏览器控制台, F12, Ctrl + Shift + I

深入CSS

选择器的特异度

谁的特异度谁生效

image.png

继承

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

  • 一般字体相关的会继承
  • 盒相关的一般不继承
  • 属性设置: inherit 显式继承, 让不可继承的变成可继承的

初始值

  • css 中每个属性都有一个初始值
  • 使用 initial 关键字就可以重置为初始值

CSS 求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

布局(Layout)

确定内容的大小和位置的算法

常规流

盒模型

image.png

外边距, 边框, 内边距, 高, 宽

  • width, height, 就是宽高

    • 设置百分数时, 需要有指定高度才能生效

  • 内边距 padding

    • 四个方向 -left
    • 设为固定值

  • 边框 border

    • 四个边框可以分别设置
    • -width , -style, -color

  • 外边距 margin

    • 两个元素之间的距离, 只会选择大的一个.

  • box-sizing: border-box: 包括 border在内的高度和宽度

  • overflow: 处理多余的内容, 展示, 隐藏, 滚动

块级和行级
块级
  • 不和其他盒子并列摆放
  • 适用所有的盒模型属性
行级
  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的 width, height 不适用
块级元素
  • body, article, div, main, section, h1-6, p, ul, li
  • display: block => 变成块级
行级元素
  • span, em, strong, cite, code
  • display: inline => 变成行级
display
  • block 块
  • inline 行
  • inline-block, 本身是行, 可以放在何种, 设置宽高, 作为一个整体不会被拆分
  • none 排版忽略
行级排版上下文

只包含行级盒子的容器会创建一个 IFC (Inline Formatting Context)

IFC 规则
  • 一行水平摆放
  • 一行放不下换行
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素
块级排版上下文

某些容器会创建一个 BFC (Block Formatting Context)

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

FlexBox

控制子盒子的: 摆动流向, 摆放顺序, 盒子宽度和高度, 水平和垂直方向的对齐, 是否允许这行

 <div class="container">
     <div class="a">A</div>
     <div class="b">B</div>
     <div class="c">C</div>
 </div>
 <style>
     .container {
         display: flex;
         flex-direction: row; /* 默认 row → , column ↓ , 加上 -reverse, 反方向  */
         border: 2px solid #996;
     }
     .a, .b, .c {
         text-align: center;
         padding: 1em;
     }
     .a {
         background: #fcc;
     }
     .b {
         background: #cfc;
     }
     .c {
         background: #ccf;
     }
 </style>

image.png

主轴和侧轴

横着的主轴, 竖着的侧轴

justify-content

设置左右的相对位置关系

image.png

align-items

image.png

align-self

image.png

order

image.png

中间还有一些,,,,,,,视频看不下去了,,,太杂了

Grid 布局

二维布局方式

image.png

  • 坐标是从 1 开始的
 h {
     grid-row-start: 1;
     grid-column-start: 1;
     grid-row-end: 3;
     grid-column-end: 3;
 }
 h {
     2/2/4/4;
 }

float 浮动

实现图文混排的环绕效果

绝对定位

position 属性

static
  • 默认值
relative
  • 在常规流里面布局
  • 相对于它原本的位置偏移
position: absolute
  • 脱离常规流
  • 相对最近的飞 static 祖先定位
  • 不会对瘤内元素布局造成影响
position: fixed
  • 总是相对于窗口定位

END

笔记记得很差, 内容记得很多, 不够精简, 还需要多记笔记

avatar
文章
阅读
粉丝