展开

关键词

Css样式

我不知道是否有人严格按照一定的css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性对性能有什么影响。 我一直坚信,前端的性能优化都是从细节堆出来的,不注意css属性的确实也可以实现我们需要的各种操作,但是慢慢的让自己遵从最优的法,提高自己或者是优秀自己还是有必要的。 讲之前,我们先要知道浏览器渲染页面的过程,之前有过一篇文章了,这边简单提一下:1.解析HTML构建DOM树2.解析CSS构建CSSOM树3.将DOM树和CSSOM树合并构建render树4.布局5 .绘制6.重排reflow7.重绘repaint整体来说,页面渲染初始过程涉及到2、3、4,我们推荐的是这样的:位置属性:position display float left top right 简单说就是位置和尺寸会涉及重排,颜色等会涉及重绘,初始化过程中我们当然是尽量避免重排和重绘,所以按照css样式,有助于性能的优化,页面的渲染。(完)

21410

CSS 代码的规范、

本文来自设计达人网站,Jeff 看到该文感觉非常有必要学习分享,so,转载在这里,感谢原作者——了这么久的CSS,但大部分前端er都没有按照良好的CSS规范来CSS代码,这样会影响代码的阅读体验 ,这里设计达人网总结一个CSS规范、CSS供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对CSS的前端用户来说是值得学习的。 CSS位置属性(position, top, right, z-index, display, float等)大小(width, height, padding, margin)文字系列(font CSS规范使用CSS属性CSS有些属性是可以缩的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。??去掉小数点前的“0”?? 简命名很多用户都喜欢简类名,但前提是要让人看懂你的命名才能简哦!??16进制颜色代码缩有些颜色代码是可以缩的,我们就尽量缩吧,提高用户体验为主。??

76390
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年50元,还有多款热门云产品满足您的上云需求

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

    SQL查询语句的和执行

    1、一个完整SQL查询语句的-- mysql语句编1 select distinct *2 from 表(或结果集)3 where …4 group by …having…5 order 2、一个完整的SQL语句执行 上图的解释如下: 3、关于select和having执行谁前谁后的说明谁要是有说服我的说法,麻烦留言告知我一下,谢谢。

    7740

    css规范

    属性的要有一定的规律。 FlowPositioningDimensionsMargins, Padding, Borders, OutlineTypographic StylesBackgroundsOpacity, Cursors, Generated Content 从上到下的示例

    24640

    css规范

    在前端领域,CSS(层叠样式表:Cascading Style Sheets)是绕不过的话题。“样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。 样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。虽然CSS初学者易于上手,且趣味性十足,但是作为一项工程而言,还是需要有一定规范约束的。 这里简单介绍下关于css的一些规范。1. 一般而言css都有一定的,而不是想起来什么属性说明属性。 一般css为:位置(z-index position top display float ...)大小边距(width padding margin ...)文字(font line-height 注意缩,就是属性名及属性值,能缩则缩

    13520

    HTML&CSS规范

    第一部分:HTML规范:1.1 HTML整体结构:1.1.1:HTML基础设施:文档以首行顶格开始,推荐使用;文档必须申明编码charset,与文件本身编码保持一致,推荐;根据页面内容和需求适当填 1.1.2:结构与视觉基本保持一致按照从上到下,从左到右的进行HTML;有时候为了便于搜索引擎抓取,我们要将重要内容在HTML结构中提前;用div替代table布局;当需要一些表现形式为表格的数据 ,使用1.1.3:结构(html),表现(css),行为(js)三者分离,避免内联使用link将css文件引入,置于head中;使用script将js文件引入,置于body底部。 删除冗余的行尾的空格使用4个空格代替1个Tab(大多数编辑器均可设置)对于内容较为简单的表格,建议将成单行大的模块之间,可以使用空行隔开,使结构更为清晰另外,请做到下列几点:结构上可以并列,就不要嵌套 如:如果可以

    365100

    CSS样式声明

    来自Bootstrap中文网编程规范相关的属性声明应当归为一组,并按照下面的排列:PositioningBox modelTypographicVisual.declaration-order { 完整的属性列表及其排列请参考 Recess。

    66360

    CSS 样式规范

    可能不同团队都有各自的规范,又或者很多人在 CSS 的时候还是想到什么就什么,不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要。 本文的所列是实践当中得出的一套比较不错的 CSS 规范,并不希望大家完全采用,而是希望可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范。也希望可以有更多的建议,共同的完善。 不建议使用下划线 _ 进行连接节省操作,输入的时候少按一个 shift 键能良好区分 JavaScript 变量命名字符小定义的选择器名,属性及属性值的皆为小。 color: #ffcc00 color: #fc0 样式属性单个样式规则下的属性在时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic > Visual 的,提高代码的可读性。

    42870

    我想推荐一本CSS 世界》

    前段时间张鑫旭老师的《css 世界》出版,之前看过他的博客,的挺好的,一直就在思考要不要买?有一次逛微博,我看到有人晒了这本。 即使每次都能实现效果,但是代码不美观,可塑造性很强;再看这本的时候,我自个一个劲的在感叹这的真好。如果当年我入门 CSS 是看这本该多好呀! “这的真好” ,我的 css 基础得到了进阶;简单介绍中的几个例子改变水平流向的 direction改变了我以前布局只知道用 float 的局限。 之所以会这样是因为 direction 属性默认有这么一个特性,即可以改变替换元素或者 inline-block inline-table 元素的水平呈现;原文链接最后再说一个例子,我们要一款confirm 图12-2 移动端如果你来实现,你会如何处理这种不同设备、不同按钮的问题呢?

    78910

    CSS 世界中的方位与

    还有一种情况是从x方位到x方位,譬如 writing-mode、direction,它代表了一种,表示块流动方向,或者文字的方向等。 本文将捋一捋 CSS 世界中的方位与,探寻其中一些有意思的点。 可以看到,direction 可以改变子元素的排列方向,但是它确无法改变单段文本内(或是内联元素内),每一个文字的。 那如果,我希望 这是一段正常的文本 这段文字,不是从左向右进行,而是反过来,从右到左进行,又该如何设置呢?unicode-bidi 示意这就需要请出 unicode-bidi 了。 单独使用 direction: rtl 无法使单段文本内(或是内联元素内),文字的改为从右至左。需要配合 unicode-bidi。

    8440

    前端吐血推荐的必读

    总结:所以对于 css 来说,《Head First HTML与CSS(第2版)》是入门,权威指南是基础,css 揭秘是进阶,可以按照这个来阅读。 这本是红宝作者的又一部经典著作,ES6 进阶用。《JavaScript设计模式与开发实践》--豆瓣评分 9.1。 总结:阅读建议从《javascript语言精粹》-> JavaScript DOM编程艺术(第2版)》-> 《JavaScript高级程设计》和 《JavaScript权威指南》-> 《ES6 标准入门 其他几本没的就可以在学完基础都可以看着的。根据自己当时的需要来选择性阅读。框架 《深入 React 技术栈》-- 豆瓣评分 8.3。 虽然这本是进阶之路,但是其实这本还是适合新手看的,从入门到进阶吧,这本是 React 16 版本的,16 的新特性也都到了,新手想学 React 的这是一本不错的哦。

    1.8K40

    良好的CSS编码习惯

    同样,在 css 的世界里,代码的排列布局也是非常重要的。良好的代码习惯能够让代码看起来更加干净简洁,给阅读者一种赏心悦目的感觉;好的代码便于开发发现错误,提高工作效率。 比如声明的、属性和值的法以及一些个例等。声明的css 中存在好几百个属性,如果需要一个 css 规则里几乎可以满这些属性。 如果这些声明毫无章法可言,那么在需要修改的时候就会非常的头痛了,一大块声明杂在一个规则里,你就需要慢慢地找慢慢地看了。但是如果你的声明都是按照一定的逻辑,那么声明的层次就非常清晰。 声明的时候一般比较重要的属性会优先。如果包含了 content属性,则应该最优先,即到声明块的最上面。 这些属性在 css 里被称为复合属性,又因为一个属性包含了多个独立属性,所以在的时候使得代码更加简洁,所以又喜欢称其为简属性,这里的简也可以理解为动词。

    8120

    HTML规范 - 整体结构

    HTML基础设施 NEC:更好的CSS方案 文件应以“”首行顶格开始,推荐使用“”。必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码。 根据页面内容和需求填适当的keywords和description。页面title是极为重要的不可缺少的一项。结构和视觉基本保持一致 按照从上至下、从左到右的视觉HTML结构。 有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构上提前。用div代替table布局,可以使HTML更具灵活性,也方便利用CSS控制。 结构、表现、行为三者分离,避免内联 使用link将css文件引入,并置于head中。使用script将js文件引入,并置于body底部。保持良好的简洁的树形结构 热门标签 ... 对于内容较为简单的表格,建议将tr成单行。你也可以在大的模块之间用空行隔开,使模块更清晰。另外,请做到以下几点 结构上如果可以并列,就不要嵌套。

    21710

    HTMLCSS 第四章

    学习目标三种样式表的位置和优缺点标签的三种显示模式和转换复合选择器背景属性css的三大特性样式表的位置样式表可以有三种方式,分别分为内嵌式样式表外链式样式表行内式样式表内嵌式样式表内嵌式样式表是在 html里面嵌套一个style标签,将css语句都在style标签里面 css语句 外链式样式表单独创建一个后缀名为.css的文件,在html文件里面通过link标签引入css文件 行内式样式表将样式直接在标签本身上 默认值 图片跟随盒子一起滚动2.fixed 图片不跟随盒子一起滚动 背景位置background-position: 背景位置; 1.方位名词 right top left center bottom 不论 Y轴垂直向下 2、注意3.百分比 百分比参照的自身盒子的宽高: 最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比4.还可以混是需要考虑 背景的简background 爸爸 儿子 孙子 层叠性后渲染的css样式会覆盖掉先渲染的css样式 (权重相同的情况下) 注意:层叠性真针对css位置,类的调用位置先后会它没有影响 .box1 { * 最终绿色起效果 * color

    28420

    JAVA通过epublib解析EPUB格式的电子

    epublib 解析库epublib:a Java library for reading and writing epub files (一个用于读 epub 文件的 Java 库)GitHub: 通过 book 对象可以获取 resource,Metadata 等具体内容2.Resource 表示电子内容资源, 一个 Resource 就是电子的一部分内容,这资源信息可以是 html,css 比如,作者,出版社,语言等;5.Spine 电子的 resource ,有人说是目录信息,其实不是,是 resource 的阅读,是线性结构的6.TableOfContent 电子的目录信息 (内容资源数量为:+contents.size()); 获取到本的spine资源 线性排 Spine spine = book.getSpine(); System.out.println(spine 2 资源当中可能会存在图片和css等等,不在目录或者spine当中的内容,可以通过Resources.getByHref等方法获取。作者:海加尔金鹰

    84410

    前端项目规划与团队管理

    文件规范:文件分类、文件引入、文件本身文件分类主要指将资源文件按照业务或功能进行文件夹分类;文件引入指 CSS 文件的引入方式,行内样式不推荐,外联引入和内联引入;文件本身包括文件的命名(下划线大小) 命名规范:分类命名、命名格式、语义化命名分类命名中可以通过分类来对 CSS 类进行命名,比如 g- 前缀代表全局类,m- 前缀代表模块类;命名格式,建议全部小,对命名长度进行衡量,要一眼能够看出名字的意义 ;语义化命名,以内容语义来命名 CSS 类名。 规范:单行多行、空格分号、属性、Hack 方式、值格式单行多行,CSS 的单行多行各有利弊;空格分号,CSS 多行必须缩进,单行在属性名冒号和结尾分号之后加入空格,每一条规则都要以分号结尾 ;属性,先显示,后盒模型相关属性,文本属性,修饰属性;Hack 方式:统一各种浏览器的 Hack 方式;值格式:比如 color 属性的取值使用十六进制格式,url 属性的值是否带单引号或双引号

    48520

    CSS引入方式

    HTML5学堂:CSS引入方式存在三种,分别为标签内联、页面头部、外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势。 1、外部引入:在HTML的head部分,引入外部的CSS文件;优势:一个CSS文件可控制多个页面易改版、便于维护减少代码量、代码简洁规范易于分工协作有效利用缓存机制劣势:相对于单页有垃圾代码外部引入中的 href属性会给服务器造成请求的压力示例: HTML5学堂 2、头部:在head部分加入 标签,CSS代码就在标签内(style是表明引入文件类型的标签;type是表明文件类型;)优势:速度快,没有服务器请求压力相对于外部引入单页代码量少劣势 :不易改版与维护代码较乱不易前后台沟通 示例: HTML5学堂 *{CSS样式} 3、在标签内直接CSS:直接把css标签在页面标签里;优势:优先级最高劣势:冗余代码多,代码量大不利于维护示例:HTML5 学堂4、使用@import引入CSS劣势:在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)在IE中使用@import 将会引起文件的下载被改变。

    43460

    我们不一样

    CSS揭秘》--豆瓣评分9.4。神,47 个 CSS 技巧让你在面对各种 CSS 问题的时候游刃有余。豆瓣评分 9.4 ,是 CSS 籍中评分最高的了,CSS 进阶必备。 总结:所以对于 css 来说,《Head First HTML与CSS(第2版)》是入门,权威指南是基础,css 揭秘是进阶,可以按照这个来阅读。 这本是红宝作者的又一部经典著作,ES6 进阶用。《JavaScript设计模式与开发实践》--豆瓣评分 9.1。 总结:阅读建议从《javascript语言精粹》-> JavaScript DOM编程艺术(第2版)》-> 《JavaScript高级程设计》和 《JavaScript权威指南》-> 《ES6 标准入门 其他几本没的就可以在学完基础都可以看着的。根据自己当时的需要来选择性阅读。框架《深入 React 技术栈》-- 豆瓣评分 8.3。

    17920

    css推荐

    每个样式属性后加 ;为了的一致性,还有就是避免出现不必要的问题3. 禁止使用css原生import使用css原生import有很多弊端,比如会增加请求数等....Dont use @import9. 属性的推荐, 如:.selector { * Positioning * position: absolute; z-index: 10; top: 0; right: 0; * Display 常见的有:display position left top float 等 盒模型相关, 常见的有:width height margin padding border 等 其他属性 ,按照这样的提升浏览器渲染 链接的样式,务必按照这个1. a:link2. a:visited3. a:hover4. a:active

    45120

    CSS编码规范

    单行形式风格的排版约束1.每一条规则的大括号 { 前后加空格2.多个selector共用一个样式集,则多个selector必须成多行形式3.每一条规则结束的大括号 } 前加空格4.属性名冒号之前不加空格 多行形式风格的排版约束1.每一条规则的大括号 { 前添加空格2.多个selector共用一个样式集,则多个selector必须成多行形式3.每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 冒号之后加空格5.属性值之后添加分号;其他规范1.使用单引号,不允许使用双引号2.如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照webkit- -moz- -ms- -o- std的进行添加 命名规则规范1、规则命名中,一律采用小加中划线的方式,不允许使用大字母或 _2、命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合3、命名注意缩,但是不能盲目缩,具体请参见常用的CSS 11、每一条规则应该确保选择器唯一,禁止直接为全局.nav.header.body等类设置属性属性编推荐的样式编1、显示属性displaylist-stylepositionfloatclear2

    633150

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券