5000字、十五分钟CSS入门

5000字、十五分钟CSS入门

一.CSS概述

CSS Cascading Style Sheets

用来定义页面元素的样式

设置字体和颜色设置位置和大小

添加动画效果

HTML 用于定义内容的结构和语义,CSS 用于设计风格和布局。

样式规则

选择器(CSS的ID,可以理解为名字){

​ 选择器:值/声明;

​ 选择器:值/声明;

}

选择 (selects) 了我们将要用来添加样式的 HTML 元素,

冒号之前是属性,冒号之后是值。不同的 CSS对应不同的合法值。

2.在页面中使用CSS

外链

将 CSS 编写在扩展名为.css 的单独文件中,并从 HTML<link> 元素引用它的情况:

image-20220725142330903

让浏览器知道有 CSS 文档存在(所以需要遵守 CSS 样式的规定)

嵌入

不常用,不符合常用开发规范

不使用外部 CSS 文件,而是将 CSS 放在 HTML 文件head标签里的style之中。

image-20220725142703892

内联

内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素:

image-20220725142715561

即在HTML中直接写CSS,有时会用到。

它难以维护(在需要更新时,你必须在修改同一个文档的多处地方),并且这种写法将文档结构和文档表现混合起来了,这使得代码变得难以阅读和理解。CLASS永远的神

3.CSS如何工作

image-20220725142635408

前面讲的DOM树,贴一段网上的解释

不同的浏览器在处理文件的时候会有不同的方式,但是下面的步骤基本都会出现。

  1. 浏览器载入 HTML 文件(比如从网络上获取)。

  2. 将 HTML 文件转化成一个 DOM(Document Object Model),DOM 是文件在计算机内存中的表现形式。

  3. 接下来,浏览器会拉取该 HTML 相关的大部分资源,比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理,简单起见,同时此节主讲 CSS,所以这里对如何加载 JavaScript 不会展开叙述。

  4. 浏览器拉取到 CSS 之后会进行解析,根据选择器的不同类型(比如 element、class、id 等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id 选择器等)应用在对应的 DOM 的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。

  5. 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。

  6. 网页展示在屏幕上(这一步被称为着色)。

    关于 DOM

    ​ 一个 DOM 有一个树形结构,标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点(Node/DOM 或 DOM node)。节点由节点本身和其他 DOM 节点的关系定义,有些节点有父节点,有些节点有兄弟节点(同级节点)。

    ​ 对于 DOM 的理解会很大程度上帮助你设计、调试和维护你的 CSS,因为 DOM 是你的 CSS 样式和文件内容的结合。当你使用浏览器 F12 调试的时候你需要操作 DOM 以查看使用了哪些规则。

4.选择器Selector

image-20220725142919591

通配选择器 通配符*

​ 不常用,毕竟没人让所有元素一模一样

标签选择器 给HTML中已有的标签去设置

​ 改变HTML中标签的样式

ID选择器

​ #id值(通常是唯一的)对应HTML中设置的ID

类选择器

你愿意所有元素都一个样,也不是不可以。

想用这种方式样式化这一片元素,又想用那种方式样式化那一片元素

还可以与标签选择器一起用,减少工作量

贴个MDN的例子

li.special {
  color: orange;
  font-weight: bold;
}

这个意思是说,“选中每个 special 类的 li 元素”。你真要这样,好了,它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了:

你真要这样,好了,它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}
属性选择器

选中HTML中含有disabled属性的标签改变样式

image-20220725144057727

特定值选择元素

image-20220725144212682

打开思路,还可以通过匹配去设置值(类似于正则表达)

标签/值 [属性 ^= “内容”] 前缀匹配

标签/值 [属性 $= “内容”] 后缀匹配

image-20220725144232396

5.伪类

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

​ ·状态伪类

​ ·结构性伪类

根据状态确定样式

一个直观的例子就是当我们修改链接的样式时

修改一个链接的样式时我们需要定位(针对)标签

取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的,亦或是正在被点击当中的状态,这个标签有着不同的状态。

MDN上的例子

下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

a:link {
  color: pink;
}

a:visited {
  color: green;
}

鼠标悬停的时候的样式

a:hover {
  text-decoration: none;
}

下图表示li的第一个孩子颜色,最后一个孩子无底部边框

image-20220725145417379

同时伪类还有很多,一般是具体要用或者实现的时候查或者搜~~ 面向CV吗hhh

下面是一些选择器

选择器示例
类型选择器h1 { }
通配选择器* { }
类选择器.box { }
ID 选择器#unique { }
标签属性选择器a[title] { }
伪类选择器p:first-child { }
伪元素选择器p::first-line { }
后代选择器article p
子代选择器article > p
组合
同时使用选择器和选择符。

来看一些例子:依旧是MDN上的

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

上面的代码为以下元素建立样式:在之内,紧接在

后面的

元素的内部,类名为 special。

在我们提供的原始 HTML 文档中,与之符合的元素只有<span class="special">.

老师给的表

image-20220725145707023

