CSS进阶+设计

最新推荐文章于 2024-07-26 00:04:00 发布

wyhshd

最新推荐文章于 2024-07-26 00:04:00 发布

阅读量1k

点赞数 25

文章标签： css 前端

本文链接：https://blog.csdn.net/wyhshd/article/details/137163581

版权

1.CSS伪类与伪元素

伪类和伪元素都属于CSS选择器的附加关键字，单冒号:表示伪类，双冒号::表示伪元素。

伪类用于定义元素的特殊状态。主要有操作状态，选择器状态以及表单状态几种，我在下面主要是说操作状态和选择器状态。

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

我要说的主要就是input和a,至于p等我就不详细介绍，我先把较为全面的伪类图给展示出来。

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

现在我们主要先说<a>标签。

标签<a>的伪类，我主要介绍四个状态：

分别是link状态，表示页面出现显示的状态，visited状态是指你点击之后页面留下的状态，hover状态是指你将鼠标悬停在元素之上出现的状态，最后就是active,你点击的一瞬间出现的状态。

当我们保存下来后

这四张图片展示了标签<a>的状态。

然后，我们在介绍<input>的简单使用方法

首先如同<a>标签一样，但是只有一个focus简单介绍。

接下来让我们说说选择器状态伪类，选择器状态伪类种类比较丰富，我们仅仅举一些较为常见的伪类来看看常见的两种类型：与type有关的选择器状态伪类和与child有关的选择器状态伪类。

我们来看一下与type有关的选择器状态伪类：

element:first-of-type：选择父元素下的第一个类型为element的元素；
element:last-of-type：选择父元素下的最后一个类型为element的元素；
element:nth-of-type(n)：选择父元素下的第n个类型为element的元素；
element:nth-last-of-type(n)：选择父元素下的倒数第n个类型为element的元素；
element:only-of-type：选择父元素下的唯一的类型为element的元素。

我们来说一下第一种，选择父元素下的第一个类型为element的元素：

简单地说如果你在一个名为span的元素下面写下这个

如图我们可以看见我们设置的是在所有父元素下面选择第一个span元素，如图1,2,3,4均是在div父元素下面找span元素，也就是无论span元素前面有什么元素，只要不是span，就不开始算，只有找到叫做span的子元素，开始算做第一个，所以选定哪一个元素first-of-type，那么就需要找哪一个元素，如果没有就匹配失败。依次寻找完所有父元素，如果父元素就是span，那么父元素就会被匹配

我们来说一下第二种，选择父元素下的最后一个类型为element的元素：

同样我们以span为例。

如图我们可以看见我们设置的是在所有父元素下面选最后一个span元素，如图1,2,3,4均是在div父元素下面找span元素，也就是无论span元素最下面有什么元素，只要不是span，就不开始算，只有找到叫做span的子元素，开始算做第一个，所以选定哪一个元素，那么就需要找哪一个元素，如果没有就匹配失败。依次寻找完所有父元素，如果父元素就是span，那么父元素就会被匹配（哪怕只有一个子元素就是span，那么它既是第一个也是最后一个。）

当我直接这样在源代码上写一个last，

这个时候就会出现5,6,8都会被蓝色遮蔽，因为我是在first后面加上last，执行完first就会出现在执行last，导致原本的绿色会被遮蔽，所以大家要注意不要被遮盖。

然后我们再来说一下选择父元素下的第n个类型为element的元素

如图我们可以看见我们设置的是在所有父元素下面选择第2个span元素，如图1,2,3,4均是在div父元素下面找span元素，也就是无论span元素前面有什么元素，只要不是span，就不开始算，只有找到叫做span的子元素，开始算做第一个，所以选定哪一个元素，那么就需要找哪一个元素，如果没有就匹配失败。依次寻找完所有父元素，如果父元素就是span，那么父元素就会被匹配为第一个,。（如图中我的那个2是可以变换的，前面的nth就是固定的）

