蓝旭前端第二周预习作业

时间：2024-04-11 20:50:23 来源：网络cs 作者：利杜鹃栏目：卖家故事阅读：

标签：预习作业

阅读本书更多章节>>>>

CSS伪类与伪元素

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

active

伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

a:link {  /* 未访问链接 */  color: blue;}a:visited {  /* 已访问链接 */  color: purple;}a:hover {  /* 用户鼠标悬停 */  background: yellow;}a:active {  /* 激活链接 */  color: red;}p:active {  /* 激活段落 */  background: #eee;}

any-link

伪类选择器表示作为超链接源锚点的元素，无论是否已被访问。换言之，它匹配每个具有 href 属性的 a 或 area 元素。因此，它匹配所有匹配 :link 或 :visited 的元素。

a:any-link {  border: 1px solid blue;  color: orange;}/* WebKit 浏览器 */a:-webkit-any-link {  border: 1px solid blue;  color: orange;}

blank

伪类选择器,用于匹配如下节点:
没有子节点;
仅有空的文本节点;
仅有空白符的文本节点。

div {  border: 4px solid red;}:blank {  border-color: lime;}

checked

伪类选择器表示任何处于选中状态的radio(input type=“radio”), checkbox (input type=“checkbox”) 或 (“select”) 元素中的option HTML 元素 (“option”)。

/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */:checked {    margin-left: 25px;    border: 1px solid blue;}

current

伪类选择器是一个时间维度的伪类，表示当前正在显示的元素或元素的祖先。例如，此伪类可用于表示 WebVTT 显示带有字幕的视频。

:current(p, span) {    background-color: yellow;}

default

pseudo-class 表示一组相关元素中的默认表单元素。

input:default {    box-shadow: 0 0 2px 1px coral;}input:default + label {    color: coral;}

dir

伪类匹配特定文字书写方向的元素。在 HTML 中，文字方向由dir属性决定。其他的文档类型可能有其他定义文字方向的方法。

<div dir="rtl"><span>test1</span><div dir="ltr">              test2<div dir="auto">עִבְרִית</div></div></div>

disabled

伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。

label {    display: block;    margin-top: 1em;}*:disabled {    background-color: dimgrey;    color: linen;    opacity: 1;}

empty

伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。

.box {    background: pink;    height: 80px;    width: 80px;}.box:empty {    background: lime;}

enabled

伪类表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。

input:enabled {    color: #2b2;}input:disabled {    color: #aaa;}

first

伪类与 @page at 规则一起使用。表示打印文档的第一页。（有关节点的第一个元素，请参阅 :first-child。）

@page :first {    margin-left: 50%;    margin-top: 50%;}p {    page-break-after: always;}

first-child

伪类表示在一组兄弟元素中的第一个元素。

p:first-child {    color: lime;    background-color: black;    padding: 5px;}

first-of-type

表示一组兄弟元素中其类型的第一个元素。

p:first-of-type {    color: red;    font-style: italic;}

focus

伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。

.red-input:focus {    background: yellow;    color: red;}.blue-input:focus {    background: yellow;    color: blue;}

伪元素

创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

after

用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.exciting-text::after {    content: "<- 让人兴兴兴奋！";    color: green;}.boring-text::after {    content: "<- 无聊！";    color: red;}

before

创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

q::before {    content: "«";    color: blue;}q::after {    content: "»";    color: red;}

first-letter

选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。

/* 使每段开头的第一个字母变红变大 */p::first-letter {    /* 使用:first 来兼容 IE8- */    color: red;    font-size: 130%;}

first-line

伪元素在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

p::first-line {    text-transform: uppercase;}

grammar-error

伪元素应用于浏览器标识为语法错误的文本段

实验性: 这是一项实验性技术

在将其用于生产之前，请仔细检查浏览器兼容性表格。

selection

伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

/* 选中的文本是红色背景，金黄色的字体 */::selection {    color: gold;    background-color: red;}/*选中的是蓝色背景，白色的字体的段落*/p::selection {    color: white;    background-color: blue;}

spelling-error

伪元素表示浏览器标记为不正确拼写的文本段。

::spelling-error {    color: red;}

关系选择器(Combinator)

关系选择器用于选择文档中的特定元素，这些元素与其他元素之间存在特定的关系。关系选择器可以帮助我们根据元素之间的层次关系和位置关系来精确地选择需要样式化的元素，从而实现更灵活的页面布局和样式控制。

后代选择器

后代组合器（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

li {  list-style-type: disc;}li li {  list-style-type: circle;}

子元素选择器

子组合器（>）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。

span {  background-color: aqua;}div > span {  background-color: yellow;}

相邻兄弟选择器

接续兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

li:first-of-type + li {  color: red;}

通用兄弟选择器

后续兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

/* 在任意图像后的兄弟段落 */img ~ p {  color: red;}

CSS布局

响应式设计
兼容性考虑
布局结构清晰
跨浏览器测试
CSS规范和命名规范
确定好需求之后可以先进行UI设计
基础布局

盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

内容区域

内容区域（content area）由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

内边距区域

内边距区域（padding area）由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度和 padding-box 高度。

边框区域

边框区域（border area）由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度和 border-box 高度。

外边距区域

外边距区域（margin area）由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度。

调试CSS

按下F12