Web技术基础——CSS篇

露月二十日

已于 2022-06-15 11:32:43 修改

阅读量909

点赞数

文章标签： css 前端 css3

于 2022-06-04 11:11:07 首次发布

本文链接：https://blog.csdn.net/m0_53302175/article/details/125023427

版权

文章目录

引言
一、写在前面
二、进入CSS学习

引言

什么是CSS？

举个例子：HTML就好比是我们的骨骼、细胞、大脑、心脏等，而CSS就是我们的肌肤，外貌，它能赋予这些“不忍直视”的机体一个全新的外观，若学到精通，甚至可以比喻为衣服，及时内容不变，形式花样也可以不断更新。

回到Web上，CSS全称为Cascading Style Sheets，即级联样式表，CSS 将决定这些由HTML撰写页面的内容该如何在屏幕上呈现。涉及到的方面有很多，如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

一、写在前面

“工欲善其事必先利其器”，CSS可谓是网页的衣服、饰品，要想逻辑清楚、条理清晰的构建CSS，需要在VS Code上安装Live Sass Compiler。之后我们可以直接在工作区创建一个后缀为.scss的文件，点击底部的Watch Sass，插件会生成并随时更新你的.css文件。

二、进入CSS学习

1.背景知识

（1）选择器

CSS选择器规定了CSS规则会被应用到哪些元素上。

选择器可以分为5大类：

通用选择器（Universal selector）
元素选择器（Type selector）
类选择器（Class selector）
ID 选择器（ID selector）
属性选择器（Attribute selector）

通用选择器：

概念：

在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning和.warning的效果完全相同.

注: 不推荐使用通配选择器,因为它是性能最低的一个CSS选择器

元素选择器：

概念：

CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

语法：

元素 {样式声明 }

类选择器：

概念：

在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效.

语法：

.类名 {样式声明 }

ID选择器：

概念：

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效.

语法：

#id属性值 {样式声明 }

属性选择器：

概念：

CSS 属性选择器通过已经存在的属性名或属性值匹配元素.

重点：组合选择器

在某些特点的情景中需要借助节点之间的关系来进行节点选择
重点介绍父子节点、祖孙节点和兄弟节点组合器

父子节点组合选择器：
语法：

CSS:
A > B{
     Color: Red;
}

HTML:
<div class="A">
  <div class="B">Red</div>   
</div>

祖孙节点组合选择器：
语法：

CSS:
A B {
     Color: Red;
}

HTML:
<div class="A">
  <div class="B">Red</div> 
  <div><p class="B">Red</p></div>   
</div>

兄弟节点组合选择器：
语法：

CSS:
A + B {
     Color: Red;
}

HTML:
<div class="A"></div>
<div class="B">Red</div> 
<hr/>
<div class="B">Not Red</div>

或者

CSS:
A ~ B {
     Color: Red;
}

HTML:
<div class="A"></div>
<div class="B">Red</div> 
<hr/>
<div class="B">Red</div>

外部样式表：

将选择器写在一个.CSS这样的地方，并通过在.HTML的head处添加< link rel="stylesheet" type="text/css" href="mycss.css" >语法的语句来调用CSS，使其生效

在这里插入图片描述

内部样式表：

使用< style >元素，将CSS样式直接写在.HTML的head处

在这里插入图片描述

内联样式：

直接把样式规则直接写到要应用的元素中，语法形如< h3 style="color:green;">

在这里插入图片描述

2.盒子模型

下图就是经典的盒子模型
在这里插入图片描述

盒子由四个区域组成：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

通常情况下，设置盒子的高度和宽度默认为内容的高度和宽度，即box-sizing:content-box; 当然我们可以更改设置，一般情况下将设置盒子的高度和宽度修改为边界宽度，即box-sizing:border-box;同时会将盒子的margin默认设置为0

例如：
CSS代码中定义了三个类选择器：box、border、box-boder

HTML代码中，设置了两个块级元素< div >，分别应用不同类选择器

最后两者的效果不同

3.文档流

各类盒子如何在文档中进行排列

如图所示，盒子的排列主要分为横向和纵向排列。横向排列的可以理解为行内块元素，纵向排列的可以理解为普通块元素
在这里插入图片描述

行内块元素	普通块元素
br、block、em、button、select、textarea…	div、p…

每个HTML元素都有其默认的块类型设置，但是我们可以通过display属性来重新对它进行设置
在display属性中常用的有：block、flex、grid，重点掌握的是flex模型，详细参考：CSS Flexible Box Layout

在HTML中用img元素放入两张一模一样的图片
在这里插入图片描述
由于img元素是行内块元素，因此两张图片会横向排列

