常见的CSS缩写英语的语法小结可协助你降低CSS文

日期:2021-01-20 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

应用缩写能够协助降低你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:1px solid #000;

  英语的语法是border:width style color;

  情况(Backgrounds)
  情况的特性以下:

•background-color:#f00;
•background-image:url(background.gif);
•background-repeat:no-repeat;
•background-attachment:fixed;
•background-position:0 0;

能够缩写为1句:background:#f00 url(background.gif) no-repeat fixed 0 0;

英语的语法是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:"Lucida Grande",sans-serif;

能够缩写为1句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

font的缩写,假如省略family,
如这模样:
font:700 14px/22px;
则在Firefox下是不起效的
详细的写法是:font:700 14px/22px arial;

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style> www.111cn.net
.login_top{height:26px;font:bold 14px/26px "宋体"; border:1px solid #000}
.login_top2{height:26px; line-height:26px; font-weight:bold;font-size:14px;border:1px
solid #000; font-family:'宋体'}
</style>
<div class="login_top">我竖直不垂直居中</div>
<br/ >
<div class="login_top2">我竖直垂直居中</div>

留意,假如你缩写字体样式界定,最少要界定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:square inside url(image.gif);

outline

outline相近border,不一样的是border会危害盒实体模型,而outline不容易。

outline-width:数据+企业;
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ;
outline-color: 色调 ;

特性值为0撰写标准是假如CSS特性值为0,那末你无须为其加上企业(如:px/em),你将会会这样写:

有关4个边的非常表明
有关4边,有许多款式都涉及到到了4边(左右上下)的难题,我这里统1表明1下。

以padding属于为例,4边的简写以下:

padding:4px 6px 3px 4px;

它等效于:

拷贝编码
编码以下:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

其次序为:

top | right | bottom | left

无论是边框宽度,還是边框色调、边距等,要是css款式涉及到4边,次序全都全是“上右下左”(顺时针方位)。

假如4边的值省略1个,只写3个,即:

padding:1px 2px 3px;

则它等效于:

拷贝编码
编码以下:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;

即省略的“左”值等于“右”。

假如4边的值省略两个:

padding:5px 10px;

它等效于:

拷贝编码
编码以下:

padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:5px;

也便是说,当仅有2个值的情况下,左右2边等于第1个值,上下2边等于第2个值,即省略的“下”值等于“上”。

假如仅有1个值:

padding:3px;

它等效于:

拷贝编码
编码以下:

padding-top:3px;
padding-right:3px;
padding-bottom:3px;
padding-left:3px;

这类状况下,左右上下4条边都等同于于同1个值!

Margin(外边距/空白边)申明CSS magin值得情况下一般会写成这样:

拷贝编码
编码以下:

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让大家试试把值为0的企业去掉,并把4条申明合拼成1条申明:

margin:0 10px 0 10px;

当你性命padding、margin、border(也有1些别的特性)时,记得要把依照顺时针的方位来申明特性值,也便是依照上-右-下-左的方位。有关这些特性也有另外一个更为简易的写法,看看特性中上和下、左和右是不是值是相同的,假如是那末便可以进1步提升了,你能够省略掉后两个值,剩余的两个值前者指左右,后者指上下:

margin:0 10px;

它是指上下的值为10px,左右的值为0;

移除挑选器  挑选器是你在为1些元素运用CSS款式时的基础方式,例如h1, h2, h2, div, strong, pre, ul, ol这些…假如你应用了class(.类名)或ID(#id名),那末就无需再在申明CSS时包括挑选器了。

div#logowrap

尝试丢掉过剩的挑选器吧:

#logowrap

在这个事例中所谓的那个挑选器便是div

*总爱和你玩笑  要明智的应用*而防止它在全部CSS款式表格中乱玩笑,*是个通配符,你可使用它来为你的设计方案一部分或所有开展1系列CSS申明。比如:

拷贝编码
编码以下:

{
margin: 0;
}

这个申明会将全部元素的margin值设定为0,一样的,以便认真细致起见,你能够尝试这样设定:

拷贝编码
编码以下:

#menu * {
margin: 0;
}

这样的申明是指将#menu下的全部元素的margin设为0。