前端CSS | 青训营笔记

JadeLM
62 阅读3分钟

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

CSS是什么

Cascading Style Sheets，用来定义页面元素的样式，可以设置字体和颜色，位置和大小，添加动画效果等. 如下代码：h1是选择器Selector，color是Property，White是属性值Value。

h1{
    color:white;
    font-size:14px;
 }

如何使用

在页面中使用css有三种方式，分别为外链，嵌入和内联。

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

<!--嵌入-->
<style>
    li{ margin:0; list-style: none; }
    p{ margin:1em 0; }
</style>

<!--内联-->
<p style="margin:1em 0">Example Content</p>

选择器Selector

找出页面中的元素，以便给他们设置样式。可以使用多种方式选择元素，比如：按照签名、类名或id，按照属性，按照DOM树中的位置。
选择器主要有以下几种：
  • 通配选择器
  • 标签选择器
  • id 选择器
  • 类选择器
  • 属性选择器
<h1 id="one">This is heading</h1>
<p class="two">this is some paragraph.</p>
<input value="zhao" disabled />
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
// 通配选择器
* {
  color: red;
  font-size: 20px;
}

// 标签选择器
h1 {
  color: orange;
}

// id选择器
#one{
  color: blue;
}

// 类选择器
.two{
  color: red;
}

// 属性选择器
[disabled] {
    background: #eee;
    color: #999;
  }
 <!--匹配以#开头-->
a[href^="#"] {
    color: #f54767;
}
 <!--匹配以.jpg结尾-->
a[href$=".jpg"] {
    color: deepskyblue;
}
</style>

伪类(pseudo-classes)

不基于标签和属性定位元素，伪类一般分为两种：

  • 状态伪类
  • 结构性伪类 状态伪类一般用于链接的状态，点击前，点击时，点击后，鼠标滑过等等。 结构性伪类一般用于寻找子节点，兄弟节点
<a href="http://example.com">
  example.com
</a>
<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;
}

// 结构性伪类
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

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

组合(Combinators)

image-20230115103814778.png

常用属性

颜色-HSL
  • Hue 色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360.
  • Saturation 饱和度(S)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
  • Lightness 亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围0-100%。
字体
  • 通用字体族： image-20230115104442332.png
  • font-family 使用建议
    • 字体列表最后写上通用字体族
    • 英文字体放在中文字体前面
  • line-height 行高可以设置无单位的小数，比如 line-height: 1.6 意思是行高为当前字体大小的1.6倍
  • spacing
    • letter-spacing：字母之间的间距
    • word-spacing：单词之间的间距
  • text-indent 文本首行缩进
  • text-decoration 下划线位置
    • none
    • underline 文本下方
    • line-through 文本中间
    • overline 文本顶部
  • white-space
    • normal 默认
    • nowrap 不换行
    • pre
    • pre-wrap 保留换行空格，文本超出单行最大长度自动换行
    • per-line 仅保留换行

布局(Layout)

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

margin collapse margin在垂直方向上有两个在这个margin，会进行合并，结果取较大的那个margin

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内(in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素
块级排版上下文
  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overfl值不是visible的块盒
    • display:flow-root;
BFC内的排版规则
  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

Flex 布局

Flexibility

  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度 flex有三个参数，可以简写 flex：flex-grow flex-shrink flex-basis

Grid 布局

  • display:grid 使元素生成一个块级的Grid容器
  • display-template 将容器划分为网格
avatar
文章
阅读
粉丝