3-1 万紫千红-用CSS统一色彩管理_第1页
3-1 万紫千红-用CSS统一色彩管理_第2页
3-1 万紫千红-用CSS统一色彩管理_第3页
3-1 万紫千红-用CSS统一色彩管理_第4页
3-1 万紫千红-用CSS统一色彩管理_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一号任务万紫千红——用CSS统一色彩管理汇报人：xxx时间：2026任务说明01本任务将实现页面的统一色彩管理，具体任务如下。 （1）定义并合理运用全局变量，确保其在项目中的有效性和一致性。 （2）为自定义的类添加样式，并在适当的地方引用全局变量，以此增强样式的统一性和组件的复用性。一号任务任务说明知识准备0201现代CSS特性03全局属性目录02CSS变量04文字排版与过渡效果06颜色搭配与设计05透明度07CSS命名规范1.

现代CSS特性知识准备现代CSS特性是指近年来随着Web标准和技术的发展，CSS中引入的一系列新功能和改进。主要包括CSS变量、Flexbox和Grid布局、文字排版与过渡效果、透明度控制、命名规范和模块化管理，这些特性提升了CSS的灵活性、可维护性和响应性。本模块先介绍部分特性，后续模块再介绍Flexbox和Grid布局等。2.CSS变量CSS变量也被称为自定义属性（CustomProperties），允许存储一个值并在整个文档中重复使用，有如下特点。

允许设置颜色或尺寸等值，在多个地方使用在一处更改变量值，影响所有引用了该变量的地方类似于编程中的变量，便于统一管理和修改样式3.使用:root定义全局属性知识准备:ROOT：是一种伪类（可以询问AI助手什么是伪类），代表文档的根元素，在HTML中就是<html>元素。通过:root定义的CSS变量可以被整个文档中的任何元素访问。在:root中定义变量就像是给整个网站设置了一个共享的“工具箱”，里面装着颜色、尺寸等常用值。【例】CSS变量定义主要字体大小和次要颜色这种做法能最大程度提高CSS的代码复用性，实现样式统一管理的需求。4.文字排版与过渡效果知识准备文字排版：文字排版涉及字体的选择、大小、行距、字间距等属性的设置，如表所示，以确保文本的可读性和美观性。类型属性描述示例属性值字体和字形font-family指定字体族'Arial'、sans-serif、'TimesNewRoman'、seriffont-size设置字体大小16px、1em、1remfont-weight设置字体粗细Normal、bold、100、200font-style设置字体样式，如斜体Normal、italic、obliqueline-height设置行高1.5、1.2em、20px文本对齐和方向text-align设置文本的水平对齐方式Left、right、center、justifytext-indent设置首行缩进2em、10pxdirection设置文本的方向Ltr、rtl文本装饰和阴影text-decoration设置文本的下划线、删除线等装饰效果none、underline、overline、line-throughtext-shadow添加文本阴影2px2px4pxrgba(0000.5)字间距和行间距letter-spacing设置字符之间的间距2px、0.1emword-spacing设置单词之间的间距4px、0.2em这套文字排版样式用body选择器实现，针对HTML文档主体设置样式；因<body>标签包含几乎所有可见元素，无更具体规则时，body样式可满足全局文字排版需求。现代CSS有字体控制、文本变换等高级排版技术，能提升文本可读性与视觉吸引力，还支持可访问性和响应式设计，确保文本在不同设备良好显示，更多信息可通过AI助手了解。4.文字排版与过渡效果知识准备hover效果通过:hover伪类来定义超链接（或任何其他元素）在鼠标指针悬停时的样式效果。超链接的hover效果是指当鼠标指针悬停在链接上时发生的样式变化，可以是颜色改变、下划线消失等。【例】定义鼠标指针悬停时超链接的样式规则5.透明度及其应用知识准备透明度可以用来创建半透明或完全透明的效果，从而增强网页的设计感、提升用户体验。涉及的CSS属性主要包括opacity属性、rgba和hsla颜色值。4.文字排版与过渡效果参数描述取值范围red红色分量0~255green绿色分量0~255blue蓝色分量0~255alpha透明度0.0~1.0参数描述取值范围hue色调0~360saturation饱和度0%~100%lightness亮度0%~100%alpha透明度0.0~1.01）opacity属性用于设置一个元素的整体透明度。它的取值范围是0到1，其中0表示完全透明，1表示完全不透明。2）rgba和hsla颜色值，允许为颜色添加透明度通道。控制颜色的透明程度，就像是在画布上叠加一层半透明的颜色。这两个颜色值都可以用来设置任何接受颜色值的CSS属性，如color、background-color、border-color等。Rgba和hsla的参数如下表：5.透明度及其应用知识准备透明度的应用3种透明度属性或属性值的适用场景不同，分别如下。

Opacity属性适用于设置整个元素的透明度，尤其适用于hover效果和背景遮罩。

rgba颜色值适用于设置特定颜色的透明度，如背景色、边框色和文本色。

hsla颜色值适用于需要精细调整颜色的色调、饱和度和亮度的场合。6.颜色搭配和设计为落实后续任务的无障碍设计要求，本部分将融入无障碍设计规范，确保视觉呈现既满足审美需求又符合可访问性标准。7.CSS命名规范知识准备BEM（Block__Element--Modifier）是一种流行的CSS命名方法，有助于创建更清晰、更具语义的CSS类名。BEM命名法就像是给每个家庭成员起名字，通过前缀区分他们的关系和角色。 （1）Block（块）：独立的实体，可以是页面上的任何组件，如按钮、菜单等。它是最高级别的元素，不会依赖于其他部分。 （2）Element（元素）：属于某个块的一部分，类名以Block__Element表达从属关系，建议与其Block上下文一起使用以保持语义清晰。 （3）Modifier（修饰符）：用于改变块或元素的状态或外观的标志。它可以是布尔值（开启/关闭状态），也可以是具有具体值的属性。任务实现03任务实现01定义全局颜色变量02使用全局变量的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论