门户网站 建设 如何写,wordpress首页怎么进入,做网站赚钱 百度网盟,qq推广工具10分钟带你探索css中更为奇妙的奥秘#x1f4d6;序言#x1f4c3;一、css是啥1. CSS是什么2. 诞生背景3. 基础规则#xff08;1#xff09;一些基础规则#xff08;2#xff09;其他重要的语法#xff08;3#xff09;选择器#xff08;4#xff09;层叠与继承1… 10分钟带你探索css中更为奇妙的奥秘序言一、css是啥1. CSS是什么2. 诞生背景3. 基础规则1一些基础规则2其他重要的语法3选择器4层叠与继承1层叠2继承二、css怎么学1. 在线网站1codecademy.com2udacity.com3w3school.com runoob.com4freecodecamp.org5挑一个2. 持续学习1MDN文档2CSS-TRICKS3w3c CSS标准三、CSS常用规则1. 布局相关1盒模型1css的盒模型2盒模型内容详述3盒模型的分类Ⅰ. 第一种行为Ⅱ. 第二种行为Ⅲ. 第三种行为2正常文档流1举例说明2块级元素和内联元素3弹性布局1弹性布局是什么2一些概念4定位1static2相对定位relative3相对定位absolute4z-index5应用2. 装饰相关1文字2背景3边框4阴影5交互相关6动画四、css精益求精1. css调试1审查css2理解盒模型2. css扩展1css预处理器2less3. css革新五、结束语彩蛋 One More Thing往期推荐番外篇序言
对于前端来说 css 是入门时和 HTML 一起学习的一门语言它规定了很多样式和规范。但对于很多小伙伴来说有时候可能只是简单的使用但却不知道原来 css 还能画动画又或者原来 css 还有层叠上下文等等概念。
那么在下面的这篇文章中将带领大家来探索 css 中更为奇妙的奥秘~
一起来学习吧~
一、css是啥
1. CSS是什么
CSS 层叠样式表 cascading syle sheets 是一种用来为结构化文档基本就是 html 添加样式的语言。
举个例子
假设我们现在要选择一个 HTML 页面里所有的段落元素并将其中的文本改成红色那么我们可以这样写 CSS 。代码如下
p {color: red;
}2. 诞生背景
在没有 css 以前所有样式都混在 html 里。假如一个标题要用斜体字、红色的字符、白色的底色的话那么我们要这样写
h2font colorred bgcolorwhitei使用css/i/font
/h2这样看起来似乎也太冗余了。因此呢现在有了 css 样式来使得样式和文章结构顺利地达到分离的效果。 我们来看下上面这段代码用 html 和 css 如何进行样式和结构分离。代码如下
h2使用css
/h2
styleh2{color: red;background: white;font-style: italic;}
/style大家可以看到有了 css 这样的文章结构是不是就清晰了很多呢。
3. 基础规则
1一些基础规则
现在让我们用一段代码来仔细地分析下 css 的一些规则。大家先看下图 在上图中整个结构称为规则集通常简称为“规则”其各部分释义如下
选择器 选择了一个或多个需要添加样式的元素在这个例子中就是 p 元素声明 一个单独的规则如 color: red; 用来指定添加样式元素的属性属性 指定要改变 HTML 元素样式属性的值 从指定属性的众多外观中选择一个值除了 red 之外还有很多 color 的值。
2其他重要的语法
了解了以上规则集之后同时我们还需要注意其他重要的语法。具体如下
每个规则集除了选择器的部分都应该包含在成对的大括号里 {} 。在每个声明里要用冒号 : 将属性与属性值分隔开。在每个规则集里要用分号 ; 将各个声明分隔开。如果要同时修改多个属性只需要将它们用分号 ; 隔开。也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。
3选择器
现在我们来对 css 的选择器做一个详细的介绍。
选择器有许多不同的类型它主要是用来选择 HTML 文档中给定的元素。下面给出一些常用的选择器类型
选择器名称选择的内容示例元素选择器也称作标签或类选择器所有指定(该)类型的 HTML 元素p选择 pID选择器具有特定 ID 的元素单一 HTML 页面中每个 ID 只对应一个元素一个元素只对应一个 ID#my-id选择 p idmy-id 或者 a idmy-id类选择器具有特定类的元素单一页面中一个类可以有多个实例.my-class选择p classmy-class或者a classmy-class属性选择器拥有特定属性的元素img[src]选择 img srcmyimage.png 而不是 img伪(Pseudo)类选择器特定状态下的特定元素比如鼠标指针悬停a:hover仅在鼠标指针悬停在链接上时选择a
4层叠与继承
了解完选择器之后我们还需要了解 css 中一个很重要的概念层叠与继承。接下来就让我们一起来学习这个概念。
1层叠
浏览器由选择器优先级来决定规则一般来说一个选择器越具体那么它的优先级就越高。比如
一个元素选择器不是很具体 —— 会选择页面上该类型的所有元素。一个类选择器稍微具体点 —— 它会选择该页面中有特定 class 属性值的元素所以它的优先级就要高一点。
我们来举个例子看看效果具体如下
.main-heading {color: red;
}h1 {color: blue;
}h1 classmain-heading This is my heading./h1我们来看下显示效果 大家可以看到这个 h1 最终显示的是红色字体而不是蓝色字体。那有小伙伴就会有疑惑说不是哪个在后面才会选择哪个吗
答案其实只对了一半。在上面的这段代码中 class 选择器的优先级要比 h1 属性选择器的优先级要高所以最终显示的是红色。
2继承
在 css 中一些设置在父元素上的 css 属性是可以被子元素继承的有些则不能。
举个例子
如果你设置一个元素的 color 和 font-family 那么每个在里面的元素也都会有相同的属性值除非你直接在元素上设置属性。
来看一段代码
p {color: blue;
}ptext in pspantext in span/span./p在上面的这段代码中它将全部显示为蓝色。这是为什么呢
理论上 span 会显示为黑色但是它没有。原因在于 color 是继承属性因此 span 中的文字也将继承到 p 的样式所以最终显示的也为蓝色。
二、css怎么学
在进一步讲解 css 有哪些规则之前先给大家分享几个学习资源。 css 的内容非常多也比较适合自学因此这里分享几个可以在课后不断耕耘的 css 知识网站。
1. 在线网站
1codecademy.com
codecademy.com 是一个老牌的在线编程教育网站全程交互式自助式学习体验非常适合 css 边学边练的的场景。 2udacity.com
udacity.com 也是一个老牌的在线编程教育网站。虽然是外文网站但进入课程内中文是拉满的。有以下两点推荐理由①免费②视频式教学课后实验互动的形式给喜欢看着老师讲解的小伙伴们推荐。 3w3school.com runoob.com
一个中文一个英文。免费交互式内容比较全面不错的实操演练场。 4freecodecamp.org
Github 上 star 最多的项目。由社区贡献而成的全面的程序员自学课程。 5挑一个
有小伙伴说看了这么多不知道要挑哪一个来学呢
推荐顺序的话就是从前到后推荐。就是 专业在线课程团队出品 自助式学习 ≈ 社区型自助式 。
如果你是零基础上面任一一个课程一个周末左右应该能学的差不多。有了基础后以后你再想深挖哪个场景下的 css 应用规则再去看文档即可。什么场景字体、定位、颜色等这些内容对应的需要去查哪些属性相信你心中也应该有了自己的一个答案~
2. 持续学习
如果一直在干前端这一行的话那么以下这些网站可能会陪你到 35岁甚至也有可能是一辈子。言重了hh
下面我们一起来看一下是哪几个网站吧~
1MDN文档
网站地址为 [https://developer.mozilla.org/zh- CN/docs/Web/CSS](https://developer.mozilla.org/zh- CN/docs/Web/CSS) 。它是 css 的文档库基本上会是前端程序员最常来的地方同时 html 和 js 的规则也在这里面。除此之外呢里面还有丰富的各式各样的教程把它当做是一个自由探索的网站也是相当不错滴。 2CSS-TRICKS
网站地址为 https://css-tricks.com/almanac/ 。这是另外一个 css 文档库它拥有非常活跃的 css 社区里面有各种奇技淫巧把它作为 mdn 的补充也是相当合适的。 3w3c CSS标准
网站地址为 w3.org/Style/CSS。前面的网站和文档基本上都只在告诉你一些css的用法。比如 color:red; 就是文本变为红色。但其实它远不止于用来实现文本的颜色那你想知道它还能干嘛么
w3c文档或许就能告诉你答案。 三、CSS常用规则
1. 布局相关
1盒模型
1css的盒模型
在介绍布局相关的属性之前我们要先了解一个概念在 CSS 中所有的元素都被一个个的 “盒子box” 包围着。因此理解这些盒子的基本原理是我们使用 CSS 实现准确布局、处理元素排列的关键。
我们先来看一张图 2盒模型内容详述
现在我们来对盒模型中的内容进行一个详细的了解。具体如下
在 css 中组成一个块级盒子需要以下内容
Content box这个区域主要是用来显示内容它的大小可以通过 width 和 height 来进行设置。Padding box这个区域包围在内容区域外部的空白区域它的大小可以通过 padding 的相关属性来进行设置。Border box这个区域是边框盒边框盒包裹内容和内边距它的大小通过 border 的相关属性来进行设置。Margin box这是最外面的区域是盒子和其他元素之间的空白区域它的大小通过 margin 的相关属性来进行设置。
3盒模型的分类
盒模型中的“盒子” 又包括块级盒子(block box)和内联盒子(inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为。
我们现在就这两个盒子的一些行为来进行阐述。具体如下
Ⅰ. 第一种行为
如果一个盒子对外显示为 inline 那么它的行为如下
盒子不会产生换行。width 和 height 属性将不起作用。垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。用做链接的 a 元素、 span 都是默认处于 inline 状态的。
Ⅱ. 第二种行为
下面我们用一个例子来展示下 contet-box 。具体如下
附上代码
.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black;
}附上显示效果 我们来计算一下在上面的这个例子中 box 元素真正占用的面积是多少
模型宽度 350px(content) 25px(padding) 25px(padding) 5px(border) 5px(border) 410px。
模型高度 150px(content) 25px(padding) 25px(padding) 5px(border) 5px(border) 210px。
大家可以看到对于 content-box 的盒子来说它整个盒子包含的内容是 content padding border 。 那如果我们想要修改浏览器这一默认行为也就是想要不管 padding 和 border 怎么撑开整个盒子加起来的宽高就只能是我们定义的宽高又该怎么处理呢
附上代码
.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black;
}
.box {box-sizing: border-box;
}附上显示效果 大家可以看到使用了 box-sizing: border-box 之后它的所有宽度加起来是 350px 高度加起来是 150px 。通过这个属性达到了我们想要的效果。 但是细心的效果可能已经发现了一个问题如果我们每次都要去控制它具体的类选择器来实现宽高那这样写起来得多累人呀对吧。
因此呢如果你希望所有元素都使用替代模式那么你可以直接设置 box-sizing 在 html 元素上然后设置所有元素来继承该属性如下代码所示
html {box-sizing: border-box;
}*, *::before, *::after {box-sizing: inherit;
}Ⅲ. 第三种行为
display 有一个特殊的值它在内联和块之间提供了一个中间状态。这在一种情况下非常有用比如说你不希望一个项切换到新的一行但是呢又希望它可以设定宽度和高度。那么我们可以设置 display: inline-block; 来达到我们最后的效果。下面我们来看一个例子
附上代码
span {margin: 20px;padding: 20px;width: 80px;height: 50px;border: 2px solid blue;display: inline-block;
}附上效果图 到这里关于盒模型的内容讲解就告一段落啦还有更多的使用技巧和延伸属性可以进一步前往 mdn 文档学习。
2正常文档流
1举例说明
盒模型解释了一个元素块的尺寸那么元素块在整篇文档中的位置是如何确定的呢
我们先来看一段代码
stylep {background: rgba(255, 84, 104, 0.3);border: 2px solid rgb(255, 84, 104);padding: 10px;margin: 10px;}span {background: white;border: 1px solid black;}
/stylep这是 p 标签内容
/p
p这是 p 标签内容span这是 span 标签内容/span
/p现在我们来看下效果 在上面的代码中 p 标签是块级元素而 span 标签是内联元素。下面我们就这两个元素来进行解析。
2块级元素和内联元素
块级元素
默认情况下块级元素按照基于其父元素的书写顺序默认值 horrizontal-tb 的块流动方向 block flow direction 放置每个块级元素会在上一个元素的下方另起一行它们会被设置好的 margin 分隔开且块级元素是垂直组织的。
内联元素
而对于内联元素来说其表现与块级元素有所不同它们不会另起一行只要其父级块级元素的宽度内有足够的空间那么块级元素里面的内容将与其他内联元素被安排在同一行。但是呢如果空间不够那么溢出的文本或元素将被移到新的一行。
3弹性布局
1弹性布局是什么
弹性盒子是一种用于按行或按列来布局元素的一维布局方法。元素可以膨胀以填充额外的空间收缩以适应更小的空间。如下图所示 2一些概念
第一个概念
只需要在容器上加 display:flex 属性你就可以得到一个横排的布局。就盒模型而言此时容器类似于块级元素( display:block ) 但宽度默认由子元素决定子元素类似 inline-block 元素可以设置宽高且不换行。且子元素原本的 display 实行基本被无视了这是一种隐含的盒模型状态。
来看一段演示
.container {display: flex;
}具体显示效果如下 第二个概念
这种布局非常灵活可以完成 90% 的布局要求。同时可以使用 flex-direction 属性来控制子元素 的排布顺序。
来看一个例子
.container {disply: flex;
}.container {flex-direction: row | row-reverse | column | column-reverse;
}具体显示效果如下 第三个概念
flex 布局类似块级盒子可以设置比子元素所需要更大的宽度。而 justify-content 属性会帮你确定此时元素如何分配空间。
来看一个例子
.container {disply: flex;
}.container {justify-content: flex-start | flex-end | center | space-between;
}具体显示效果如下 第四个概念
同样地当父容器高度溢出时 align-items 帮你确定子元素如何垂直对齐。
来看一个例子
.container {disply: flex;
}.container {align-items: stretch | flex-start | flex-end | center | baseline;
}具体显示效果如下 以上内容是最常用的弹性盒子用法。在 50% 的情况下浏览器会帮你分配好各个元素所占的空间但另外 50% 呢就需要你自己来做额外调整啦这个时候你需要了解关于弹性盒子的更多属性。
戳此链接CSS-TRICKS —— 弹性盒子介绍
4定位
1static
不管是正常的文档流还是弹性盒子内里元素排布都是相互影响的。前面的元素占了一块地后面的元素肯定就得稍微往后移一点。这其实涉及到的是一种定位情况即静态定位它的 css 设置为 display: static; 。
来看一个例子
p这是 p 标签内容
/p
p这是 p 标签内容span这是 span 标签内容/span
/p附上显示效果 2相对定位relative
position 还能有其他值比如相对定位 css 设置未 position: relative 。
相对定位在文档流中仍然占据位置但可以用 top leftbottomright 这四大属性做一些偏移的操作。
来看一个例子
p这是 p 标签内容
/p
p这是 p 标签内容span styleposition: relative; top: 16px; left: 8px;这是 span 标签内容/span
/p附上显示效果 3相对定位absolute
position: absolute 这种叫做绝对定位。绝对定位的元素完全脱离了文档流和个弹性盒子且绝对定位的盒子的定位和大小可以由你自己来完全指定。
来看一个例子
p这是 p 标签内容
/p
p这是 p 标签内容span styleposition: absolute; top: 16px; left: 8px;这是 span 标签内容/span
/p附上显示效果 此时 top 和 left 已经不是相对于原位置了而是相对于一个非 static 定位的父元素容器。
同时这里再普及一个知识点 position: fixed 其 top 和 left 等属性是相对于浏览器窗口。
4z-index
由于非 static 值的 position 属性让元素之间可以相互覆盖因此呢 css 提供了 z-index 属性来控制哪个元素覆盖在最上层。
来看一个例子
p这是 p 标签内容
/p
p这是 p 标签内容span styleposition: absolute; top: 16px; left: 8px; z-index: -1;这是 span 标签内容/span
/p附上显示效果 5应用
非 static 值的定位让元素非常独立可控广泛应用在弹窗、下拉选项、固定导航栏等场景。来看一下常见场景 2. 装饰相关
1文字
css 可以使得文字花里胡哨比如说变换颜色下划线加粗等等样式。
下面来看一段代码
div styleborder: 1px solid black; width: 250px;div styleBasic document flow/divdiv stylefont-family: serif;Basic document flow/divdiv stylecolor: purple;Basic document flow/divdiv stylefont-weight: bold;Basic document flow/divdiv stylefont-style: italic;Basic document flow/divdiv styletext-align: center;Basic document flow/divdiv stylefont-size: 24px;Basic document flow/div
/div具体显示效果如下 2背景
css 可以个背景设置颜色渐变色图片背景等等。
下面来看一段代码
style.bg {width: 100px;height: 100px;}.bg1 {background-color: rebeccapurple;}.bg2 {background-image: url(https://mdn.mozillademos.com/);}.bg22 {background-repeat: no-repeat;background-color: blueviolet;}.bg3 {background-image: linear-gradient(to right,hsl(100, 50%, 50%),hsl(180, 50%, 50%));}
/stylediv classbg bg1/div
div classbg bg2/div
div classbg bg2 bg22/div
div classbg bg3/div
具体显示效果如下 3边框
有时候我们想要给我们的盒子加一些边框来进行点缀那么我们可以用 css 中的 border 来进行处理。
下面来看一段代码
border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgba(170, 50, 220, 6);具体显示效果如下 4阴影
我们有时候在网页中经常看到好多很好看的阴影而这些也是 css 用 box-shadow 和 text-shadow 来展示的。
我们来看一些奇妙的阴影
box-shadow: 10px 5px 5px red;
box-shadow: 60px -16px teal;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red, -1em 0 .4em olive;具体显示效果如下 或者说我们也可以给文字来点阴影
div styletext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6)你好/div
div styletext-shadow: 4px 4px rgba(0, 0, 0, 0.6)你好/div来看下具体效果 5交互相关
大家都知道平时我们在浏览网页时有时候在点击内容时会有一只小手显示而这些就是 css 的交互。通常情况下我们用 cursor:pointer; 来进行设置。来看一些常见的交互样式 对于交互相关的更多内容大家可以到mdn中交互相关的文档进一步体验。
6动画
在 css 中还可以用 transition 、 animation 和 transform 等写出很多炫酷的效果。
来看一段代码演示
.tran {width: 100px;height: 100px;background: mediumpurple;transition: width 300ms ease-in;animation: spin 5s ease-in-out infinite;
}keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}具体显示效果如下 四、css精益求精
1. css调试
1审查css
在 css 的面板里可以直接开关、编辑、新增属性的值。如下图所示 2理解盒模型
同时我们来可以通过 layout view 来展示一张选定元素的盒模型示意图。如下图所示 2. css扩展
1css预处理器
另一种组织 CSS 的方法是利用一些对于前端开发者可用的工具它们让你可以稍微更程式化地 编写 CSS 。预处理工具以你的原文件为基础来进行运行并将它们转化为样式表。代表工具有
lesssassstylus
2less
这里我们以 less 为例看看能够为 css 扩充哪些功能。
1变量编译后会填充到对应的位置。比如 2mixin类似于函数。比如 3. css革新
随着 CSS 的不断发展到现在我们编写样式已经不一定需要写 css 文件了。下面罗列出几种常见的类型
1 以 styled-components 为代表的 css-in-js 方案通过用 JavaScript 的力量来武装 css 。 2 以 tailwindcss 为代表的 utility-class 方案改样式只需要修改 html 文件即可用有限的选择帮助你定好设计规范。 五、结束语
在上面的文章中我们从 css 的诞生背景和基础定义入手先初步认识了 css 。紧接着介绍了如何能够正确地学习 css 以及 css 关键的盒模型、文档流、布局、定位等关键概念和相关的 css 属性并展示了 css 装饰文档的可能性。
最后我们简略地了解了 css 是如何调试的以及当今都有什么样的工具可以帮助到我们更好的写 css 又如何用更好的理念去用 css 。
到这里关于 css 的奥秘探索就结束啦希望文章对大家有帮助~
彩蛋 One More Thing
往期推荐
值得关注的HTML基础知识
你可能对position和z-index有一些误解
谁动了我的选择器深入理解CSS选择器优先级
番外篇 关注公众号星期一研究室第一时间关注优质文章更多精选专栏待你解锁~如果这篇文章对你有用记得留个脚印jio再走哦~以上就是本文的全部内容我们下期见
