前端与CSS | 青训营笔记

JayZzz
114 阅读5分钟

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

前端学习中，离不开核心的前端三件套HTML,CSS和JavaScript，合理地形容说，HTML就像是人的身体构造，而CSS就是修饰人的五官，外貌，穿着，JavaScript就是人的肢体动作。

CSS又名层叠样式表，描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，替元素增加各种样式的语言。接下来让我们一起学习CSS的使用和掌握CSS的知识吧

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

CSS是如何工作的

image-20220725162426635

选择器 Selector

选择器的功能：找出页面中的元素，以便给他们设置样式

选择元素的方法：

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

选择器的方法

  1. 通配选择器 * 可以匹配所有标签

  2. 标签选择器：直接选用标签 例：h1

  3. id选择器： id = "logo" #logo {} 一般来说id是唯一的

  4. 类选择器： class = "done" .done 类一般可以用多个

  5. 属性选择器：直接选用标签里的属性

    用例：[disabled]、 input[type = "password"]

    <a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>
​
<style>
// href^="#" 选用href的值以#开头的属性
    a[href^="#"]{
        ... 
    }
// href$=".jpg" 选用href的值以.jpg结尾的属性
    a[href$=".jpg"] {
        ...
    }
</style>

  6. 伪类选择器：例如链接的状态选择

    // a链接当前(默认)状态下
a:link {}
// 访问过链接之后
a:visited {}
// 鼠标移到连接上之后
a:hover {}
// 鼠标点击后
a:active {}
// 输入框focus状态的设置
:focus {}
// 第一个li标签
li:first-child {}

  7. 组合选择器 image-20220725164505479

  8. 选择器组image-20220725164729306

颜色

颜色--RGB

R -- red G -- green B -- blue

常用颜色的RGB值

  • 白色： rgb (255,255,255)
  • 黑色： rgb (0,0,0)
  • 红色： rgb (255,0,0)
  • 绿色： rgb (0,255,0)
  • 蓝色： rgb (0,0,255)
  • 青色： rgb (0,255,255)
  • 紫色： rgb (255,0,255)

颜色--HSL

image-20220725170545498

透明度--alpha

字体 font-family

指定多个字体，来兼容不同浏览器

image-20220725171105374

字体大小 font-size

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

字体风格 font-style

例如斜体：

font-style: italic

字体粗细 font-weight

font-weight: 400    --- 等价于 normal
font-weight: 700    --- 等价于 bold

行高 line-height

上下文本行的基线间的垂直距离

从上到下四条线分别是顶线、中线、基线、底线

image-20220725172017592

文本

text-align

text-align 属性规定元素中的文本的水平对齐方式。

image-20220725172409746

word-spacing 字间距

word-spacing 属性用于指定文本中单词之间的间距。

text-indent 文字缩进

text-indent 属性用于指定文本第一行的缩进：

text-decoration 文字装饰

text-decoration 属性用于设置或删除文本装饰。

常见的值：overline、line-through、underline、none

white-space 空白

white-space 属性指定元素内部空白的处理方式。

常见的值：normal nowarp(不换行) pre(保留样式)

pre-warp(保留空格，该换行换行) pre-line(不保留空格)

深入CSS

选择器的特异度（权重）

每个规则对应一个初始"四位数"：0、0、0、0 若是 行内选择符，则加1、0、0、0 若是 ID选择符，则加0、1、0、0 若是 类选择符/伪类选择符，则分别加0、0、1、0 若是 元素选择符，则分别加0、0、0、1 算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

CSS求值

image-20220725181004062

image-20220725181050000

布局（Layout）

  • 确定内容的大小和位置的算法
  • 根据元素、容器、兄弟节点和内容等消息来计算

布局的相关技术

image-20220725220009441

盒模型

image-20220725220026600

width:

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

height:

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

padding 内边距

image-20220725220605170

border 边框

image-20220725220546623

margin 外边距

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

margin collapse

边距的融合，取两者之间的边距的较大值

border-box

image-20220725221019562

overflow

可取的值：visible、hidden、scroll、auto

块级元素和行级元素

image-20220725222620229

display属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散多行
  • none 排版时被完全忽略

行内格式化上下文 IFC

  • Inline Formatting Context

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

  • IFC内的排版规则

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

块级排版上下文

  • BFC解决高度塌陷, 外边距重叠，清除浮动问题，

  • 创建BFC容器的条件：

    • 根标签
    • overflow:不为visible的属性，父元素有高度 避免使用hidden属性
    • display：inline-block、table-cell、table-caption、flex等
    • position：absolute、fixed
    • 元素设置浮动：float 除 none 以外的值

Flex Box 是什么

  • 一种新的排版上下文

  • 可以控制子级盒子的

    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

justify-content 横向对齐

image-20220725234415246

align-items 纵向对齐

image-20220725234509210

position属性

image-20220725235929005

image-20220726000031332

今天学习CSS的众多内容，包括基础css的样式属性，以及高级css的经典布局，盒式结构等都让我受益匪浅，期待之后在青训营的学习，能收获更多知识，提高自己的能力，在这个暑假不断进步！！

avatar
文章
阅读
粉丝