CSS进阶+设计

一、CSS伪类与伪元素

①伪类定义

伪类用于定义元素的特殊状态。

例如，它可以用于：

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

②所有CSS伪类

选择器	例子	例子描述
: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	选择所有已访问的链接。

例如（：hover 鼠标悬停其上可以变换颜色）

以上显示网页导航窗格相关代码，如上图，原本设置的颜色为darkolivegreen，将鼠标悬停后会变成olive，并且字体颜色color会变成设置的white。

效果如下：

原图：

鼠标悬停后：

③什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

 例如：（：：first-line 选择每个<p>元素的首行。）

效果：

如图，第一行字体颜色发生改变。

例如：如图：

由代码可知，<h2>里的内容仅包括“《小猫的深夜歌谣》瓦季姆莱文”，使用（：：after）伪元素后效果如下。

瓦季姆莱文后显示了其国籍“(Russia)”。

二、关系选择器

①类型

名称	语法	作用
子元素选择器	父元素>子元素{  }	通过指定的父元素找到子元素
后代选择器	父元素  子元素{   }（父元素，子元素之间空格）	通过指定的祖先元素找到指定的子元素
下一个兄弟选择器	兄+弟 {    }	选择与当前元素紧挨着的下一个同级元素
下面所有兄弟选择器	兄~弟 {   }	选择当前元素下的所有同级元

②举例

（子元素选择器）

效果如图：

例如：（下一个兄弟选择器）

如图可知，<p>标签内的一段字形将会改变，可以与上一效果图进行对比。（也可以知道，<span>标签内的效果仍然存在）

效果如下：

三、CSS布局

①以浮动为例

代码如下：

使用float属性并排浮动内容框，width根据几个内容框决定，三个就是33.33%，四个就是25%。

效果如图：

②display: inline-block

display:inline-block 允许在元素上设置宽度和高度。如果设置了 display: inline-block，将保留上下外边距/内边距.

padding设置了文本距离block的距离，margin设置了框距离网页边界的距离。

border-radius可以设置框的边界形状，background-color设置框的背景，color则是文字的颜色。

效果如图：

 ③水平和垂直对齐

1.居中对齐

要使块元素（例如 <div> ）水平居中，使用 margin: auto。

设置元素的宽度将防止其延伸到容器的边缘然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配。

例如：

效果如下：

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

若要居中对齐文本，则使用text-align：center。

居中对齐图片代码如下：

需要将图片左右外边距设置为auto，并设置成块元素。

效果如下：

2.左和右对齐

使用 position

对齐元素的一种方法是使用 position: absolute;

代码如下，实现图片左对齐，文本框右对齐。

效果如下：

使用float

效果如图：

四、盒模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

对不同部分的说明：

• 内容 - 框的内容，其中显示文本和图像。
• 内边距 - 清除内容周围的区域。内边距是透明的。
• 边框 - 围绕内边距和内容的边框。
• 外边距 - 清除边界外的区域。外边距是透明的。

①margin:

margin 属性是以下各外边距属性的简写属性：

• margin-top
• margin-right
• margin-bottom
• margin-left

如果 margin 属性有四个值：

• margin: 25px 50px 75px 100px;
  • 上外边距是 25px
  • 右外边距是 50px
  • 下外边距是 75px
  • 左外边距是 100px

如果 margin 属性设置三个值：

• margin: 25px 50px 75px;
  • 上外边距是 25px
  • 右和左外边距是 50px
  • 下外边距是 75px

如果 margin 属性设置两个值：

• margin: 25px 50px;
  • 上和下外边距是 25px
  • 右和左外边距是 50px

②padding：

属性值与margin相同。