CSS编码缩写案例和CSS缩写缘故总结

日期:2021-03-15 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序


CSS英语的语法在开展WEB规范网页页面设计方案时必不能少的,1般状况下大家能够根据Dreamweaver手机软件的“CSS款式”面板全自动转化成相应的CSS编码。但是尽管手机软件转化成的CSS编码阅读文章清楚易懂,但便是因为CSS对条条款式界定的清楚解释,也就使得CSS编码阅读文章显得冗杂繁杂,另外CSS编码的字节数也在提升……这针对追求完美高效率率和完善性的人来讲,是很难容忍的。
有关文章内容:CSS缩写6个图例总结
     CSS缩写提升CSS文档的体积
例如大家在给某元素界定填充尺寸时,应用到padding,当对上、右、下、左填充有不一样规定时,手机软件转化成的编码将会是这样:
下列是引入片断:
.t1{
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}
假如简易来写便是
下列是引入片断:
.t2{
padding:3px20px3px20px;
}
padding的4边值先后对应了top(上)、right(右)、bottom(下)、left(左)。自然,本例还能够简写成:
下列是引入片断:
.t3{
padding:3px20px3px;
}
当left(左)沒有时,默认设置值为right(右)的值,当bottom(下)沒有时,默认设置值为top(上)的值,因此本例中最简易的便是:
下列是引入片断:
.t4{
padding:3px20px;
}
(自然,假如padding就1个值时,就表明上右下左是同样的了。)
下列是引入片断:
<styletype="text/css">
<!--
.t1{
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}
.t2{
padding:3px20px3px20px;
}
.t3{
padding:3px20px3px;
}
.t4{
padding:3px20px;
}
span{
border:1pxsolid#CCCCCC;
}
-->
</style>
<spanclass="t1">cnbruce</span>
<spanclass="t2">cnrose</span>
<spanclass="t3">cnjames</span>
<spanclass="t4">www.cnbruce.com</span>
  上例中.t1冗杂的4行编码浓缩成1行简介编码——这便是CSS缩写的优点。
  自然,许多情况下大家在学习培训他人的CSS工作经验时,也会看到许多相近的CSS缩写。但假如自身沒有掌握,压根是看不搞清楚学不容易这些CSS方式工作经验了。因此,大家务必掌握和把握1些常见的CSS缩写英语的语法。应用缩写能够协助降低你CSS文档的尺寸,更为非常容易阅读文章。css缩写的关键标准以下:
  色调

  16进制的颜色值,假如每两位的值同样,能够缩写1半,比如:#000000能够缩写为#000;#336699能够缩写为#369;
  盒规格
  一般有下面4种撰写方式:
  property:value1; 表明全部边全是1个值value1;
  property:value1 value2; 表明top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表明top的值是value1,right和left的值是value2,bottom的值是value3
  property:value1 value2 value3 value4; 4个值先后表明top,right,bottom,left

  便捷的记忆力方式是顺时针,上右下左。实际运用在margin和padding的事例以下:
  margin:1em 0 2em 0.5em;
  边框(border)

  边框的特性以下:
下列是引入片断:
border-width:1px;
border-style:solid;
border-color:#000;
能够缩写为1句:border:1pxsolid#000;
  英语的语法是 border:width style color;

  情况(Backgrounds)

  情况的特性以下:
下列是引入片断:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;
能够缩写为1句:background:#f00url(background.gif)no-repeatfixed00;
  英语的语法是 background:color image repeat attachment position;
  你能够省略在其中1个或好几个特性值,假如省略,该特性值将用访问器默认设置值,默认设置值为:
下列是引入片断:
color:transparent
image:none
repeat:repeat
attachment:scroll
position:0%0%
  字体样式(fonts)

  字体样式的特性以下:
下列是引入片断:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"LucidaGrande",sans-serif;
能够缩写为1句:font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;
  留意,假如你缩写字体样式界定,最少要界定font-size和font-family两个值。
  目录(lists)

  撤销默认设置的圆点和编号能够这样写list-style:none;,
  list的特性以下:
下列是引入片断:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
能够缩写为1句:list-style:squareinsideurl(image.gif);
上一篇:CSS也要词义化表明 返回下一篇:没有了