CSS学习笔记 ｜ 青训营

打不倒的小怪瘦
90 阅读7分钟

CSS入门

层叠样式表

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

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

整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：

  • 选择器（Selector）

    HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。

  • 声明（Declaration）

    一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

  • 属性（Properties）

    改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。

  • 属性的值（Property value）

    在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。 用于定义页面元素的样式。

使用方式

  • 外链
  • 嵌入
  • 内联

工作方式

image.png

选择器selector

  • 找出页面中的元素，以便设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置

分类

  • 通配选择器 *

  • id选择器 唯一id

  • 类选择器 class

  • 属性选择器 [属性] ^开头#结尾

    • 伪类选择器

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

      • 状态伪类（链接的状态 ：）

      • 结构性伪类（列表 first-child last-child）

组合

  • 直接组合 AB 满足A同时满足B input:focus
  • 后代组合 AB 选中B,如果它是A的子孙 nav a
  • 亲子组合 A>B 选中B,如果它是A的子元素 section>p
  • 兄弟选择器 AB 选中B,如果它在A后且和A同级 h2p
  • 相邻选择器 A+B 选中B,如果它紧跟在A后面 h2+p

选择器组

body,hi,h2,h3,h4,h5,h6,ul,ol,li{
	margin:0;
	padding:0;
}
[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0;
}

优先级

<article>
	<h1 c1ass="tit1e">拉森火山国家公园</h1>
</article>
<style>
.title{
	color:blue;
	}
	article h1 {
		color:red;
	}
</style>

选择器的特异度

image.png

<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;
	co1or:#333;
	}
.btn.primary{ 
    color:#fff;
    background:#218de6;
}
</style>

颜色

  • 值

    • #8fac87ff

    • rgb(143,172,135) rgba

    • hsl(18, 91% 59%) hsla

      • Hue 色相 0-360
      • Saturation 饱和度 0-100%
      • Lightness 亮度 0-100%
      • alpha 不透明度 0-1

    • 名称 black，white

字体

font-family：Serif Sans-Serif Cursive

Web Fonts : @font-face

font-size

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

font-style：normal、italic

font-weight：100-900（-normal、-bold）

line-height：1.5ex(几倍字高)

white-space

  • normal 多个空格合并一个空格
  • nowrap 不换行
  • pre 保留全部空格
  • pre-wrap 保留空格 自动换行
  • pre-line 合并空格 保留换行

调试CSS

  • 检查
  • ctrl+shift+i
  • F12
  • /* 注释 */

继承

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

一般文字(color/font size)都可继承 和模型相关的一般不继承

显式继承 inherit

*{
	box-sizing:inherit /*让原本不可继承的变可继承*/
}
html{
	box-sizing:border-box;
}
.some-widget{
	box-sizing:content-box;
}

初始值

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

    • background-color的初始值为transparent
    • margin-left的初始值为0

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

    • background-color:initial

CSS求值过程

image.png

image.png

image.png

布局 layout

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

盒模型

content-box

image.png

width

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

height

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

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • 三种属性
    • border-width
    • border-style
    • border-color
  • 四个方向
    • border-top
    • boder-right
    • border-bottom
    • border-left

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto(水平居中)
  • 百分数相对于容器宽度
  • margin collapse 取两者边距最大的作为间隔
box-sizing:border-box

image.png

  • overflow 展示内容 visible hidden scroll

常规流

  1. 根元素、浮动和绝对定位的元素会脱离常规流
  2. 其它元素都在常规流之内(in-flow)
  3. 常规流中的盒子，在某种排版上下文中参与布局
行级

  • Inline Formatting Sontext(IFC)

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

  • IFC内的排版规则

    • 盒子在一行内水平摆放

    • 一行放不下时，换行显示

    • text-align决定一行内盒子的水平对齐

    • vertical-align决定一个盒子在行内的垂直对齐

    • 避开浮动((float)元素*

块级
  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
  • BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display:flow-root;
盒子区别
  • 行级
    • 和其它行级盒子一起放在一行或拆
    • 开成多行盒模型中的width、height不适用
    • 生成块级盒子 body、article、div、main、section、.h1-6、p、ul、li等 display:block
  • 块级
    • 不和其它盒子并列摆放
    • 适用所有的盒模型属性
    • 生成行级盒子 内容分散在多个盒(line box)中span、em、strong、cite、code等 display:inline

ps

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

FlexBox

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向（→←↑↓）

    • 摆放顺序

    • 盒子宽度和高度

    • 水平和垂直方向的对齐

      主轴和侧轴 justify-content

      image.png align-items image.png Flexibility

      • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

      • flex-grow有剩余空间时的伸展能力

      • flex-shrink容器空间不足时收缩的能力

      • flex-basis没有伸展或收缩时的基础长度

    • 是否允许折行

Grid布局

  • display:grid使元素生成一个块级的Grid容器

  • 使用grid-template相关属性将容器划分为网格

  • 设置每一个子项占哪些行列

  • 划分网格

    grid-template-columns:100px 100px 200px;
grid-template-rows:100px 100px

grid-template-columns:30% 30% auto;
grid-template-rows:100px auto

grid-template-columns:100px 1fr 1fr;
grid-template-rows:100px 1fr

  • grid-line

    image.png

  • grid-area 网格区域

    image.png

浮动 float

绝对定位

  • position属性
    • static
      • 默认值，非定位元素
    • relative
      • 相对自身原本位置偏移，不脱离文档流
    • absolute
      • 绝对定位，相对非static祖先元素定位
    • fixed
      • 相对于视口绝对定位

学习CSS的几点建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现

思考

通过青训营中的三节CSS课程，初步对CSS有了一定的了解，在HTML的基础上拥有了CSS的基础知识，也可以为之后的JS学习打下基础。CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。老师讲解的也挺细节的，没讲的部分之后准备再去菜鸟教程或者MDN查看学习。

avatar
文章
阅读
粉丝