nth-last-of-type(n)：选择父元素下的倒数第n个类型为element的元素

这是我们所说的第四种。

如图我们可以看见我们设置的是在所有父元素下面选择倒数第n个span元素，如图1,2,3,4均是在div父元素下面找span元素，也就是无论span元素前面有什么元素，只要不是span，就不开始算，只有找到叫做span的子元素，开始算做第一个，所以选定哪一个元素，那么就需要找哪一个元素，如果没有就匹配失败。依次寻找完所有父元素，如果父元素就是span，那么父元素就会被匹配

最后再说一种type类型的。only-of-type：选择父元素下的唯一的类型为element的元素

如同他的字面意思，就是先找到各个父元素，当父元素下面只有一个子元素且为指定元素，本例为span，那么从下图看，

那么如图我们就能看到会出现一个8也被标红，可以说明当只有父元素时，就会将唯一且是span的父元素给标红。

element:first-child：选择父元素下的第一个类型为element的元素；
element:last-child：选择父元素下的最后一个类型为element的元素；
element:nth-child(n)：选择父元素下的第n个类型为element的元素；
element:nth-last-child(n)：选择父元素下的倒数第n个类型为element的元素；
element:only-child：选择父元素下的唯一的类型为element的元素。

首先让我们说一下first-child：选择父元素下的第一个类型为element的元素

这个是只有有子元素并且子元素第一个是span(因为我们是以span举例)，第一个元素才会被标记，(不同于type种类，那个父元素是span，父元素就会被标红)，并且这个开始算是从父元素里面第一个子元素开始计数，当第一个元素不是span，那么相配失败，就会出现没有标记的情况

由此我们可以看到，只有第一个子元素是才会出现标红。并且会从第一个子元素开始计算数目。

last-child：选择父元素下的最后一个类型为element的元素

nth-child(n)：选择父元素下的第n个类型为element的元素

nth-last-child(n)：选择父元素下的倒数第n个类型为element的元素

only-child：选择父元素下的唯一的类型为element的元素。

我们一下把这剩下的四种都给概述一下

last-child这个是只有有子元素并且子元素最后一个是span(因为我们是以span举例)，最后一个元素才会被标记，(不同于type种类，那个父元素是span，父元素就会被标红)，并且这个开始算是从父元素里面最后个子元素开始计数，当最后一个元素不是span，那么相配失败，就会出现没有标记的情况

nth-child(n)这个是只有有子元素并且子元素第n个是span(因为我们是以span举例)，第n个元素才会被标记，(不同于type种类，那个父元素是span，父元素就会被标红)，并且这个开始算是从父元素里面开始第一个子元素开始计数，当第n个元素不是span，那么相配失败，就会出现没有标记的情况

nth-last-child(n)：选择父元素下的倒数第n个类型为element的元素

nth-last-child(n)这个是只有有子元素并且子元素倒数第n个是span(因为我们是以span举例)，倒数第n个元素才会被标记，(不同于type种类，那个父元素是span，父元素就会被标红)，并且这个开始算是从父元素里面倒数第一个子元素开始计数，当第n个元素不是span，那么相配失败，就会出现没有标记的情况

only-child：选择父元素下的唯一的类型为element的元素。

只有当只有一个子元素并且这个子元素就是我们要的span时才会出现标红的情况。

说完了伪类，来让我们看一下伪元素，我们主要讲四个伪元素::after，::before，::first-letter,::first-line。

首先我们说一下，before

然后我们在写就是after

然后我们就说first-letter

最后就是first-line

让我们再看下面那一组照片

这个时候就能看见我们出现的图片就是首先定义的是<div>标签，父元素，然后定义一个子元素p,这样就组成了一个复合选择器。那么我们怎么区分这些复合选择器呢？由此让我们进入到第二部分，关系选择器。

2.关系选择器

首先让我们了解一下什么是关系选择器：关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。

在上面那我们已经开始使用父子关系选择器，然后我们就开始介绍子元素选择器：

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