CLASS永远的神,这些我平时用的都比较少,不过了解能看懂,还是不错的,会的话确实能减少部分代码量的。

优先级也比较好想清楚,局部的优先级通常大于全局,个人是这样理解的,不知道对不对。

选择器组

image-20220725150155833

简单直接的说明:给你要设置的标签设置相同的样式,就是偷懒减少代码量

6.RGB

RGB与HSL

这部分比较简单,要用什么颜色的时候直接取值就行。#FFFFFF

不过6个十六进制数字不太直观,所以用HSL,相比RGB更加直观

image-20220725150813316

还可以直接指定值

alpha透明度

透明度1表示完全不透明,RGBA中的A,新版不做要求

image-20220725151019335

6.字体

1.font-family

​ 逗号分割开的值,指定多个字体,以匹配不同设备。

image-20220725151211497

通用字体族

​ 一种风格或者分类,这里不细说了,通常开发很少用到,或者只需设置一次(大概)

Web Fonts

​ 顾名思义用网络字体,这里直接给老师的例子,从指定URL去下载字体并渲染,对渲染和网络有要求,没用到过

image-20220725151530642

2.font-size

font-size 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位,定义该值可能改变其他元素的大小。

/* <absolute-size>,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>,相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>,长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>,百分比值 */
font-size: 80%;

font-size: inherit;

最好使用用户默认字体大小的相对大小,避免使用除了em或``ex的绝对大小单位。但是如果一定要使用绝对大小的话,px是众多单位中最好的选择,因为它的含义不会随着操作系统所认为的屏幕分辨率的大小(通常是不对的)改变而改变。

这部分要自己慢慢试了,不难,调样式的时候比较折磨

3.font-weight

font-weight属性指定了字体的粗细程度。一些字体只提供 normalbold 两种值。

normal

正常粗细。与400等值。

bold

加粗。与700等值。

lighter

比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。

bolder

比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

number

一个介于 1 和 1000 (包含) 之间的类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。

4.line-height

line-height属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。

line-height 属性被指定为以下任何一个:

  • 一个 <数字>
  • 一个 <长度>
  • 一个 <百分比>
  • 关键词 normal

具体取值可以通过万能的搜索引擎,这里就不贴出来了,感觉意义不大。

5.white-space

white-space 属性是用来设置如何处理元素中的空白。

换行符空格和制表符文字换行行尾空格
normal合并合并换行删除
nowrap合并合并不换行删除
pre保留保留不换行保留
pre-wrap保留保留换行挂起
pre-line保留合并换行删除
break-spaces保留保留换行换行

具体去MDN上试一试,比较直观。还可以F12学习别人的代码,调试工具真顶。

二.深入CSS

1.优先级/特异度

处理发生冲突的时候浏览器选择渲染哪个CSS

image-20220725153812128

实现代码复用比较好的方式,类似于面向对象语言的继承。

继承

image-20220725154420424

和文字相关的有继承关系,和模型相关的一般没有继承关系。

一些设置在父元素上的 css 属性是可以被子元素继承的,有些则不能。

哪些属性属于默认继承很大程度上是由常识决定的。

显式继承

通过 * 通配选择器

*{

​ 属性:inherit;

}

image-20220725154659084

初始值

这里就不写文字了,直接上图片,一般没有不改初始值的吧,不然写出来干啥

image-20220725155158311

CSS求值过程

比较复杂,直接上老师的图片

image-20220725155316833

规则有相同的优先级,顺序在最后的生效。

类选择器有更高的优先级,即使元素选择器顺序在它后面。

image-20220725171736928

image-20220725171830238

2.盒模型

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

image-20220725172816626

  • Content box: 这个区域是用来显示内容,大小可以通过设置 widthheight.
  • Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin相关属性设置。

margin 不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。这个要实际用过之后才比较好理解。

宽width

image-20220725173106754

高height

image-20220725173121932

内边距padding

内边距位于边框和内容区域之间。与外边距不同,您不能有负数量的内边距,所以值必须是 0 或正的值。应用于元素的任何背景都将显示在内边距后面,内边距通常用于将内容推离边框。

我们可以使用padding简写属性控制元素所有边,或者每边单独使用等价的普通属性:

image-20220725173751532

边框border

边框是在边距和填充框之间绘制的。边框设置样式时,有大量的属性可以使用——有四个边框,每个边框都有样式、宽度和颜色

分别设置每边的宽度、颜色和样式,可以使用:

设置所有边的颜色、样式或宽度,请使用以下属性:

设置单边的颜色、样式或宽度,可以使用最细粒度的普通属性之一:

各种组合套娃

image-20220725174020474

可以通过设置box宽高为0通过边框用CSS绘制不同的图形

外边距margin

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠(负值可以入侵其他盒子,挺好玩)。

或者每边单独使用等价的普通属性控制:

和内边距边框大同小异了,很好记

外边距折叠 margin collapse

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素,这些外边距将合并为一个外边距,即最大的单个外边距的大小。

就是相接的时候取大的。

image-20220725174558113

margin:auto

经典居中,听说面试笔试常考

image-20220725174653220