现在，我们将img的display属性修改为block（这里采用内联样式）
在这里插入图片描述
回到页面看看效果，图片变成了纵向排列

4.定位

定位：关注的是元素本身
布局：关注的是元素所在容器区域的设置

元素本身的定位可以划分为两种：坐标定位(position) & 浮动定位(float)

（1）坐标定位

坐标定位(position)：

实现坐标定位只需提供坐标位置和对应坐标系
坐标定位的坐标系为以下四种：

静态坐标(static)
相对坐标(relative)
绝对坐标(absolute)
固定坐标(fixed)

静态坐标：静态坐标对应的是文档流坐标，严格按照文档流进行排列，设置元素偏移位置也将无效，所有元素默认为静态坐标

在CSS中设置三个类，分别控制盒子大小背景颜色、盒子的坐标系、盒子的偏移量
现在在HTML中创建两个盒子，并对第一个盒子应用以上三种样式
回到页面，发现盒子一号没有移动，证实了静态坐标的性质

相对坐标：元素相对于其所在文档流位置的相对坐标，设置偏移位置后，元素位置发生相应的偏移，但其在文档流中的位置仍然保留(即不会影响其他元素的位置)

在CSS中新增一个类，用于改变元素定位
现在在HTML中新增一个盒子，并对第二个盒子应用relative和offset
回到页面，发现盒子二号进行了偏移，而其他盒子没有改变，证实了相对坐标的性质

绝对坐标：相对于其父级元素的位置发生偏移，但是元素脱离文档流，独立出来，因此会对文档流中其他元素造成影响

在CSS中新增一个类，用于改变元素定位
在HTML中对第一个盒子应用absolute和offset
回到页面，对比应用absolute前后，发现不只是1号盒子，2号盒子也发生了变化，证实了absolute的性质

固定坐标：固定定位也称为窗口定位，即按照窗口来进行定位，脱离了文档流

在CSS中新增一个类，用于改变元素定位
现在在HTML中对第一个盒子应用fixed和offset
回到页面，发现盒子一号进行了偏移，而盒子二号取代了盒子一号原来的位置，证实了相对坐标的性质

（2）浮动定位

浮动定位(float)

浮动定位主要采用容器和元素联动的方式进行定位，其应用的场景主要为图文混排

在HTML中，用img元素放入一张图片，并用内联样式将其float设置为left，然后在p元素中用lorem100*10(+TAB)生成十句每句含100个单词的话
回到网页，发现图片居于左边，文字包裹图片，证实了float的性质

5.布局

常用的网页布局主要有两种： Flex布局 & Grid布局

（1）Flex布局

Flex布局：弹性布局，采用容器和元素联动的方式布局(display:flex;)

在Flex容器中，我们可以控制容器内元素排列方向(flex-direction)、溢出处理方式(flex-wrap)以及对齐方式(align-items include. justify-content)

排列方向(flex-direction)：主要控制元素进行排列的方向
flex-direction可以设置为横向(row or row-reverse)或是纵向(column or column-reverse)

溢出处理方式(flex-wrap)：控制容器内元素的溢出处理方式
flex-wrap可以设置为no-wrap(元素可能发生溢出)、wrap、wrap-reverse

补充：overflow属性

当我们选择no-wrap时，元素可能发生溢出，但是我们通过设置overflow，可以将溢出部分变为滚动条。

属性值	含义
visible	默认值，溢出部分不被裁剪，在区域外面显示
hidden	裁剪溢出部分且不可见
scroll	裁剪溢出部分，但提供上下和左右滚动条供显示
auto	裁剪溢出部分，视情况提供滚动条

对齐方式(align-items & justify-content)：控制容器的对齐方式
按照方向可以划分为横向对齐(justify-content)和纵向对齐(align-items)，其中横向对齐(justify-content)包括flex-start、center、flex-end、space-between、space-around；纵向对齐(align-items)包括flex-start、center、flex-end、stretch、baseline

Flex容器内的元素设置分别有基础长度(flex-basis)、扩展(flex-grow)、收缩(flex-shrink)
基础长度(flex-basis)属性：用来设置元素的基础长度
扩展(flex-grow)属性：当此属性设置为1时，元素将自动伸展占满容器剩余空间
收缩(flex-shrink)属性：当此属性设置为1时，可用于容器内空间不足时，元素可进行等比例缩小，默认情况下，flex容器内的元素的flex-shrink值都是1

注：除了单独设置属性之外，CSS提供了几种默认值：

auto：1 1 auto
none： 0 0 auto
initial： 0 1 auto
inherit：继承父值
在CSS将上述所提到的属性都写入类选择器
在HTML中设定一个div元素应用containter样式，再在此容器中放入三个盒子(div)
回到网页，查看效果
现在对容器应用flex样式，观察网页效果，可以得出flex默认情况下为横向排列，且不溢出

