蓝旭前端第二周预习作业

这篇具有很好参考价值的文章主要介绍了蓝旭前端第二周预习作业。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 高度。文章来源地址https://www.toymoban.com/news/detail-845860.html

调试CSS

按下F12

到了这里,关于蓝旭前端第二周预习作业的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端(第二次作业)

    1、计算用户指定的数值内的奇数和。例如用户输入的是 10,则计算 1 + 3 + 5 + 7 + 9 的和 运行截图: 2.使用递归计算 1 ~ 100 的和 运行结果;

    2024年01月17日
    浏览(44)
  • web前端第二次作业

    1,计算用户指定的数值内的奇数和 效果运行图: 代码: 2,使用递归计算 1 ~ 100 的和 效果运行图: 代码:

    2024年01月16日
    浏览(44)
  • 蓝旭前端05:JavaScript进阶

    数据类型 基本数据类型:Number、String、Boolean、Null、Undefined等。 引用数据类型:Object、Array、Function等。 typeof操作符:返回数据类型的字符串形式。 变量 变量声明:var、let、const。区别:var没有块级作用域,let和const有块级作用域,const声明的变量不能修改。什么是块级作用

    2024年04月26日
    浏览(36)
  • 【马蹄集】第十二周作业

    难度:黄金    时间限制:1秒    占用内存:128M 题目描述 在一个直角坐标系上,有 n n n 个坐标上有元素值(其余坐标的元素值为0),现给定一些点的坐标 ( x i , y i ) left(x_i,y_iright) ( x i ​ , y i ​ ) 和这个坐标的元素值 v i v_i v i ​ ,计算用一个边长为 R R R 的正矩形能

    2024年02月06日
    浏览(38)
  • 第二周题解

    其实上周只要做8道题目,所以允许我偷个懒,将上周的第9,10道题c v 过来 (qwq) 有一个n×n的网格,有些格子是可以通行的,有些格子是障碍。 一开始你在左上角的位置,你可以每一步往下或者往右走,问有多少种走到右下角的方案。 由于答案很大,输出对10^9+7取模的结果。

    2024年02月12日
    浏览(42)
  • QT第二周周三

    题目:使用图片绘制出仪表盘 代码: widget.h widget.cpp 运行效果:

    2024年01月18日
    浏览(41)
  • 码农的周末日常---一月的第二周

    上周总结         开发任务按规划完成         参加新版本的需求分析会议,基本了解新功能的实现         开始阅读一本新书《Head first Java》 2024/01/13        天气晴        温度适宜         蓝蓝的天,暖暖的阳光,不晒鞋可惜了,赶紧掏出我那正宗莆田和anta晒,扔到

    2024年01月19日
    浏览(43)
  • Effective Objective-C 学习第二周

    “属性”(property)是 Objective-C 的一项特性,用于封装对象中的数据。Objective-C 对象通常会把其所需的数据保存为各种实例变量。实例变量一般通过“存取方法”来访问。其中,“获取方法”(getter)用于读取变量值,而“设置方法”(setter)用于写入变量值。开发者可以令

    2024年01月22日
    浏览(46)
  • 云曦暑期学习第二周——文件上传漏洞

    一些web应用程序中允许上传图片、视频、头像和许多其他类型的文件到服务器中。 文件上传漏洞就是利用服务端代码对文件上传路径变量过滤不严格将可执行的文件上传到一个到服务器中 ,再通过URL去访问以执行恶意代码。 上传文件时,如果服务端代码未对客户端上传的文

    2024年02月15日
    浏览(42)
  • ARTS挑战第二周-T:PHP数组相关操作

    合并两个数组 array_combine()传入2个参数,使用方法如下 array_combine (array  $keys , array  $values ): array 返回一个 array,用来自  keys  数组的值作为键名,来自  values  数组的值作为相应的值。 搜索关联数组键 如果在一个数组中找到一个指定的键,函数array_key_exists()返回TRUE,否

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包