【青训营】-CSS基础

Craipy
219 阅读7分钟

CSS基础

CSS是啥？

CSS：层叠样式表（cascading style sheets)，一种用来为结构化文档（基本就是HTML）添加样式的语言。

举例来说，要选择一个HTML页面里所有的段落元素，然后将其中的文本改为红色，可以这样写CSS

p {
    color:red;
}

CSS可以给文档添加自定义样式 比如：改变标题和链接的颜色以及大小。

也可以修改布局 比如：将一个单列布局变成双列，包含主要内容区域和存放相关信息的侧边栏区域。

另外还可以用来做一些特效和动画

CSS可以将样式与文章结构分离

CSS基础规则

IMG_0163
  • 选择器：选择一个或多个需要添加样式的元素，多个元素之间用,隔开
  • 声明：一个单独的规则，如color:red；用来指定添加样式元素的属性。
  • 属性：指定要改变的元素样式
  • 属性的值：从指定属性的众多外观中选择一个值

规则集包含在{}中

每个声明里要用:将属性与属性的值分隔开

每个规则集里要用;将各个声明分隔开

选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择HTML文档中给定的元素。

元素选择器

也称作标签或者类型选择器。

选择的内容：所有指定类型的HTML元素。

p 选择的就是 <p>

p {
    ...
}
ID选择器

具有特定id的元素

#my-id 选择的就是 元素的属性中id="my-id"的元素 例如 <div id="my-id"></div>

#myid {
    ...
}
类选择器

具有特定类的元素

class="my-class"

.my-class{
    ...
}
属性选择器

拥有特定属性的元素

img[src] {
    ...
}
伪类选择器

特定状态下的特定元素（比如：鼠标指针悬停）

a:hover

a:hover{
    ...
}

层叠与继承

层叠

css代表层叠样式表（cascading style sheets),理解第一个词cascading很重要

css

h1{
    color:red;
}
h1{
    color:blue;
}

html

<h1>This is my heading.</h1>

显示的效果

image-20210818091128899

优先级

浏览器中有选择器的优先级决定规则，基本就是选择器越具体越优先

内联样式 > ID选择器 > 类选择器 > 元素选择器

继承

一些设置在父元素上的属性会被子元素继承，有些不能

css

p {
    color: blue;
}

html

<p>text in p <span>text in span</span></p>

结果

image-20210818091733633

CSS怎么学

Learn to Code - for Free | Codecademy

Learn the Latest Tech Skills; Advance Your Career | Udacity

CSS 教程 (w3school.com.cn)

CSS 教程 | 菜鸟教程 (runoob.com)

免费学习编程 - Python、JavaScript、Java、Git 等 (freecodecamp.org)

前面的挑一个学一遍就行，下面的会陪你一辈子

持续学习查阅资料

CSS - 学习 Web 开发 | MDN (mozilla.org)

这是一个CSS文档库，基本会是程序员最常来的地方

image-20210818093342837

CSS Almanac | CSS-Tricks

另一个css文档库，用有别与mdn的形式组织css知识，还有非常活跃的css社区，里面有各种奇技淫巧。作为MDN的补充非常合适。

image-20210818093419631

CSS常用规则

布局

盒模型

在css中，所有元素都被一个个的盒子包围着，理解这些盒子的基本原理，是我们使用css实现准确布局、处理元素排列的关键。

盒子分为块级盒子和内联盒子

image-20210818095257498

css中组成一个块级盒子需要：

content box ：这个区域用来显示内容，大小可以通过设置width和height。

padding box：包含在内容区域外部的空白区域；大小可以通过padding相关属性设置。

Border box：边框盒包裹内容与内边距。大小通过border相关属性设置

Margin box：这是最外面的区域，是盒子和其他元素之间的空白间距。大小可以通过margin相关属性设置。会与其他元素的margin重叠但不叠加

块级盒子block
  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下，以为着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width和height属性可以发挥作用
  • 内边距padding，外边距margin，和边框border可以将其他元素推开
  • 除非特殊指定，诸如标题和段落等默认情况下都是块级盒子。
  • display:block;

通过box-sizing属性定义盒子宽高作用的对象

box-sizing默认是content-box 这时候width和height作用在content

当设置box-sizing为border-box时，这时候width与height作用在border

box-sizing=content-box（默认）box-sizing=border-box
image-20210818105352264image-20210818105530930

