首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML-CSS基础学习

meta分为:HTTP标签部分(http-equiv)页面描述信息(name) http-equiv 可以利用其设定浏览器的一些信息,正确显示网页 http-equiv:指定协议头类型,content...a标签: :acitve 将样式添加到被激活的元素 :foces 将样式添加到被选中的元素 :hover 当鼠标悬浮这元素上方时,向元素添加样式 :link 将样式添加到未访问的元素 :...visited 将样式添加到已被访问过的元素 :first-child 将样式添加到元素的第一个子元素 :lang 设置元素使用特殊语言的内容的样式 p标签: p:empty 选择没有子元素的每个...背景图像显示的原点 background-clip 背景向外剪裁的区域 background-size 背景图像的尺寸大小 background 复合属性 边框属性 边框颜色 border-top-color...border-image-source 用于绘制边框图像的位置 border-image-slice 图像边界向内偏移 border-image-width 图像边界的宽度 border-image-outset

4.8K30

CSS相关

CSS边框 本节回顾两个属性border-radius、box-shadow 属性 描述 扩展 border-radius 给div元素添加圆角的边框 border-radius 属性是一个最多可指定四个...(允许在元素上添加多个背景图像) background: url(flower.png) right bottom no-repeat, url(summertrack.png) left top repeat...; background-size:cover–保持图像纵横比并将图像缩放成完全覆盖背景定位的最小大小 background-size:contain–保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小...)、ease-out(动画低速结束)、ease-in-out(动画低速开始结束) | |animation-fill-mode|规定当动画不播放时(当动画完成或者延迟未开始播放时),要应用到的元素的样式...当你设置一个元素为box-sizing:border-box时,此元素的内边距边框便不再增加它的宽度了 outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓 19

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS基础知识巩固你的前端基础

    id选择器,特定id值的HTML元素指定样式。 类选择器,指定class的HTML元素指定样式。...伪类选择器 伪类选择器:伪类选择器伪元素选择器 伪类冒号(:)开头,元素选择符冒号之间不能有空格,伪类名中间也不能有空格。...background-repeat默认值为repeat,即图像沿着x轴y轴平铺,还可以指定沿着x轴平铺rpeat-x,沿着y轴平铺repeat-y,或者不平铺no-repeat,继承父元素该属性设置inherit...设置是否显示表格中空单元格上的边框背景 table-layout 设置用于表格单元格列宽的设置方式 盒模型 css盒模型,包含元素内容 content,内边距 padding,...css内边距属性,元素的内边距在边框内容之间。

    2K10

    CSS 基础

    层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距颜色等)的计算机语言 CSS 的三种引入方式 头部引入,通过在...后定义的相同 css 属性会覆盖前面定义的,后面的样式生效 CSS 选择器 CSS 选择器的书写格式为:选择器 + 大括号,大括号里面书写 css 属性样式,键值对 key : value 冒号 :...,分别是 标签选择器、ID 选择器 类选择器,需要注意的是,ID 选择器 # 号开头,id 值在同一个 HTML 页面是唯一的,不能重复,相当于元素的身份标识,id 属性的设置,不能以数字开头,中间不要出现空格...,包括 内边距 边框,但不包括外边距 background-color: red; background-image:url(); /*指向图像的路径*/ background-repeat 属性...percentage/cover/contain; 值 描述 length 设置背景图像的高度宽度,如果只设置一个值,则第二个值会被设置为 "auto" percentage 父元素的百分比来设置背景图像的宽度高度

    3.2K40

    让你兴奋不已的13个CSS技巧🤯

    仅使用CSS,您就可以通过边框创建一个三角形。 这是一个相当老的技巧。理想情况下,你会在一个宽度高度都为零的元素上设置边框。所有的边框颜色都是透明的,除了那个将形成箭头的边框。...例如,要创建一个向上指的箭头,底部边框是有颜色的,而左边右边是透明的。无需包括顶部边框边框的宽度决定了箭头的大小。...但你可以通过 image-set CSS 技巧提供一种解救方法。 可以为浏览器提供选项,让它决定最适合用户设备的图片。...如果支持 -webkit-image-set ,那么背景图像将会是一种优化的图像,也就是说,这将是一种支持的MIME类型的图像,且更适合用户设备的分辨率能力。...我们可以在表单元素上使用 :valid :invalid CSS伪类,当其内容验证成功或失败时,应用适当的样式。 请考虑以下HTML页面结构: <!

    30950

    前端入门学习--CSS

    也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素子元素。 IE8 及更早IE版本不支持设置填充的宽度边框的宽度属性。...DOCTYPE html即可 CSS 边框 CSS 边框属性 CSS边框属性允许指定一个元素边框的样式颜色。 边框样式 边框样式属性指定要显示什么样的边界。... CSS 图像拼合技术 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载生成多个服务器的请求。...屏幕纸上的文件不同,通常需要一个更大的字体,sans - serif字体比较适合在屏幕上阅读,而serif字体更容易在纸上阅读。...使用CSS添加背景、格式化文本、以及格式化边框,并定义元素的填充边距。

    27.7K20

    Google发布Objectron数据集

    在这些成功的基础上,进一步提高对3D对象的理解,这将极大地促进更广泛的应用,例如增强现实,机器人技术,自主性图像检索。...今天,我们很高兴发布Objectron数据集,这是一个短的,以对象为中心的视频剪辑的集合,可以从不同的角度捕获更大的一组公共对象。每个视频剪辑都随附有AR会话元数据,其中包括相机姿势稀疏点云。...除此之外,数据还包含每个对象手工标注的3D边框,用来描述对象的位置,方向尺寸。...数据集包括15K带注释的视频剪辑,并补充了从不同地理区域的样本中收集的超过4M带注释的图像(覆盖五大洲的10个国家/地区)。...然后,第二阶段使用图像裁剪来估计3D边框,同时为下一帧计算实体的2D裁剪,因此实体检测器不需要运行每个帧。第二阶段3D边框预测器在Adreno 650移动GPU上83 FPS运行。 ?

    79830

    Java学习笔记-全栈-web开发-02-css必备基础

    浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。 外部样式表,css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。...5.5 伪类 css伪类用于向某些选择器添加特殊效果。伪类非常多,使用方法也基本差不多,具体请百度查询官方文档,以下只介绍锚伪类。...5.7 轮廓 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色宽度。...CSS border 属性允许你规定元素边框的样式、宽度颜色。 常用属性: border:简写属性,用于把针对于四个边的属性设置在一个声明。...6.3 外边距 元素的内边距在边框内容区之间。控制该区域最简单的属性是 padding 属性。 CSS padding 属性定义元素边框与元素内容之间的空白区域。

    1.7K30

    分享15个高级前端开发小技巧

    可定制的表单控件 设置表单控件的样式匹配特定的设计通常需要 JavaScript。随着 :focus-within 伪类 CSS 自定义属性的出现,我们无需编写脚本即可实现此目的。...9.渐变边框 传统上,实现渐变边框涉及复杂的 CSS 或 JavaScript 解决方案。随着 conic-gradient 属性的出现,我们无需任何脚本即可创建渐变边框。...在图像上叠加文本 传统上,在图像上叠加文本需要 JavaScript 来定位。 通过CSS中的position属性,我们无需编写脚本就可以轻松实现文本叠加。...使用纯 CSS 的动态渐变文本:见证使用背景剪辑属性线性渐变轻松实现的动态渐变文本效果的优雅。...踏上 HTML CSS 为中心的编码冒险之旅,揭示各种可能性,从而提高您的 Web 开发技能。 关注我们,一起揭开现代 Web 开发的秘密,一次一种无 JavaScript 的技术。

    20711

    SVG 线条动画基础入门知识

    与其他图像格式相比,使用 SVG 的优势在于: 1、SVG 可被非常多的工具读取修改(比如记事本) 2、SVG 与 JPEG GIF 图像比起来,尺寸更小,且可压缩性更强。...3、SVG 是可伸缩的 4、SVG 图像可在任何的分辨率下被高质量地打印 5、SVG 可在图像质量不下降的情况下被放大 6、SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图) 7、...button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。...css 中的 border-width,给 svg 图形设定边框宽度; stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色; stroke-linejoin |...SVG 矩形只留底边 这里我们给按钮添加stroke-dasharray: .shape { ...

    2.9K30

    搭建深度学习模型实现“换脸检测” Deepfake Detection

    引言 由于视频剪辑软件的流行及其简单易用的特点,Facebook、Instagram、Snapchat等社交平台充斥着剪辑视频。通过视频剪辑可以伪造一些实际上并没有发生过的人物事件。...数据方法 数据集 训练数据主要是从150分钟的真实视频150分钟的合成视频中提取的449977帧图像,并且通过 Clay Sciences 平台根据是否是合成的对这些图像中的人脸添加边框并进行了“...然后将数据集划分为训练集(323202 帧图像)、验证集(80855 帧图像)测试集(45920 帧图像),并且每个源视频生成的帧图像被划分进同一个数据集中。...而误差函数为 SSD 模型的损失函数,该损失函数包含两个部分:1) 目标定位(预测的边框实际标注边框的差异);2) 目标分类(预测标签实际标签的差异)。...通过这个模型展示了目标检测模型可以用于减少剪辑视频的负面影响。 不足展望 本项目除了上述不足以外,还存在着数据方面的问题。

    1.9K50

    CSS学习笔记一

    如果一个元素拥有多个CSS选择器,会按照内部 -->外部的次序进行设置渲染 - CSS 样式: 背景样式: 背景色: background-color属性: 设置背景色,接受任何颜色值 背景图像...text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。...: list-style-image属性: 将列表项标志设置为一个图像 列表标志位置: list-style-position属性: 简写列表样式: list-style属性: 表格样式: 表格边框:...border属性: 设置表格的边框样式(双线框) border-collapse属性:将双线框折叠为单线框 宽度高度: width属性: 设置宽度 height属性: 设置高度 表格对齐: text-align...属性: (垂直对齐) 表格内边距: padding属性: 可以设置 , 元素标签的内边距 表格颜色: border属性: 设置元素文本背景颜色 属性 描述 border-collapse 设置是否把表格边框合并为单一的边框

    3.3K10

    TryShape 背后的故事,CSS 剪辑路径属性的展示

    因此,形状的基本要素是点、线、方向、曲线、角度长度等。CSSclip-path帮助指定许多这些属性来剪辑 HTML 元素的区域显示特定区域。显示剪切区域内的部分,隐藏其余部分。...请使用它来尝试添加、修改值创建新形状。 让我们谈谈 TryShape 是时候谈谈 TryShape 及其背景故事了。...您还可以创建一个 CSS 代码片段在您的应用程序中复制使用。...downloadjs : 从 JavaScript 触发下载 html-to-image:将 HTML 元素转换为图像(包括 SVG、JPEG PNG) Vercel:最适合托管 Next.js 应用程序...TryShape 的未来范围 TryShapeclip-path在后台使用 CSS 创建和管理基本形状时效果很好。导出形状 CSS 代码片段在您的 Web 应用程序中使用会很有帮助。

    2K30

    玩转 CSS Border-Image

    其中border用于配置边框,border-image用于配置边框图像。具体的用法我们接下来会讲解。...1. border-image-source 这个属性是用来传入作为边框图片的图片源,所有可以放入url()的值都可以使用,包括 SVG/Base64/CSS Gradient 等格式。...`space`:重复瓦片,如果不能充满则留有间距 4. border-image-outset 这个属性是用来指定边框图像区域超出边框框的距离,默认值为 0。相当于把图像边框往外挪。...这个属性可以配合border-image-outset一起使用实现一个原始边框较小,不影响原始框内内容显示的盒子。如下图所示: ?...三、总结 本文一个真实的设计稿为例,给大家引入了border-image的实际应用场景,希望大家以后在遇到类似场景时,可以想起这一技术。然后,歪马又快速带大家过了一遍相关的属性。

    1.1K20

    03.HTML头部CSS图像表格列表

    CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS 外部引用 -...样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色左外边距。...不建议使用的标签有: , , 不建议使用的属性: color bgcolor. CSS修饰标签的样式,有 "内联" "外引" 两种方式。...表格实例 实例 在浏览器显示如下:: HTML 表格边框属性 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。...自定义列表 标签开始。每个自定义列表项 开始。每个自定义列表项的定义 开始。

    19.4K101

    web 图像技术:前端引入图片的各种方式及其优缺点

    那是因为设置了宽度高度。 通过 CSS 隐藏图像 图像可以用 CSS 隐藏。 但是,它仍将加载在页面中。 因此,在执行此操作时请小心。如果一个图像应该被隐藏,那么它可能是出于装饰的目的。...CSS 背景图片并非如此,我们必须先检查元素,然后在DevTools中的url中打开链接,然后才能下载随CSS添加图像。 伪元素 可以将伪元素与CSS背景图像一起使用,例如在图像顶部显示覆盖图。...为了解决这个问题,我们应该在头像内添加边框,以防图像太亮看不清除。 ?...我们的目标是使内部边框图像融合在一起,这种不太实用。 使用 元素 现在的问题是,要添加内部边框,我们不能使用box-shadow,因为它无法在图像上使用。...解决方案用包裹 头像中,并添加专用于内部边框的元素。

    5K20

    Figma技巧超全合集!40+隐藏技能!快收藏!(第二辑)

    然后,您可以使用 Shift 2(缩放到选择)的组合放大所选元素。 24.Shift + 1-缩放适应 缩放显示画布上的所有元素。 25.Z+鼠标选区 按Z键在画布上选择一个区域。...您可以通过在鼠标触摸板上左右移动手指来更改输入值(在 Mac 上使用两个手指)。 29.边框技巧 例如,边框可以用作矩形工具的分隔线。但是由于矩形是一个单独的元素,自动布局可能会很麻烦。...在这里有一些诀窍:选择要添加边框的元素。从右侧面板的“效果”部分添加“内阴影”。赋予 Blur: 0、Spread: 0、X:0 Y:10 值后,元素下方会出现 10px 边框。...您可以通过更改 Y 值来增加边框厚度。最后,您可以选择颜色不透明度并最终确定您的边框设计(您可以通过创建名为“边框”的样式来将此效果用于其他元素)。...例如,您可以使用此示例来关注按钮类似元素。 42.Shift + Cmd + O 我们可以从右侧面板中为组件添加关键字。这样,我们可以在左侧面板的 assets 部分按关键字搜索并找到该组件。

    2K21

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    热门标签

    领券