展开

关键词

css书写规范

样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。 虽然CSS初学者易于上手,且趣味性十足,但是作为一项工程而言,还是需要有一定规范约束的。 这里简单介绍下关于css的一些规范。 1. 书写顺序 一般而言css都有一定的书写顺序,而不是想起来什么属性写说明属性。 一般css书写顺序为: 位置(z-index position top display float ...) 大小边距(width padding margin ...) 常见css文件命名表 css名 表示规则 base.css 基础样式表 common.css 公用 themes.css 主题 reset.css 重设 font.css 文字 layout.css 版面 module.css 模块 column.css 专栏 ...

19120

CSS书写顺序

CSS书写顺序 整理了一下自己写CSS时的顺序,跟大家分享下。

8240
  • 广告
    关闭

    开发者专享福利,1988元优惠券限量发放

    带你体验博客、网盘相册搭建部署、视频渲染、模型训练及语音、文字识别等热门场景。云服务器低至65元/年,GPU15元起

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

    css书写规范

    属性的书写顺要有一定的规律。 Padding, Borders, Outline Typographic Styles Backgrounds Opacity, Cursors, Generated Content  从上到下的书写顺序示例

    27940

    Css样式书写顺序

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

    40410

    CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要。 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是希望可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范。 也希望可以有更多的建议,共同的完善。 不建议使用下划线 _ 进行连接 节省操作,输入的时候少按一个 shift 键 能良好区分 JavaScript 变量命名 字符小写 定义的选择器名,属性及属性值的书写皆为小写。 > Visual 的顺序书写,提高代码的可读性。 所以,合理的书写新样式选择器,是完全可以规避一些看似需要使用 !important 的情况的。 代码注释 单行注释 星号与内容之间必须保留一个空格。

    55370

    HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<! ,使用

    1.1.3:结构(html),表现(css),行为(js)三者分离,避免内联 使用link将css文件引入,置于head中; 使用script将js文件引入,置于body底部。 ,就不要嵌套书写。 资源型"内容的可访问性和可用性 在资源的内容上加上描述文案,比如img添加alt属性,在audio加上文案和链接 1.2.3  加强“不可见”内容的可访问性 背景图片上的文字应该同时写在html中,并使用css 使其不可见,有利于搜索引擎抓取内容,同时CSS失效时可以看到内容 1.2.4  以字符实体代替与HTML语法相同的字符,避免浏览器解析错误 更多HTML规范:参考链接 第二部分:CSS书写规范 参考链接

    402100

    CSS 代码的书写规范、顺序

    本文来自设计达人网站,Jeff 看到该文感觉非常有必要学习分享,so,转载在这里,感谢原作者——写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验 ,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。 CSS书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列( CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。 ? ? 去掉小数点前的“0” ? ? shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标籤页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧

    1.5K90

    Python一些书写技巧

    简介 本文介绍了一些平时用到的Python书写技巧。之后会不断更新。

    9510

    引入CSS样式表(书写位置)

    内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type="text/<em>CSS</em>">   选择器 { 其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。 ="CSS文件的路径" type="text/CSS" rel="stylesheet" /> </head> 注意: link 是个单标签哦!!! type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。 三种样式表总结 样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少) 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面

    28340

    如何规范 CSS 的命名和书写

    CSS书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列( 书写规范使用CSS缩写属性 CSS有些属性是可以缩写的,如下这样精简代码同时又能提高用户的阅读体验。 subnav菜单menu子菜单submenu搜索search友情链接friendlink页脚footer版权copyright滚动scroll内容content标签tags文章列表list提示信息msg小技巧 loginbar注册register搜索search功能区shop标题title加入joinus状态status按钮btn滚动scroll标籤页tab文章列表list提示信息msg当前的current小技巧 CSS样式表文件命名 主要的master.css模块module.css基本共用base.css布局、版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css

    6620

    展望未来:使用 PostCSS 和 cssnext 书写 CSS

    它的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点树,这可以通过 javascript 来控制(也就是插件发挥作用)。然后返回修改后的树并保存。 当书写 Sass 时,我们可以用函数将 px 转换成 rem : /* input */ .selector { margin-bottom: rem(20px); } /* output, assuming 因为是后处理的缘故,我们不需要任何函数来编译CSS。我们可以直接书写 px ,它可以自动地转换成 rem  。 使用 cssnext 书写未来的 CSS  我们可以在样式表中利用 cssnext 额外增加的一些 css 规范。 因为我们书写的是未来规范的 css,所以 PostCSS 的生成步骤不需要浏览器去执行。你可以 点击这里 查看所有的特性。 接下来,我将用 PostCSS 的自定义函数扩展 CSS 的功能。

    37390

    CSS使用技巧

    --[if IE]>     <link rel="stylesheet" type="text/<em>css</em>" href="ie-stylesheet.<em>css</em>" />   < ! CSS的优先性 如果同一个容器被多条CSS语句定义,那么哪一个定义优先呢? CSS重置 CSS重置用于取消浏览器的内置样式,请参考YUI 和Eric Meyer 的样式表。 # 17. CSS三角形 如何使用CSS生成一个三角形? CSS重置 请参考Should You Reset Your CSS? 。 (完)

    11810

    css调试技巧

    一、CSS调试技巧 调试CSS 添加工作目录 建立文件映射 编辑CSS文件或者使用样式面板修改样式 保存CSS文件 具体步骤 把本地目录文件拖到source面板中 ? 调试CSS技巧-2.png 点击index.css文件,准备修改h1的样式 ? 调试CSS技巧-3.png 修改index.css文件,准备保存index.css文件 ? 调试CSS技巧-4.png 本地文件夹中的index.css文件内容相应的修改了 ? 调试CSS技巧-5.png 修改elements面板中的样式,点击enter,也可以修改index.css文件中的内容 ? 调试CSS技巧-6.png 二、LESS调试技巧 less调试 使用npm安装lessc和wr工具 使用lessc命令编译less文件 调试器启动[重新加载生成的css]模式 使用wr命令跟踪文件修改实时编译

    19210

    CSS使用技巧

    在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。 未来,本文将持续更新。 ? 1. CSS的优先性 如果同一个容器被多条CSS语句定义,那么哪一个定义优先呢? CSS重置 CSS重置用于取消浏览器的内置样式,请参考YUI和Eric Meyer的样式表。 17. CSS三角形 如何使用CSS生成一个三角形? CSS重置 请参考Should You Reset Your CSS?。 (完)

    34010

    CSS使用技巧

    在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。 未来,本文将持续更新。 1. CSS的优先性 如果同一个容器被多条CSS语句定义,那么哪一个定义优先呢? CSS重置 CSS重置用于取消浏览器的内置样式,请参考YUI和Eric Meyer的样式表。 17. CSS三角形 如何使用CSS生成一个三角形? CSS重置 请参考Should You Reset Your CSS?。

    5420

    Css技巧

    在页面构建中,能明显提升页面显示质量的一些CSS技巧。很多简洁美观的页面表现,可以使用CSS3代码即可实现,减少图片的使用。 ? 这里需要用到 CSS 的两个属性: box-shadow 和 outline 属性,具体属性参见MDN。 二、条纹背景 如何使用CSS来实现条纹? ? CSS实现条纹 使用 linear-gradient 属性实现 #stripe { width: 400px; height: 200px; background: linear-gradient 阴影 这里将会使用到CSS3里面的 filter 属性 #logo { position: relative; width: 200px; height: 200px;

    29900

    CSS使用技巧

    http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html 5. 图片宽度的自适应 如何使得较大的图片,能够自动适应小容器的宽度? 禁止自动换行 如果你希望文字在一行中显示完成,不要自动换行,CSS命令如下:   h1 { white-space:nowrap; } 23. ! important规则 多条CSS语句互相冲突时,具有!important的语句将覆盖其他语句。由于IE不支持!important,所以也可以利用它区分不同的浏览器。    CSS提示框 当鼠标移动到链接上方,会自动出现一个提示框。    固定位置的页首 当页面滚动时,有时需要页首在位置固定不变,CSS语句可以这样写,效果参见http://limpid.nl/lab/css/fixed/header:   body{ margin

    19320

    Mysql语句书写小Tips——工作实用性技巧

    软件:notepad++ 工作中经常会碰到一个表字段100~200个,我们需要一个一个手敲吗?

    4310

    干货:CSS 专业技巧

    使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。 注意:如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。 CSS-Tricks 有篇好文 讲到了各种居中的技巧。 注意: IE11 对 flexbox 的支持有点 bug。 注意:这一技巧对于无障碍,特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容,需要注意。 隐藏没有静音、自动播放的影片 这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。

    27050

    相关产品

    • 云直播

      云直播

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

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券