(一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度 regsiter 状态:status 投票:vote 合作伙伴:partner (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名 : (1)颜色:使用颜色的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600 主要的 master.css 模块 module.css 基本共用 base.css 布局,版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119319
亮蓝色:#409EFF success: #67C23A warning: #E6A23C danger: #F56C6C info: #909399
2核2G云服务器首年95元,GPU云服务器低至9.93元/天,还有更多云产品低至0.1折…
CSS 命名规范 页面外围控制整体布局宽度:wrapper 页头:header 页面主体:main 内容:content 页脚:footer 导航:nav 主导航:mainbav 子导航:subnav
一、Css命名法: 1.驼峰命名法:除第一个单词的首字母小写之外,其余的单词首字母均大写。如:#headBlock(2). 2.帕斯卡命名法:所有单词的首字母均大写。 如:#HeadBlock(3). 3.匈牙利命名法:在名称前加上一个或多个小写字母作为前缀.如:#head_Navigation; 二、页面模块常用CSS命名 头:header 热点:hot 内容:
颜色(Color) 1.1. 具名颜色 1.2. RGB 1.3. HSL 2. 背景(Background) 2.1. 颜色(Color) CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。 具名颜色 如果只想使用基本的颜色,最简单的方法是使用颜色的名称。CSS 把这种颜色称为具名颜色(named color)。 CSS 规范 颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义: 十六进制符号 #RRGGBB 和 #RGB 三位数的 RGB 符号(#RGB)和六位数的形式(#RRGGBB 参考: 《CSS 世界》 《CSS核心技术详解》 《CSS权威指南 第四版 上册》 color: https://developer.mozilla.org/zh-CN/docs/Web/CSS/
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家。 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。 ? 它表示一个具体的颜色值,且它不区分大小写。譬如这样 color:red 的 red 即是一个色彩关键字。 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是: ? 哪些属性可以设置颜色 所有可以用到颜色值的地方,都可以用色彩关键字替代,那么在 CSS 中,什么地方可以用到颜色值呢? 值得注意的是: 在 CSS3 之前,transparent 关键字不是一个真实的颜色,只能用于 background-color 和 border-color中,表示一个透明的颜色。 和 transparent 一样,它也是一个关键字,顾名思义,它表示当前颜色。它来自自属性或者继承于它的父属性。 可以简单的理解为当前 CSS 标签所继承或设定的文本颜色,即 color 的值。
mn 主栏子容器 mainc mnc 侧栏 side sd 侧栏子容器 sidec sdc 盒容器 wrap/box wrap/box 模块 module (.m-), unit (.u-) 语义 命名 vote vote 版权 copyright cprt 结果 result rst 标题 title tt 按钮 button btn 输入 input ipt 功能 function (.f-) 语义 命名 vam 溢出隐藏 overflowhidden oh 完全消失 displaynone dn 字体大小 fontsize fs 字体粗细 fontweight fw 皮肤 skin (.s-) 语义 命名 简写 字体颜色 fontcolor fc 背景 background bg 背景颜色 backgroundcolor bgc 背景图片 backgroundimage bgi 背景定位 backgroundposition bgp 边框颜色 bordercolor bdc 状态 .z- 语义 命名 简写 选中 selected sel 当前 current crt 显示 show show 隐藏 hide hide 打开
在 CSS 中,颜色无处不在,它可以作为文字、背景、阴影、表格、边框、链接等属性。 我们在 CSS 中使用的大多数颜色都是 hex 和 RGB,其实表示颜色的方式有很多,下面就来看看CSS中的颜色体系。 1. CSS 命名颜色 CSS中提供了148个命名颜色,所有浏览器都支持这些名称,这些名称都是被预定义过色值的。 除了颜色名称,还有一些其他命名的颜色和关键字值得一提: (1)transparent transparent关键字用作rgba(0, 0, 0, 0)的快捷方式,它表示完全透明。 Hex 颜色 我们还可以使用十六进制值来表示 CSS 中的颜色,这也是我们用的最多的颜色表示方式。
前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论 在 css 定义时,也必须依靠层级选择器来限定约束作用域,以避免跨组件的样式污染。 ,模块层级关系简单清晰,而且 css 书写上也不必作过多的层级选择。 important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来的便利来说,我们应客观看待。 组件级作用域的编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同的组件生成不同的属性选择器。
webkit-text-fill-color: transparent 使用透明颜色填充文本。 webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。 device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>CSS3 渐变字体</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/<em>css</em>/bootstrap.min.<em>css</em> script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/<em>css</em>
网站设计师在设计网页时,有时将一块图片设计成灰色,鼠标移上去,图片就有颜色。一般的逻辑是做两张图片,然后在鼠标上做图片切换事件。 // HTML CSS .grayscale img{filter: grayscale(100%); -webkit-filter
颜色是网页设计中非常重要的一部分,如果一个网站中使用了太多了颜色显然是不太好的,那么如何检查网页的 CSS 文件中使用了几种颜色,显然不能一行一行查看 CSS 代码,我们需要一个自动化工具,CSS Prism CSS Prism 是一个在线 CSS 颜色查看服务,你只需按输入任何 CSS 文件地址,他就会扫描 CSS 文件中所有的 16 进制颜色代码并显示他们,然后你可以通过一个类似于 Photoshop 颜色选择器(使用 jQuery 的 color picker 插件)让你编辑不需要的颜色,并提供修改之后的 CSS 文件下载。 可以定位所有颜色在 CSS 中的位置。 可以在线编辑颜色,并且通过白色调和暗色调两种方式查看颜色。 CSS Prism 是我使用比较多的服务,我用它来查看博客中 CSS 的所有的颜色,然后通过查看去掉比不要的颜色,使得博客中的颜色尽可能的少,如上图我的博客只使用了7种颜色。
好吧,我的代码虽然实现了和设计一样的界面,但是还是太臭了,类的命名都是特别的差劲。。找了命名规范,,拿来共享一下,警告自己,,代码不仅要实现功能,更要优美,华丽。。 每次写之前写之后都想办法精简代码, 3:阅读的习惯是一眼能看完,整个结构和内容,上下太长则每一行多放一些,左右太长则分行, 4:命名上,要体现层级关系,例如 主层idcade,内层idcade-left CSS命名规范(规则) 常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度 五、CSS样式表文件命名 主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
我们可能会有改变input光标颜色的需求,谷歌浏览器的默认光标颜色是黑色的,我们可以看到GitHub上的光标却是白色,那么这个用CSS怎么改变呢? ? ? ---- 这种效果有两种实现方式: 1.使用color来实现 光标的颜色是继承自当前输入框字体的颜色,所以用color属性即可改变: input{ color:red; } ? 2.使用caret-color来实现 上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用caret-color属性: input{ caret-color
CSS设置背景颜色透明 将背景颜色设置为透明,两种方法: 方法一:通过background-color和opacity来设置 opacity属性参数的不透明度是以数字表示的,从0.0到1.0,完全透明是 { width: 200px; height: 200px; background-color: brown; } </style> 效果: 如果盒子中有文字的话,文字会和背景颜色一起变透明 方法二:通过rgba方式设置背景颜色透明 rgba颜色,就是RGB三原色加ALPHA,在给背景添加颜色的同时,提供透明度特性。
原文地址:http://eux.baidu.com/blog/fe/控制图标颜色 背景 实际项目中,一般都会遇到不同颜色的图标,例如 ? ? 导航栏图标的不同状态 方法 方法1 需要UI设计师给出不同颜色的图标,在不同状态下设置不同的元素背景。 .icon { background-image: url(. 合成雪碧图需要工作量;2.多了个图标,增加雪碧图的体积 方法3 CSS3投影---filter:drop-shadow(color, X-offset, Y-offset) color:投影的颜色 X-offset height: 64px; display: inline-block; background-blend-mode: lighten; } 图标(注意要求是黑色的图标)设置图片背景和颜色背景 本例子中,黑色的图标和其他颜色的背景色叠加,自然显示背景色 ? 优点:写法简洁 缺点:兼容性不好
BEM即块(Block)、元素(Element)、修饰符(modifier),是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。 BEM命名约定更加严格,而且包含更多的信息,一般用于团队开发一个耗时的大项目中。 我们常见的BEM命名方式一般都是经过改良的,本文介绍的是Nicolas Gallagher(Twitter前端工程师)的改进版。 -- 女性的右手 -->
1.打开PyCharm–>File–>Setting . 2.更改为你想要的背景颜色 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/174387.html原文链接
CSS3颜色特性 “佛靠金装,人靠衣装”,网页也是如此。随着互联网的迅速发展,一个网页给人们留下的第一印象,既不是它的内容,也不是它的设计, 而是整体颜色。 减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡, 这样与补色相关的两种颜色混合就会出现彩色的情况。 CSS3 颜色模式在 CSS2. 的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA: RGBA在RGB基础上增加了控制alpha透明度的参数,其中RGB颜色模式( 也称为三原色) 是工业界的一种颜色标准,通过对红( R)、绿 ( G)、蓝( B) 三个颜色通道的变化以及它们相互之间的叠加得到各种颜色,RGB几乎包括人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
颜色对于 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 是一种令人惊讶的难以掌握的语言。
云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。
扫码关注腾讯云开发者
领取腾讯云代金券