這篇文章主要介紹“常用的CSS縮寫(xiě)語(yǔ)法總結(jié)”,在日常操作中,相信很多人在常用的CSS縮寫(xiě)語(yǔ)法總結(jié)問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”常用的CSS縮寫(xiě)語(yǔ)法總結(jié)”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供城步企業(yè)網(wǎng)站建設(shè),專(zhuān)注與做網(wǎng)站、成都網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為城步眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
常用CSS縮寫(xiě)語(yǔ)法總結(jié)
使用CSS縮寫(xiě)可以幫助減少你CSS文件的大小,更加容易閱讀。CSS縮寫(xiě)的主要規(guī)則如下:
顏色
16進(jìn)制的色彩值,如果每?jī)晌坏闹迪嗤?,可以縮寫(xiě)一半,例如:
#000000可以縮寫(xiě)為#000;#336699可以縮寫(xiě)為#369;
盒尺寸
通常有下面四種書(shū)寫(xiě)方法:
property:value1;表示所有邊都是一個(gè)值value1;
property:value1value2;表示top和bottom的值是value1,right和left的值是value2
property:value1value2value3;表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1value2value3value4;四個(gè)值依次表示top,right,bottom,left
方便的記憶方法是順時(shí)針,上右下左。具體應(yīng)用在margin和padding的例子如下:
margin:1em02em0.5em;
邊框(border)
邊框的屬性如下:
border-width:1px; border-style:solid; border-color:#000;
可以縮寫(xiě)為一句:
border:1pxsolid#000;
語(yǔ)法是border:widthstylecolor;
背景(Backgrounds)
背景的屬性如下:
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:00;
可以縮寫(xiě)為一句:
background:#f00url(background.gif)no-repeatfixed00;
語(yǔ)法是background:colorimagerepeatattachmentposition;
你可以省略其中一個(gè)或多個(gè)屬性值,如果省略,該屬性值將用瀏覽器默認(rèn)值,默認(rèn)值為:
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;
可以縮寫(xiě)為一句:
font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;
注意,如果你縮寫(xiě)字體定義,至少要定義font-size和font-family兩個(gè)值。
列表(lists)
取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫(xiě)list-style:none;,
list的屬性如下:
list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);
可以縮寫(xiě)為一句:list-style:squareinsideurl(image.gif);
到此,關(guān)于“常用的CSS縮寫(xiě)語(yǔ)法總結(jié)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!