border-box

宽高以border为标准,更符合人的习惯与直觉。

image-20220725175014572

overflow

overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文]时候该做什么。它是 overflow-xoverflow-y的 简写属性 。

说人话就是,内容比可以显示的画面多的时候,决定内容的显示模式,是要隐藏还是显示或者加滚动条

为使 overflow 有效果,块级容器必须有一个指定的高度(height或者max-height)或者将white-space设置为nowrap

  • visible

    默认值。内容不会被修剪,可以呈现在元素框之外。

  • hidden

    如果需要,内容将被剪裁以适合填充框。不提供滚动条。

  • scroll

    如果需要,内容将被剪裁以适合填充框。浏览器显示滚动条,无论是否实际剪切了任何内容。 (这可以防止滚动条在内容更改时出现或消失。)打印机仍可能打印溢出的内容。

  • auto

    取决于用户代理。如果内容适合填充框内部,则它看起来与可见内容相同,但仍会建立新的块格式化上下文。如果内容溢出,桌面浏览器会提供滚动条。

3.盒模型布局规则

即盒子模型和内联盒子

image-20220725175522211

重点是

image-20220725175732709

image-20220725175812337

通过display:block和display:inline改变盒子属性,万恶的display!!!

display

display 属性可以设置元素的内部和外部显示类型,display比较复杂,想深入理解可以看MDN或者网上查。

image-20220725175920219

1.行级排版上下文

IFC IFC IFC( Inline Formatting Context)不要只记得KFC

image-20220725180134743

重点是第三点排版规则~~

比如通过overflow-warp:break-word让长的原子级(长单词等),自动换行

2.块级排版上下文

BFC BFC BFC(Block formatting Context)

image-20220725180624147

垂直摆放盒子

上面两个布局只能实现简单的布局,想要更高级的布局可以设置flex grid,接着看

3.flex布局

这个可以讲的就多了,常用布局,弹性布局,很好玩

image-20220725181057701

设置display:flex

当使用 flex 布局时,首先想到的是两根轴线 — 主轴和交叉轴。主轴由 [flex-direction] 定义,另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,所以有必要在一开始首先理解它。多用用才容易理解。毕竟是流式布局。

image-20220725181604888

主轴由 flex-direction 定义,可以取 4 个值:

  • row
  • row-reverse
  • column
  • column-reverse

跟英文单词也比较符合

justify-content:设置flex布局常用的属性,取值老师的图比较直观,我就不贴资料了。

属性定义了浏览器之间,如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。

image-20220725181839945

个人常用第三个和最后一个,不过都看个人喜好

**align-items:**也是常用属性,值也多。MDN上有比较完整的在线代码和开发规范,可以试一试

image-20220725182053709

image-20220725182414786image-20220725182438061

4.flexibility弹性布局

像弹簧一样去设置布局,类似于百分比。但具体还要看实际代码来分配空间。动态且灵活的分配空间。

image-20220725182538197

还有简写与完整写法,个人觉得无所谓,但还是要看懂,网上文档也完整~~

image-20220725182943561

5.grid布局

flex之后的常用属性,可以写的也很多,相比flex有二维属性。网格

image-20220725183234836

对比flex,更加灵活,但也更难

grid 是一个 CSS 简写属性,可以用来设置以下属性:

显式网格属性 grid-template-rowsgrid-template-columnsgrid-template-areas
隐式网格属性 grid-auto-rowsgrid-auto-columns grid-auto-flow
间距属性 grid-column-gap grid-row-gap

老师的例子,比较容易看懂

image-20220725183851059

image-20220725184117189

用法超级多,布局复杂,功能强大。F12调试工具可以看到网格线,这样调试的时候也比较容易与简单,大概

6.float 单精度

img里设置float:left或者其他值,实现文字环绕图片布局,其他不做要求,有了flex与grid就没有必要使用了。

float允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性。

7.position

绝对定位

position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。

  • **定位元素(positioned element)**是其计算后位置属性为 relative, absolute, fixed sticky 的一个元素(换句话说,除static以外的任何东西)。

  • **相对定位元素(relatively positioned element)**是计算后位置属性为 relative 的元素。

  • **绝对定位元素(absolutely positioned element)**是计算后位置属性为 absolutefixed 的元素。

  • **粘性定位元素(stickily positioned element)**是计算后位置属性为 sticky 的元素。

  • static

    该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, leftz-index 属性无效。

    默认值,相当于没设置

  • relative

    元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。

    说人话就是相对自己原来的位置渲染的时候进行偏移,但实际位置不变。

  • absolute

    元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

    说人话就是脱离常规流,自己单干,自己要慢慢定位。

  • fixed

    元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspectivefilter 属性非 none 时,容器由视口改为该祖先。

    说人话就是脱离常规流,自己单干,但是相对于窗口固定。

  • sticky

    吸附,不常用,贴下MDN的部分介绍

    粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

    说人话就是一直存在,类似于悬浮窗,怎么划都在

image-20220725185846115image-20220725185902741

三、总结

image-20220725185935928

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kun.A.A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值