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

50个有价值的CSS编写规则,让你写出更好的CSS

通常,使CSS变得困难的原因是,开发人员没有一套可以遵循和使用的工具,以及最佳实践指南,帮助他们享受编写CSS的乐趣。...我将所有全局样式保存在一个单独的文件中(尤其是在使用预处理器时),但你也可以将其放在 CSS 文件的顶部,然后专注于为站点的特定组件、元素或部分设置特定样式。...特定选择器的示例: section#sample-section —(问为什么需要指定“ section”和ID) main div p.title —(询问为什么需要指定.title以外的任何内容)...43 、避免颜色名称 更喜欢用十六进制和颜色函数指定颜色值,而不是说红色、紫色、青色。有数百万个十六进制颜色值,而不是所有这些值的名称。为了保持一致性,找到一种添加颜色的方法并坚持下去。...45 、尝试组织 CSS 匹配标记顺序 它确实可以让你更轻松地通过查看 CSS 来理解你的标记。这是我做的事情,为我节省了很多时间。

2.4K20

CSS笔记(6)

如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中. 3.参数是混合单位:如果两个值是精确单位和方位名词混合使用,则第一个是x坐标,第二个是y坐标....背景图像是随着对象内容滚动 fixed 背景图像固定 背景复合写法 为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中,从而节约代码量.当我们使用简写属性时,没有特定的书写顺序...,一般习惯的约定顺序为: background : transparent url(img.jpg) repeat-y fixed top; 背景颜色 图片地址 图片平铺 是否滚动 图片位置 CSS...层叠性原则: 样式冲突,遵循的原则是就近原则.哪个样式离结构近,就执行哪个样式 样式不冲突,不会层叠. 2.继承性 CSS中的继承,子标签会继承父标签的某些样式,如文本颜色和字号.简单理解就是:子承父业...答案:粉色 虽然我们给ul指定颜色,他是类选择器,权重为0,0,1,0 但是li是继承的,所以权重为0,而我们给li指定颜色pink,它的权重为0,0,0,1,所以颜色为粉色.(易错)

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

    面试题整理|45个CSS面试题

    Q11、在CSS中为元素分配某种颜色的方法有哪些 1、十六进制颜色码: 十六进制颜色码就是在软件中设定颜色值的代码。通过一个“#”开头的6位十六进制数值表示一种颜色。...z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:z-index 仅能在定位元素上奏效! 可能到值: auto——默认。...堆叠顺序与父元素相等。 number——设置元素的堆叠顺序。 inherit——规定应该从父元素继承 z-index 属性的值。...它可以改善容器中物品的对齐,方向和顺序,即使它们的尺寸是动态的,甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度,在不同的屏幕尺寸上最佳方式填充可用空间。...例如,使用选择器p span,浏览器首先找到所有元素,然后向上遍历其父元素直到根,找到 元素。对于特定的,只要找到 ,它就会知道匹配并且可以停止其匹配。

    4.2K30

    如何画一幅好图 - 2. 数据映射美学

    除了上图示例之外,还有许多其他美学在数据可视化中可能遇到,例如, 如果想显示文本,可指定字体系列(font family)和字体大小(font size) 如果图形对象重叠(overlap),可指定部分数据透明...,我们需要指定哪些数据值对应于哪些特定美学值。...如果图上包含 x 轴,那么我们需要指定哪个数据值沿着该轴落到的特定位置。 如果图上出现了形状或颜色,那么我们需要指定特定形状或颜色表示的数据值。...对于离散位置尺度,通常将不同的层级放置在沿轴线的相等间隔中,如果 该变量是有序的(比如月),那么需要以适当的顺序放置,从 Jan 到 Dec 该变量是无序的(比如地点),那么可以按任意顺序放置,这里我整体最冷...(Chicago)到整体最热(Death Valley)的顺序放置,产生“从上往下看颜色由深到浅”的感觉。

    79230

    10个数据可视化技巧,让你一看就懂!

    剩下的唯一事情是从 0 开始使用'ax'参数指定不同绘图的顺序。...类似的方式,我们还可以指定注释的对齐方式、字体大小和颜色,而「xytext」参数指示我们是否要在某个 x 或 y 方向移动注释。在上面的例子中,我们将在 y 轴上向下移动注释文本。...最好添加一些个性化的东西,如不同的颜色,并添加一个图例,表明它们具体代表的是哪一个。好吧,简单点: 设置「colour」标签,我们可以为每一个设置一种特定颜色。...在条形图中设置轴的顺序 最后是一个非常特殊的工具~如果你喜欢使用条形图,你可能会面临这样的问题:你的条形图没有按照你想要的顺序排列。...在这种情况下,有一个简单的修复方法,将一个带有你想要的特定顺序的列表传递给「order」参数: a=['second','first','third'] b=[15,10,20] sns.barplot

    2.3K10

    ​扫描二维码背后的原理和实现

    二、二维码的组成 二维码是一种矩阵式条码,是用某种特定的几何图形按一定规律在平面上分布的黑白相间的图形点组合。... Reed-Solomon码 为例,编码前需要先将数据进行CRC计算产生校验码,然后将信息与校验码一起进行编码。编码后会产生一串纠错码字。...3.2 层次结构分配 二维码的编码顺序是从右下角开始,按层次逐个分配的。分配时先确定当前层次的块数,然后顺序循环分配每一层的数据。 各层依次分配后,最终形成完整的二维码。...一般需要检测二维码区域的边缘、遍历像素判定颜色后确定各个块。...主要需要实现以下功能: 收集需要编码的内容 指定纠错级别 调用库函数生成含定位标记和数据信息的矩阵 按照编码色彩要求,将矩阵转换为黑白像素图片 python import qrcode data = '

    1.9K40

    NDK OpenGL ES 3.0 开发(十二):混合

    OpenGL ES 混合发生在片元通过各项测试之后,准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值,不再是新(源)片元直接覆盖缓冲区中的(目标)片元。...彼此元素相加:Cresult=Src+Dst ; GL_FUNC_SUBTRACT:彼此元素相减:Cresult=Src−Dst ; GL_FUNC_REVERSE_SUBTRACT:彼此元素相减,但顺序相反...通道各自设置不同操作符: void glBlendEquationSeparate(GLenum modeRGB,GLenum modeAlpha); 另外需要格外注意的是,开启混合和深度测试绘制透明物体时,需要遵循物体距观察者...未按照顺序绘制 由远到近顺序绘制 可以看出未按由远到近顺序绘制的结果,出现了透明物体遮挡了其他物体的奇怪现象,这是由深度测试造成的。...= sorted.rend(); ++it) { //遵循物体距观察者(Camera)的距离,由远到近开始绘制 UpdateMatrix(m_MVPMatrix, 0, 0 , 1.0,

    83230

    理解 OpenGL ES 混合

    OpenGL ES 混合发生在片元通过各项测试之后,准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值,不再是新(源)片元直接覆盖缓冲区中的(目标)片元。...彼此元素相加:Cresult=Src+Dst ; GL_FUNC_SUBTRACT:彼此元素相减:Cresult=Src−Dst ; GL_FUNC_REVERSE_SUBTRACT:彼此元素相减,但顺序相反...通道各自设置不同操作符: void glBlendEquationSeparate(GLenum modeRGB,GLenum modeAlpha); 另外需要格外注意的是,开启混合和深度测试绘制透明物体时,需要遵循物体距观察者...未按照顺序绘制 由远到近顺序绘制 可以看出未按由远到近顺序绘制的结果,出现了透明物体遮挡了其他物体的奇怪现象,这是由深度测试造成的。...= sorted.rend(); ++it) { //遵循物体距观察者(Camera)的距离,由远到近开始绘制 UpdateMatrix(m_MVPMatrix, 0, 0 , 1.0,

    1.2K20

    简单了解下无障碍设计模式

    使用颜色、形状、文本和动效来传达正在发生的事情 访问你的应用:包含适当的内容标签,适应那些使用纯文字版本的用户 具体的 支持特定平台的辅助技术,就像支持触摸、键盘和鼠标的输入方式一样。...错误示例 这些文本没有遵循颜色对比度建议,在它们的背景色中很难进行阅读。 图标或其他关键元素也应使用上述推荐的对比度。 正确示例 这些图标遵循颜色对比度建议,和它们的背景色之间有清晰的对比。...错误示例 这些图标没有遵循颜色对比度建议,在它们的背景色中很难进行阅读。...其他视觉提示 对于色盲或看不到颜色差异的用户,除了颜色外还增加了设计元素,确保他们能接收到和正常人等量的信息。 色盲症分不同的类型(包括红绿色盲、蓝黄色盲和单色色盲)。...焦点顺序 输入焦点应该按照视觉布局的顺序排列,从屏幕顶部到底部。它应该从最重要的项目到最不重要的项目进行遍历。

    4.8K40

    网页编码显示与CSS加载

    用两个空格来代替制表符(tab),嵌套元素应当缩进一次(即两个空格); 属性的定义确保全部使用双引号,绝不要使用单引号 不要省略可选的结束标签(closing tag),除了单标签还是需要注意在其尾部加上斜线; 尽量遵循...HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。 #class 用于标识高度可复用组件,因此应该排在首位。...对于逗号分隔的属性值每个逗号后面都应该插入一个空格(例如,box-shadow)。 为选择器分组时,将单独的选择器单独放在一行,声明块的右花括号应当单独成行。...对于属性值或颜色参数省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)并且避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;...声明顺序: Positioning : 定位 Box model : 模型 Typographic : 字体颜色 Visual : 背景边框 Misc : 其他 基础实例: /* Use link

    1.6K20

    Flutter 构建完整应用手册-设计基础知识 顶

    使用主题共享颜色和字体样式 为了在整个应用中共享颜色和字体样式,我们可以利用主题。定义主题有两种方式:应用程序范围或使用Theme小部件来定义应用程序特定部分的颜色和字体样式。..., primaryColor: Colors.lightBlue[800], accentColor: Colors.cyan[600], ), ); 请参阅ThemeData文档查看您可以定义的所有颜色和字体...注意:顺序很重要,必须与TabBar中的选项卡顺序相对应!...4.在特定的部件中使用字体 如果我们想将字体应用于特定的部件,比如Text部件,我们可以向部件提供一个TextStyle。 在这个例子中,我们将RobotoMono字体应用于单个Text部件。...Scaffold部件为遵循Material Design Guidelines的应用程序提供了一致的可视化结构。

    7.1K10

    CSS 三大特性

    是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况...一般情况下,如果出现样式冲突,则会按照CSS书写的顺序最后的样式为准。 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。...样式不冲突,不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。...权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。 ​ CSS定义了一个!important命令,该命令被赋予最大的优先级。...同一类选择器则遵循就近原则。 总结:权重是优先级的算法,层叠是优先级的表现

    52820

    让老板和客户一看就懂 ,赞不绝口的10个数据可视化技巧

    剩下的唯一事情是从 0 开始使用'ax'参数指定不同绘图的顺序。...类似的方式,我们还可以指定注释的对齐方式、字体大小和颜色,而「xytext」参数指示我们是否要在某个 x 或 y 方向移动注释。在上面的例子中,我们将在 y 轴上向下移动注释文本。...最好添加一些个性化的东西,如不同的颜色,并添加一个图例,表明它们具体代表的是哪一个。好吧,简单点: 设置「colour」标签,我们可以为每一个设置一种特定颜色。...10.在条形图中设置轴的顺序 最后是一个非常特殊的工具~如果你喜欢使用条形图,你可能会面临这样的问题:你的条形图没有按照你想要的顺序排列。...在这种情况下,有一个简单的修复方法,将一个带有你想要的特定顺序的列表传递给「order」参数: a=['second','first','third'] b=[15,10,20] sns.barplot

    1.8K20

    plotly-express-1-入门介绍

    列中的值用于提供跨动画帧的联动匹配; category_orders:带有字符串键和字符串列表值的字典,默认为{},此参数用于强制每列的特定值排序,dict键是列名,dict值是指定的排列顺序的字符串列表...当参数color指定的列不是数值数据时,该参数为color列指定颜色序列,若category_orders参数不为None,则按category_orders中设定的顺序循环执行color_discrete_sequence...当参数color指定的列不是数值数据时,该参数用于将特定颜色分配给,与特定值对应的标记,color_discrete_map中的键为color表示的列值。...当参数color指定的列是数值数据时,为连续色标,设置指定颜色序列。...该参数用于将特定符号分配给,与特定值对应的标记,symbol_map中的键为symbol表示的列值。

    11.5K20

    plotly-express-4-常见绘图参数

    列中的值用于提供跨动画帧的联动匹配; category_orders:带有字符串键和字符串列表值的字典,默认为{},此参数用于强制每列的特定值排序,dict键是列名,dict值是指定的排列顺序的字符串列表...当参数color指定的列不是数值数据时,该参数为color列指定颜色序列,若category_orders参数不为None,则按category_orders中设定的顺序循环执行color_discrete_sequence...当参数color指定的列不是数值数据时,该参数用于将特定颜色分配给,与特定值对应的标记,color_discrete_map中的键为color表示的列值。...当参数color指定的列是数值数据时,为连续色标,设置指定颜色序列。...实际上,color指定列时,px会自动匹配颜色:1)若指定列是数值数据,通过参数color_continuous_scale可以设定具体的颜色序列;2)若指定列是非数值数据时,通过参数color_discrete_sequence

    5.1K10

    PDF Explained(翻译)第一章 简介

    流式创建和增量更新 流式创建允许PDF文件按照从头至尾的顺序创建,即使文件比可用内存要大也没不会有任何问题。 增量更新意味着在编辑文件时,可以直接将更改写入文件末尾而无需改动现有内容。...限制有: 不能加密 所有字体内嵌 必须有元数据(Metadata) 不得使用JavaScript 设备无关的方式指定色彩空间 无音视频内容 PDF/X PDF/X是一系列用于印刷行业图形交换的标准。...(译者注:专色是指在印刷时,不是通过印刷C、M、Y、K四色合成这种颜色,而是专门用一种特定的油墨来印刷该颜色。)...这使得第三方可以在文档中保存与其特定工作流或产品相关的信息。 导航 文档大纲,通常称为文档的书签。 ?...阅读器可以对遵循这些约定的文档进行重排版,不同的页面或字体大小显示同样的文本。 ? 安全 PDF文档可以使用RC4或AES方式进行加密。有两种权限的密码,所有者密码和使用者密码。

    1.7K20

    【GIT版本控制】--高级GIT配置

    自定义Git命令: 你可以编写自定义Git命令,执行特定的操作。这需要创建一个可执行文件,并将其放置在系统的可执行路径下。通过这种方式,你可以添加新的Git命令,简化工作流程或执行复杂的任务。...例如,你可以指定不同文件的合并策略、文本编码、换行符等属性,适应不同的项目需求。 自定义比较和合并工具: 你可以配置Git使用自定义的比较和合并工具,更好地处理冲突解决和合并操作。...自定义颜色: Git允许你自定义命令输出的颜色。你可以在配置文件中定义不同命令的颜色主题,增强可读性。...另一方面,自定义Git行为提供了更灵活的方式来适应项目需求,包括自定义Git命令、Git钩子、颜色和比较工具等。这些高级配置选项可以让你更好地控制和管理Git的行为,满足特定工作流程和项目的要求。...不过,在使用这些自定义配置时,务必谨慎,并确保团队成员了解和遵循这些配置,维护一致性和协同工作。

    17130

    Human Interface Guidelines —— Image Views & Maps & Pages

    在image view中,可以对图像进行拉大,缩小,调整大小适应特定位置。 Image view默认为非交互式。...·如果可能,请确保动画序列中的所有图像的大小一致 理想情况下,应该预先调整图像适合view,以便系统不必进行任何缩放。...·一般来说,保持地图可交互 人们习惯于使用手势与地图app交互,并希望能够类似的方式与地图进行交互。 ·使用用户习惯了的pin颜色。 一个pin标识您地图上的兴趣点。...人们熟悉地图应用中的标准pin颜色。 避免在app中重新定义这些颜色的含义。 对于目的地使用红色,对于起始位置使用绿色,对于用户指定的位置使用紫色。...当使用page view控制器时,页面按顺序流动,并且无法在不相邻页面之间跳转。 如果人们需要在app中不按顺序访问页面,请实现提供此功能的自定义控件。

    99470

    一文爱上可视化神器Plotly_express

    列中的值用于提供跨动画帧的联动匹配; category_orders:带有字符串键和字符串列表值的字典,默认为{},此参数用于强制每列的特定值排序,dict键是列名,dict值是指定的排列顺序的字符串列表...当参数color指定的列不是数值数据时,该参数为color列指定颜色序列,若category_orders参数不为None,则按category_orders中设定的顺序循环执行color_discrete_sequence...当参数color指定的列不是数值数据时,该参数用于将特定颜色分配给,与特定值对应的标记,color_discrete_map中的键为color表示的列值。...当参数color指定的列是数值数据时,为连续色标,设置指定颜色序列。...该参数用于将特定符号分配给,与特定值对应的标记,symbol_map中的键为symbol表示的列值。

    3.9K10

    CSS三大特性

    是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况...就近原则 一般情况下,如果出现样式冲突,则会按照CSS书写的顺序最后的样式为准。 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。...权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。 CSS定义了一个!important命令,该命令被赋予最大的优先级。...同一类选择器则遵循就近原则。 总结:权重是优先级的算法,层叠是优先级的表现

    72140
    领券