（2）Grid布局

Grid布局：网格布局，将容器设置为了一个二维坐标系统，通过将具体单元格设置为区域的方式进行布局
在Grid布局中控制定位的方式是容器 & 区域

Grid容器：
定义Grid布局即是将一个普通的容器进行二维划分，定义其行与列，并可以定义由行列划分出的单元格之间的间距。

具体语法(举例)：

//CSS:
.gird{
  display: grid;
  grid-template: repeat(4,1fr)/repeat(6,1fr);
  grid-gap: 10px;
}

<!-->HTML:<-->
<body>
  <div class="gird">
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
    <div class="containter"></div>
  </div>
</body>

网页效果如下，盒子按照网格模型排列，一行排6个

Grid区域：

定义区域有三种方式：

坐标区域
命名区域
浮动区域

坐标区域：坐标区域是通过区域的开始行、结束行、开始列、结束列的方式进行定义的

实例：设置一个Grid容器，容器内分别设置三个背景颜色不同的区域，在CSS中先将area内空出来

HTML:
<body>
  <div class="gird box">
    <div id="area1" class="green"></div>
    <div id="area2" class="red"></div>
    <div id="area3" class="blue"></div>
  </div>
</body>

CSS:
.box {
  height: 480px;
  width: 480px;
  background-color: rgb(147, 153, 154);
}
.gird{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  grid-template-rows: repeat(4,1fr);
  grid-gap: 10px;
}
.area1{

}
.area2{
  
}
.area3{
  
}
.blue{
  background-color: blue;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}

回到网页，三个盒子布局如下
现在我们补充area类中的代码，使得三个盒子的布局发生变化

CSS：
#area1{
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

#area2{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
}

#area3{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 5;
}

回到网页，发现三个盒子的位置发生了变化

命名区域：在网格容器定义之初进行区域名称的设置

举例：通过命名区域的方法达到上面三个盒子的效果

代码：

CSS：
.gird{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  grid-template-rows: repeat(4,1fr);
  grid-template-areas: "part1 part1 part1 part1"
                       "part2 part3 part3 part3"
                       "part2 part3 part3 part3"
                       "part2 part3 part3 part3";
  grid-gap: 10px;
}

#area1 {
  grid-area: part1;
}

#area2 {
  grid-area: part2;
}

#area3 {
  grid-area: part3;
}

回到页面，查看效果，发现通过命名区域的方式也可以实现预期效果

浮动区域：进行Grid布局时，如果不对Grid容器内的参数进行设置，默认情况下容器内的元素占据一个单元格并按照横向方式排列
在布局时，如果要修改浮动排列的方向，我们可以通过grid-auto-flow属性进行设置，浮动区域就是利用该属性进行定位的。浮动区域仅仅使用开始行、结束行 or 开始列、结束列的定义其高度与宽度，元素的具体位置则交给容器的浮动属性来定位。
注：增加dense属性后，浮动区域会更加合理利用空间

6.伪类 & 伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常

语法：selector:pseudo-class {property:value;}

下面是anchor伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：
在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。

常用的伪元素：
:before { }
:after { }
在什么元素前或者后插入或者进行什么变换

7.响应式web设计

针对不同的界面、窗口大小web界面需要自动进行相应的响应和调整，因此需要对web进行响应式设计
响应式web设计主要为四种：

视窗响应
样式响应
像素响应
图片响应

视窗响应：
代码： <meta name="viewport" content="width=device-width, initial-scale=1.0">
在HTML中，添加上述代码可以保证网页在不同使视口中均可以按照原始大小占据屏幕，不会发生像素缩放

样式响应：
对于不同大小的屏幕提供不同的样式，其实现方式为通过media查询设置屏幕切换点，进行样式切换

像素响应：
通过一个基准像数值，对各类元素大小进行统一大小控制，如rem单位，通过rem单位实现样式表中的相对大小变化

图片响应：
主要通过设置不同视窗宽度下显示不同图片源的方式实现

露月二十日

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Web技术基础——CSS篇

文章目录引言一、写在前面引言博主通过自己制作的一个网页来总结分析整个CSS的框架、结构以及其基本元素和能够实现的基本功能。一、写在前面“工欲善其事必先利其器”，CSS可谓是网页的衣服、饰品，要想逻辑清楚、条理清晰的构建CSS，需要在VS Code上安装Live Sass Compiler。之后我们可以直接在工作区创建一个后缀为.scss的文件，点击底部的Watch Sass，插件会生成并随时更新你的.css文件...............
复制链接

扫一扫