如果想要所有元素都是用border-box，设置所有元素继承该属性


html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
内联盒子inline
  • 盒子不会产生换行
  • width与height属性将不起作用
  • 垂直方向的内边距、外边距、以及边框会被应用但是不会把其他处于inline状态的盒子推开
  • 水平方向的内边距、外边距、以及边框会被应用且会把其他处于inline状态的盒子推开
  • 诸如a标签、span标签等默认都是inline
  • display:inline;
image-20210818110833146 image-20210818110622841
内联块inline-block

内联块是一个不会切换到新行但可以设置width与height属性的

display:inline-block;

image-20210818110833146 image-20210818110622841

文档流

盒模型解释了一个元素块的尺寸；那元素块在整篇文档中的位置时如何确定的呢？

正常文档流

默认的，就是按照盒模型的规则进行排布。

块级元素，按照基于父元素的书写顺序的块流动方向放置

每个块级元素会在上一个元素下面另起一行，他们会被设置好的margin分隔。块级元素是垂直布置的。

弹性布局

弹性盒子在布局中使用最广泛的方式

弹性盒子是一种用于按行或者按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间

image-20210818112600039

在容器上加display:flex属性。默认就可以得到一个横排的布局。

就盒模型而言，此时容器类似与块级元素（display:block），但宽度默认 由子元素 决定。

子元素类似与inline-block元素，可以设宽高，且不换行。其原本的display属性基本被无视了，这是一种隐含的盒模型状态。

image-20210818113042883

弹性模型非常灵活。可以利用flex-direction属性控制子元素的排布顺序

image-20210818113405177

flex容器类似块级盒子，可以设置比子元素所需更大的宽度。

justify-content属性可以确定此时子元素如何分配空间

image-20210818113839338image-20210818113816197

align-items是子元素在主轴方向的对齐方式

image-20210818114435185

image-20210818114418432

定位

position用来定位盒子在整个页面中的位置

静态定位

position:static默认就是正常文档流中的定位

相对定位

position:relative相对定位在文档流中仍然占据位置，但是可以使用top,left,bottom,right属性进行位置的偏移操作。

绝对定位

position:absolute绝对定位完全脱离文档流。绝对定位的盒子的定位，大小，你完全可以指定。

绝对定位的top,left,已经不是相对于原位置了，而是相对于一个非static定位的父元素容器。

固定定位

position:fixed固定定位，相对于浏览器窗口进行top,left的偏移

z-index

因为非static值的position属性让元素之间可以互相覆盖

CSS提供z-index属性来控制哪个元素覆盖在最上层

默认文档中下面的元素在上层

装饰

文字

文字的字体font-family

文字的颜色color

文字的粗细font-weight

文字的样式font-style

文字的装饰text-decoration

文字的对齐方式text-align

文字的大小font-size

image-20210818130058807

背景

background - CSS（层叠样式表） | MDN (mozilla.org)

背景颜色background-color

背景图片background-image

背景渐变background-image

background-image: linear-gradient(red, orange);

详细的使用可以参照CSS Gradients | CSS-Tricks

边框

border | CSS-Tricks

border - CSS（层叠样式表） | MDN (mozilla.org)

image-20210818131030839

阴影

box-shadow | CSS-Tricks

box-shadow - CSS（层叠样式表） | MDN (mozilla.org)

image-20210818131205190

text-shadow - CSS（层叠样式表） | MDN (mozilla.org)

image-20210818131637359

交互

鼠标样式cursor

cursor - CSS（层叠样式表） | MDN (mozilla.org)

image-20210818131804759

动画transition

transition - CSS（层叠样式表） | MDN (mozilla.org)

动画animation

animation - CSS（层叠样式表） | MDN (mozilla.org)

CSS精益求精

css调试

利用browser的inspect进行元素审查，查看元素的样式

image-20210818132959819

css扩展

css预处理器

less
  • 提供了变量支持
  • 提供类似函数的功能 mixin

image-20210818133746109

sass
stylus

css革新

未来可能就不需要写css了，之间将css写在js里 css-in-js

代表的有styled-components

image-20210818134001598

tailwindcss

可以收拢css的选择

我们可以不单独的写css文件，只需要指定相应的class就行

image-20210818134254857

avatar
文章
阅读
粉丝