CSS回顾复习三(CSS书写规范、顺序和命名规则——CSS书写规范)

  • • 发表于 2年前
  • • 作者 茂茂
  • • 2337 次浏览
  • • 17 条评论
  • • 最后编辑时间 2年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

一、CSS的缩写

(一)padding和margin

顺序:顺时针

  1. 上 右 下 左 padding: 10px 20px 30px 40px

  2. 上 右左 下 padding: 10px 20px 30px

  3. 上下 右左 padding: 10px 20px

  4. 上右下左 padding: 10px


(二)font

顺序:

font: 
    font-style(规定规定字体样式)
    font-variant(规定是否以小型大写字母的字体显示文本)
    font-weight(规定字体粗细)
    font-size(规定字体大小)/ line-height(规定行高)
    font-family(规定字体族)

font: italic small-caps 700 12px/1.5 "微软雅黑"

注意:
  1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性
  2. 简写时,font-size和line-height直接一样要用斜杠,不能分开写;
  3. 如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值
    font属性详解
(三)background

在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始,又增加了3个新的属性值,加起来一共8个。
顺序:

background:
    background-color(规定背景颜色)
    background-image(规定背景图片)
    background-repeat(设置重复背景图像)
    background-attachment(规定背景图像是否固定或者随着页面的其余部分滚动)
    background-position(规定背景图像的位置)/ background-size(规定背景图片的尺寸)
    background-origin(背景图片的定位区域)
    background-clip(背景的绘制区域);

background: #229 url(maomao.png) no-repeat 15px center/20px content-box

background 属性详解
(四)animation动画

顺序:

animation:
    animation-name(规定需要绑定到选择器的 keyframe 名称)
    animation-duration(规定完成动画所花费的时间,以秒或毫秒计)
    animation-timing-function(规定动画的速度曲线)
    animation-delay(规定在动画开始之前的延迟)
    animation-iteration-count(规定动画应该播放的次数)
    animation-direction(规定是否应该轮流反向播放动画)

animation: maomao 10s ease-in-out 3s 2 alternate

animation 动画属性详解
(五)transition

顺序:

transition:
    transition-property(规定设置过渡效果的 CSS 属性的名称)
    transition-duration(规定完成过渡效果需要多少秒或毫秒)
    transition-timing-function(规定速度效果的速度曲线)
    transition-delay(定义过渡效果何时开始)

transition: width 10s ease-in-out 3s

transition 过渡属性详解

二、去掉小数点前的“0”

font-size:0.8em写为font-size:.8em
好处是精简代码


三、id应按需使用,不能滥用

id在javascript中是唯一的,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。


四、连字符CSS选择器命名规范

  1. 长名称或词组可以使用“-”中横线来为选择器命名
  2. 为了区分JavaScript变量命名(JS变量命名是用“”)所以不建议使用“”下划线来命名CSS选择器

五、16进制颜色代码缩写

color:#ffffff写为color:#fff
好处是精简代码

喜欢的小伙伴们就打赏下(嘿嘿)
上期回顾:CSS回顾复习二(CSS书写规范、顺序和命名规则——CSS书写顺序与命名规则)
下期内容:CSS新手学习一(语法、注释、选择器)
分享到:
评论区(共17条评论)
17条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:189 积分:11098

已加入社区[699]天

啦啦啦

作者详情》
Top