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

【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...文本样式 CSS 文本样式 : 文本颜色 : color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 : 预定义颜色 : 直接使用 颜色的英文名称 , blue , red , green...) text-decoration: underline; 二、CSS 标签显示模式 1、块级元素 标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;...块级元素 ; span { /* 行内元素 转换为 块级元素 */ display: block; } 行内元素 -> 块级元素 : 在 CSS...; } 块级元素、行内元素 -> 行内块元素 : 在 CSS 样式中设置属性值 display: inline-block; , 可以 将 块级元素 或 行内元素 转换为 行内块元素

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

    CSS3的颜色特性

    CSS3颜色特性 “佛靠金装,人靠衣装”,网页也是如此。随着互联网的迅速发展,一个网页给人们留下的第一印象,既不是它的内容,也不是它的设计, 而是整体颜色。...网页色彩的表现原理: 我们知道有256种Web安全颜色,其实这256种颜色是指8位颜色的表现能力,随着科技的发展,现在颜色不局限于8位,16位色彩的总数是65536色,也就是2的16次方,而新增了24位元色彩...减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡, 这样与补色相关的两种颜色混合就会出现彩色的情况。...CSS3 颜色模式在 CSS2....的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA: RGBA在RGB基础上增加了控制alpha透明度的参数,其中RGB颜色模式( 也称为三原色) 是工业界的一种颜色标准,通过对红( R)、绿

    1.1K30

    css样式中的颜色格式

    颜色对于 css 来说是非常重要的,网站之所以会呈现出五彩斑斓的样式,就是这些颜色样式起的作用。在 css 中,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 中颜色的格式。...名字颜色 在 css 中,默认定义了很多名字颜色,比较常见的比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。...RGB 这是一种颜色格式,从名字我们就知道它是 red,green,blue 三种颜色的简写,我们都知道三原色原理,也就是通过三种基本颜色,我们就可以组合出其它的颜色出来,因此,rgb 就可以表示出我们可以看到的各种颜色...在 css 中,red,green,blue 被称作三通道,每个通道的值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。....translucent-box { background: lch(50% 120 20); } 总结 CSS 是一种令人惊讶的难以掌握的语言。

    2.3K30

    基于图像处理的火焰检测算法(颜色+边缘)

    这类系统的最大好处是可以以图像或视频的形式保存火源,这大大促进了火灾探测方法的多样化。 在本文中,我们提出了一种将火焰颜色信息与火焰边缘信息相结合的算法。...然后我们在原始图像上使用Sobel边缘检测来检测火灾的边缘,同时删除小于100的阈值。...颜色像素可以被提取为这三个单独的元素R、G和B,用于颜色检测。 RGB颜色模型用于检测图像中的红色信息。就RGB值而言,R、G、B颜色通道之间对应的相互关系:R>G和G>B。...然后,需要将结果转换为 HSI 颜色模型,其中 H 代表色调,S 代表饱和度,I 代表强度。 Sobel边缘检测 下一步将使用Sobel边缘检测器来检测图像内火焰的变换。...该算法采用RGB颜色模型来检测火焰的颜色,主要通过红色分量R的强度来理解。使用Sobel边缘检测来检测火势的增长。

    78910

    你不知道的 CSS 之包含块

    你不知道的 CSS 之包含块 一说到 CSS 盒模型,这是很多小伙伴耳熟能详的知识,甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。...大致可以分为如下几种: 如果元素的 positiion 是 relative 或 static ,那么包含块由离它最近的块容器(block container)的内容区域(content area)的边缘建立...如果元素使用了 absolute 定位,则包含块由它的最近的 position 的值不是 static (也就是值为fixed、absolute、relative 或 sticky)的祖先元素的内边距区的边缘组成...实际上对于非根元素来讲,包含块还有一种可能,那就是如果 position 属性是 absolute 或 fixed,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的: transform...area)的边缘建立。

    13710

    神奇的 CSS,让文字智能适配背景颜色

    看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色。...混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式...通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。 该混合模式最常见的应用场景就是文章开头描述的场景,实现文本在不同背景色下展示不同的颜色。...:difference 的缺点 当然,这个方法不是完美的,因为通过 mix-blend-mode:difference 与底色叠加之后的颜色,虽然能够正常展示,但是不一定是最适合的颜色,展示效果的最好的颜色...这里实际使用的时候,在非黑白场景下,还需要多加实验加以取舍。 最后 总结一下,本文介绍了利用 CSS 混合模式实现文本适配背景展示的一个小技巧

    2.1K40

    深入了解CSS颜色架构:提升你的网页设计技巧

    作者首先介绍了CSS颜色的基础知识,包括颜色表示法、颜色值和颜色选择工具。接着,他强调了良好的颜色架构对于网页的视觉吸引力和用户体验的重要性。...在我向你展示如何组织我们的CSS变量之前,让我们先讨论在CSS中组织颜色的错误方法。 注意:我们的一些颜色架构使用Sass预处理。...定义 CSS 颜色变量的错误方法 审查其他CSS架构时,尝试思考哪些低效会使其难以维护。...我们如何决定管理我们的CSS颜色变量 作者主要想法是为色调谱上的每个颜色组家族创建一个CSS变量,以连接每个颜色组(例如蓝色、绿色、橙色和红色)。...在此基础上,我们探讨了如何利用私有变量重新组织CSS变量,从而创建出一个颜色组织良好的CSS架构。

    32310

    由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到...position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微对css有所了解的必然能马上说出它的四个属性值:static 、relative、absolute、fixed。...3.BFC         BFC(Block Formatting Context 块格式化上下文):是W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为flow root。...在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘), 即使存在浮动也是如此(尽管一个子元素的内容区域会由于浮动而压缩...根据BFC的规则: 每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘) 所以,虽然存在浮动的元素aslide,但

    1.1K50

    一台Server+8块SmartNIC,DPU的池化如何助力边缘云计算实践

    边缘云计算面临的困境5G时代下基础网络设施的现代化改造势在必行,这包括简化运维,提高网络灵活性、可用性、可靠性和扩展性,减少延迟和优化应用响应时间等等。...其中,边缘云计算的部署是一大重点——结合网络虚拟化技术把工作负载和服务从核心网络(位于数据中心内)移向网络边缘,一方面可以利用延迟降低的优势,改善现有应用的体验,对于网络运营方而言也便于新业务的灵活部署和统一管理...随着业务规模快速增长,边缘场景下有限空间资源内的算力扩展成为了不可忽视的问题。边缘机房的CPU开销暴增,但机房的供电和散热能力有限,无法像数据中心一样通过大量新增服务器提升算力。如何扩展边缘云算力?...Helium DPU智能网卡为边缘云算力扩展难题提供了一个解决思路:提高单位空间的算力上限。...图片并且,多块DPU网卡存储的数据可通过PCIe共享到同一台服务器,以标准服务器+DPU的 “算力资源池" 形式接受云管平台纳管,实现"从云到边"的资源统一管理和分配。

    40610

    继CoolHue 2.0之后五个好用的配色网站

    你如果想了解 CoolHue 请点击下面的文章 一个免费好用的渐变配色网站 在你的 PPT、海报或者网页设计中,可能会用上渐变这种本来过了时,又成为流行的奇怪配色但不懂配色的你弄出的可能是这...进入网站的时候,会出现一种颜色,根据你的喜好,点击 Like 表示喜欢,不喜欢这种颜色则点击 Dislike,选错了就点击remove ,一直选择直到搭配出你想要的颜色方案为止,你也可以点击 Adjust...按下shift会显示所有配色列表,右上角get.jpg是免费下载按钮 Add New Gradient是添加新配色 (这个没什么用) GET CSS是显示当前配色的css代码 Rotate gradient...进制色值以及 CSS 代码,点击色块右上角,即可下载 PNG 格式图片。...拖动左边的球形按钮,可以改变色度和亮度;鼠标放在某一色块上,点击圆圈并旋转拖动可以改变渐变色的角度。同样可以复制 16 进制色值,以及 CSS 代码;点击图片,可以看到全局。 ?

    1.5K30

    神奇的CSS,几行代码就可以让照片变老照片的效果

    足以组合颜色区域并使图片失去更多细节。 contrast(1.2):锐化图片。我们可以稍微调整一下值,将其调整为我们想要的,并为每张图片对其进行个性化设置。但要注意:太高或太低,看起来会很奇怪。...旧照片看起来更集中在中心,但随后它们会退化,失去颜色并且边缘变得有点模糊。我们可以通过在 CSS 中应用遮罩来实现。不幸的是,并非所有浏览器都支持遮罩……对我们来说幸运的是,供应商前缀是!...请注意,这可能会根据背景颜色产生不同的结果! 应用这四行CSS后,我们就实现了老照片的效果。这是原始图片与结果图片的比较: 不错,但我们可以更进一步。...我们将使用 ::before 伪元素来模糊图像的边缘。旧照片中常见的东西。为此,我们将再次使用遮罩。另一个从中心到边缘的径向渐变,但这次将是相反的方向:在中心隐藏,在末端可见。...,而且我们在混合中添加了更多棕褐色(因此颜色组合得更多): 三、进一步添加混合内联 SVG 有些人会大声说道,说这“不是纯 CSS 解决方案”(我从来没有声称它是),并认为这部分是作弊。

    3.1K30
    领券