借这个图片我们说一下在这里面我设立的p是父元素，而span是子元素

同样在这两张照片中我们可以看到只有是p元素的子元素span才会出现被标记的痕迹，单独出现的并不是p标签的子元素，所以不会出现效果。

然后我们就要介绍一下后代选择器：

作用：通过指定的祖先元素找到指定的子元素

语法：父元素子元素{}（父元素和子元素中间空格）

虽然子元素选择器和后代选择器相差不是很大，但是最主要的是后代选择器会选择作为某元素后代的元素，包括直接后代和间接后代（即孙子、曾孙等）。而子元素选择器则只选择作为某元素直接子元素的元素，即只影响直接后代，对“孙子”以及多个层的后代不产生作用

下一个兄弟选择器和下面所有兄弟选择器我们就一起讲述这个：

这个是下一个兄弟选择器：

作用：选择与当前元素紧挨着的下一个同级元素

语法：兄+第{}

看着下面的就是下面所有兄弟选择器：

作用：选择当前元素下的所有同级元素

语法：兄~弟{}

3.CSS布局

两栏布局和三栏布局我们首先要介绍两栏布局

浮动 + margin

先将左元素设置定宽为100px，并左浮动。
然后给右元素设置margin-left，值等于左元素的宽度。

.left设置的是左边图像的内容，从图中看

height: 200px;：元素的高度被设置为200像素。
background-color: #f00;：元素的背景颜色被设置为红色（#f00 是红色的十六进制代码）。
float: left;：元素会浮动到其容器的左侧，这意味着它会脱离正常的文档流，并且其他内容（比如 .right 类的元素）会环绕它。

.right 类

height: 200px;：元素的高度被设置为200像素。
background-color: aqua;：元素的背景颜色被设置为浅蓝色。
margin-left: 100px;：元素的左边距被设置为100像素，这意味着元素的内容会从它的容器的左侧开始向右偏移100像素。

浮动 + BFC（overflow: hidden）

触发BFC后，右元素就会环绕着浮动的元素，不会被浮动的元素所覆盖。

标准流布局：也称为“标准文档流”或“普通流”，元素按照其在HTML中出现的顺序从上到下、从左到右进行排列。块级元素会换行，而行内元素则不会。
浮动布局：通过CSS的float属性使元素浮动到指定位置，常用于实现多列布局或图文混排。浮动元素会脱离标准文档流，并允许其他内容环绕它。
定位布局：使用CSS的position属性来设定元素的位置。分为静态定位、相对定位、绝对定位和固定定位等。
弹性布局（Flexbox）：使用CSS的display: flex属性来创建弹性盒子布局。这种布局方式具有弹性、自适应等特性，可以轻松地实现垂直居中、等高列布局等复杂布局情况。
网格布局（Grid）：通过CSS的display: grid属性来创建网格布局，能够处理二维布局问题，非常适合复杂的页面布局。早期的网页设计中较为常见。
两栏布局通常包括一个固定的侧边栏和一个自适应的内容栏。侧边栏可以放置导航链接、广告或者其他次要内容，而内容栏则展示主要的页面内容。这种布局方式适用于需要突出主要内容，同时提供辅助信息或导航链接的网页。通过固定侧边栏的宽度，内容栏可以自适应地填充剩余的页面宽度，使得页面在不同尺寸的设备上都能保持良好的可读性和用户体验。

三栏布局则是以平铺方式展现的左中右三列布局。其中，左右两列可以固定在网页两侧，而中间一列则永远居中，并且当网页宽度大于左右两列宽度之和时，中间一列可以随网页整体宽度的变化而变化。这种布局方式常见于需要展示更多信息或者提供不同功能区域的网页。例如，可以将主要内容放在中间栏，边上的两栏放置导航链接、次要内容或者广告等。通过合理设置各列的宽度和比例，可以实现页面的平衡和美观，同时提高用户的浏览效率。