好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

CSS高效书写小贴士分享

统一样式书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

精简特殊值

颜色

十六进制表示法如果每两位的值相同,可以缩写一半,如:

color:#336699;
background:#AABBCC;

简化后

color:#369;
background:#ABC;

去除小数点前的0

小数点之前的0可去掉,如

color:rgba(255,255,224,0.6);
opacity:0.8;

简化后

color:rgba(255,255,224,.6);
opacity:.8;

用none代替0

需要去除某些属性时,请用none而不是0,因为0仍旧会解析出一个0宽度的属性,none则不会解析,大大提高性能。

border:none;
outline:none;
list-style:none;

复合属性缩写

盒尺寸:margin,padding

以margin为例,复合值顺序:上 右 下 左;

出现未定义时:右=上,下=上,左=右。

margin: 10px;                   /* 左=下=右=上=10px */
margin: 10px 20px;              /* 下=上=10px,左=右=20px */
margin: 10px 20px 30px;         /* 上=10px,左=右=20px,下=30px */
margin: 10px 20px 30px 40px;    /* 上=10px,右=20px,下=30px,左=40px */

字体:font

复合值顺序:字体样式 字体变形 字体粗细 字体大小/行高 字体名称;

语法:font:style variant weight size/height family;

展开属性:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.6em;
font-family:"Lucida Grande",sans-serif;

复合属性:

font:italic small-caps bold 14px/1.6em "Lucida Grande",sans-serif;

注意:缩写字体定义,至少要定义font-size和font-family两个值,且font具有继承性。

css2边框:border

复合值顺序:宽度 样式 颜色:

border: 1px solid #000;        /* 1px宽的实线黑色边框 */

注意:若边框颜色和字体颜色一致,可省略。

取消默认边框:border:none;

css3边框圆角:border-radius

复合值顺序:

正圆为左上半径 右上半径 右下半径 左下半径;

椭圆为左上X轴半径 右上X轴半径 右下X轴半径 左下X轴半径/左上Y轴半径 右上Y轴半径 右下Y轴半径 左下Y轴半径;

出现未定义时:右上=左上,右下=左上,左下=右上

正圆实例:

/* 左下半径=右下半径=右上半径=左上半径=10px */
border-radius: 10px;
/* 右下半径=左上半径=10px,左下半径=右上半径=20px */
border-radius: 10px 20px;
/* 左上半径=10px,左下半径=右上半径=20px,右下半径=30px */
border-radius: 10px 20px 30px;
/* 左上半径=10px,右上半径=20px,右下半径=30px,左下半径=40px */
border-radius: 10px 20px 30px 40px;

椭圆实例:

/* 左下X轴半径=右下X轴半径=右上X轴半径=左上X轴半径=10px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px/20px;
/* 右下X轴半径=左上X轴半径=10px,左下X轴半径=右上X轴半径=10px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px/20px;
/* 左上X轴半径=10px,左下X轴半径=右上X轴半径=20px,右下X轴半径=30px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px 30px/20px;
/* 左上X轴半径=10px,右上X轴半径=20px,右下X轴半径=30px,左下X轴半径=40px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px 30px 40px/20px;
/* Y轴半径同理不重复,完整属性如: */
/* 左上X轴半径=10px,右上X轴半径=20px,右下X轴半径=30px,左下X轴半径=40px */
/* 左上Y轴半径=40px,右上Y轴半径=30px,右下Y轴半径=20px,左下Y轴半径=10px */
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

背景:background

复合值顺序:颜色 图片地址 重复方式 是否固定 位置;

语法:background:color image repeat attachment position;

展开属性:

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

复合属性:

background:#f00 url(background.gif) no-repeat fixed 0 0;

注意:可省略一项或多项值,省略后采用默认值:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

仅设置颜色背景时请采用background-color属性,设置图片背景时推荐包含颜色背景,在图片加载失败时使用颜色背景。

列表:list-style

复合顺序:标记类型 标记位置 图片标记;

语法:type position image。

展开属性:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

复合属性:

list-style:square inside url(image.gif);

取消默认列表标记:list-style:none;

注意:不推荐使用list-style-image,若需要图片标记,推荐使用background-image。

css3动画效果属性:animation

复合顺序:keyframe名 动画持续时间(s/ms) 速度曲线函数 动画延迟时间 重复次数 动画方向;

语法:animation: name duration timing-function delay iteration-count direction;

例子:

animation:myMove 1s ease 1s  infinite alternate;

注意:至少需要添加keyframe名和持续时间,否则由于持续时间默认为0,动画无法运行。

省略的属性将采用默认值:

duration:0;
timing-function:ease;
delay:0;
iteration-count:1;
direction:normal;

若animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放。只有在animation-iteration-count设置值超过1才有效果。

css3过渡效果属性:transition

复合顺序:作用的属性 过渡效果持续时间 时间曲线函数 延迟时间;

语法:transition: property duration timing-function delay;

例子:

transition:width 2s ease-in 1s;

注意:至少需要添加过渡效果持续时间,否则由于默认持续时间为0,没有效果。

省略的属性将采用默认值:

property:all;
duration:0;
timing-function:ease;
delay:0;

过渡效果出现在规定的属性出现变化的时候。


css3还有一些不常用的复合属性如:outline,text-decoration,border-image等可自行了解。

合适的选择器

浏览器渲染原理

渲染顺序为:

1、解析HTML以重建DOM树(Parsing HTML to construct the DOM tree ):渲染引擎开始解析HTML文档,转换树中的标签到DOM节点,它被称为“内容树”。

2、构建渲染树(Render tree construction):解析CSS(包括外部CSS文件和样式元素),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。

3、布局渲染树(Layout of the render tree): 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。

4、绘制渲染树(Painting the render tree) : 遍历渲染树,每个节点将使用UI后端层来绘制。


主要的流程就是:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中,每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上。

注意:css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。 

加快渲染的选择器原则

1、避免使用通配规则:如*{}计算次数惊人!只对需要用到的元素进行选择。

2、尽量少的去对标签进行选择,而是用class:如#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}。

3、不要去用标签限定ID或者类选择符:如ul#nav,应该简化为#nav。

4、尽量少的去使用后代选择器,降低选择器的权重值:后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。

5、考虑继承:了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

语义化选择器

为了管理和维护,选择器语义化是很重要的,所以不能都用ID,还需要语义化的设置:

1、ID名和类名要有意义:ID名和类名要有意义,可加上特殊的前缀进行分组,便于维护和管理;

2、一律采用小写英文,尽量不简写,除非是通用简写;

3、采用横杠分割单词:不要采用下划线,js有歧义,不推荐使用驼峰,可读性一般,简单的名称可不用分割;

4、使用复合类:尽量少使用后代选择器,将某一类属性抽象出来,类似OOCSS(面向对象CSS),然后将多个类复合为某个元素设置属性。

常用语义化名称列表

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

导航

导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

图片

图片是网页的主角元素和优化空间最大的元素之一,优化方向主要有:

图片大小

网页上的小图在使用前压缩,不但要压缩像素,还要压缩大小,不要采用图片width和height进行限制压缩,将造成极大的浪费。

背景图片平铺图片大小:要合适

有时为了节省带宽,将背景图片截成1px*1px,结果呢?页面渲染更慢了,为什么?乘法的可怕之处就在这里。

平铺100px*100px的页面需要计算的次数100*100=10000,如果是整个页面的背景1920px*800px,计算次数为1920*800=1536000,所以平铺图片未必越小越好。

图片格式

非动态图直接采用PNG格式,比GIF小的多,压缩级别在8-12之间。

虽然IE6对PNG透明度支持不太好,但是IE6,呵呵。

雪碧图

将页面中的多个小图标合并成一张大图,减少HTTP请求,再利用background-position获取需要的小图。

Spirite技术出现很久应用也很广泛。

表现和内容分离

与内容无关的图片设置为背景,这些图片仅仅为了页面美观,不是内容,而是表现。

css文件命名和引用

命名

命名当然采用语义化的名称,常见的有:

    主要的 main.css
    模块 module.css
    基本共用 base.css
    布局、版面 layout.css
    主题 themes.css
    专栏 columns.css
    文字 font.css
    表单 forms.css
    补丁 mend.css
    打印 print.css

引用

1、引用前可对文件进行压缩合并,清除注释、空格、换行等不必要的损耗;合并多个css文件,减少HTTP请求。压缩和合并都可以采用自动化工具进行处理。

2、禁用@import获取外部样式表,减少或尽量不用内联或者内部样式表。

3、在头部head里面script之前引用样式表。

4、可使用媒体查询进行自适应样式表的处理。


小指才疏学浅,有任何疏漏之处,欢迎不吝赐教~


点赞2
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
nike knit
 nike knit 2019-03-19 22:33回复
#123
<a href="http://www.ultiname.com/nike-kobe-11-blanco-and-negro-zapatosk">nike kobe 11 blanco and negro</a> <a href="http://www.sintesetfils.com/air-jordan-retro-4-red-white-shoesj">air jordan retro 4 red white</a> <a href="http://www.ceipalcazaba.com/brixton-rift-hat-hath">brixton rift hat</a> <a href="http://www.givgram.com/nike-air-max-tavas-se-trainers-in-negro-and-blanco-zapatosl">nike air max tavas se trainers in negro and blanco</a> <a href="http://www.icxeber.com/le-coq-sportif-men-coffee-grey-yellow-colour-bar-shoesk">le coq sportif men coffee grey yellow colour bar</a> <a href="http://www.ishqdeep.com/gr%C3%B8nn-l%C3%A6r-converse-obuvi">gr酶nn l忙r converse</a>
nike knit http://www.svsvetsurgery.com/nike-knit-hath
brickolino
 brickolino 2019-03-19 20:45回复
#122
<a href="http://www.yrlogoworks.com/le-coq-sportif-zapatos-rosado-p%C3%BArpura-schuheb">le coq sportif zapatos rosado p煤rpura</a> <a href="http://www.zmianywfirmie.com/air-jordan-2-brun-guld-chaussurese">air jordan 2 brun guld</a> <a href="http://www.beehappypress.com/femminile-nike-air-max-2015-arancia-rosso-butyg">femminile nike air max 2015 arancia rosso</a> <a href="http://www.blevemusic.com/rosa-and-gr%C3%B8nn-nike-free-runs-scarpea">rosa and gr酶nn nike free runs</a> <a href="http://www.byvestella.com/nike-air-max-90-blanc-turquoise-rose-schuheb">nike air max 90 blanc turquoise rose</a> <a href="http://www.diypoolpro.com/nike-w-dunk-sky-hi-svart-sail-butyf">nike w dunk sky hi svart sail</a>
brickolino http://www.brickolino.com/
evelpa
 evelpa 2019-03-19 03:37回复
#121
<a href="http://www.theskifanatic.com/adidas-neo-campus-sky-blue-blue-shoesi">adidas neo campus sky blue blue</a> <a href="http://www.bestoftumblr.com/nike-kd-8-guld-gr%C3%A5-skoj">nike kd 8 guld gr氓</a> <a href="http://www.thehogrider.com/adidas-neo-l%C3%A6r-gr%C3%B8nn-s%C3%B8lv-obuvi">adidas neo l忙r gr酶nn s酶lv</a> <a href="http://www.artpreneure.com/nike-kd-8-kvinners-r%C3%B8d-himmelen-bl%C3%A5-obuvp">nike kd 8 kvinners r酶d himmelen bl氓</a> <a href="http://www.thefarmergirl.com/mennns-asics-asics-gel-kayano-20-s%C3%B8lv-rosa-obuvi">mennns asics asics gel kayano 20 s酶lv rosa</a> <a href="http://www.shetablink.com/air-jordan-retro-12-amarillo-blanco-zapatosp">air jordan retro 12 amarillo blanco</a>
evelpa http://www.evelpa.com/
zmianywfirmie
 zmianywfirmie 2019-03-18 14:39回复
#120
<a href="http://www.akncmusic.com/adidas-prougeator-lz-trx-fg-sl-bon-march%C3%A9-kurpesc">adidas prougeator lz trx fg sl bon march茅</a> <a href="http://www.dystopianflix.com/ralph-lauren-dark-bl%C3%A5-sweater-vneck-vest-polos">ralph lauren dark bl氓 sweater vneck vest</a> <a href="http://www.getunladylike.com/herren-nike-air-max-90-rot-gr%C3%BCn-butye">herren nike air max 90 rot gr眉n</a> <a href="http://www.jesselyon.com/ralph-lauren-tracksuit-caqui-naranja-polou">ralph lauren tracksuit caqui naranja</a> <a href="http://www.kabukcuoglu.com/adidas-ultra-boost-p%C3%BArpura-mattress-chaussurese">adidas ultra boost p煤rpura mattress</a> <a href="http://www.karbasioun.com/nike-air-max-zero-qs-blu-line-scarpee">nike air max zero qs blu line</a>
zmianywfirmie http://www.zmianywfirmie.com/
skonya
 skonya 2019-03-18 10:36回复
#119
<a href="http://www.poppiesdelray.com/adidas-16.3-tf-cleats-blanco-oro-negro-zapatosl">adidas 16.3 tf cleats blanco oro negro</a> <a href="http://www.soundsofbuzz.com/ray-ban-aviator-3025-price-sunglassesh">ray ban aviator 3025 price</a> <a href="http://www.hozloli.com/purdue-boilermakers-nike-ncaa-heather-stretch-fit-cap-hatj">purdue boilermakers nike ncaa heather stretch fit cap</a> <a href="http://www.privetaustria.com/nike-internationalist-bianca-scarpej">nike internationalist bianca</a> <a href="http://www.goodnnasty.com/nike-kyrie-2-camouflage-schwarz-schuhei">nike kyrie 2 camouflage schwarz</a> <a href="http://www.ankarasanal.com/nike-sporting-air-max-2018-kvinder-gr%C3%A5-lyser%C3%B8d-skoh">nike sporting air max 2018 kvinder gr氓 lyser酶d</a>
skonya http://www.skonya.com/
torukoryoko
 torukoryoko 2019-03-17 08:57回复
#118
<a href="http://www.gaialog.net/nike-flyknit-racer-hvit-svart-volt-xr-scarpeb">nike flyknit racer hvit svart volt xr</a> <a href="http://www.genopresse.net/nike-structure-18-for-verkauf-vt-schuhed">nike structure 18 for verkauf vt</a> <a href="http://www.gpsgolfcaddy.net/air-jordan-son-of-mars-nero-cemaschiot-jordans-butyf">air jordan son of mars nero cemaschiot jordans</a> <a href="http://www.gregoryjewellers.net/femmes-air-jordan-retro-9-or-orange-obuve">femmes air jordan retro 9 or orange</a> <a href="http://www.hamiltonbookkeeping.net/air-jordan-phase-blanco-p%C3%BArpura-obuvg">air jordan phase blanco p煤rpura</a> <a href="http://www.handykontakte.net/nike-dunk-high-mesh-blanco-schuhef">nike dunk high mesh blanco</a>
torukoryoko http://www.torukoryoko.net/
europeankb
 europeankb 2019-03-15 14:25回复
#117
<a href="http://www.cierreplus.com/kobe-9-high-todas-rojo-kurpesc">kobe 9 high todas rojo</a> <a href="http://www.gotmarys.com/ralph-lauren-sko-hvid-gr%C3%A5-polow">ralph lauren sko hvid gr氓</a> <a href="http://www.nauticabg.com/herren-nike-flynit-air-max-alle-lila-butyf">herren nike flynit air max alle lila</a> <a href="http://www.orkansport.com/ralph-lauren-pants-beige-orange-poloz">ralph lauren pants beige orange</a> <a href="http://www.parkcarlton.com/nike-kobe-8-hombres-corriendo-zapatos-chaussuresf">nike kobe 8 hombres corriendo zapatos</a> <a href="http://www.pilaminates.com/maschio-nike-shox-turbo-21-blu-nero-scarpef">maschio nike shox turbo 21 blu nero</a>
europeankb http://www.europeankb.com/
nicoleacire
 nicoleacire 2019-03-15 02:44回复
#116
<a href="http://www.akivla.com/billig-nike-shox-deliver-kvinners-rosa-runninge">billig nike shox deliver kvinners rosa</a> <a href="http://www.ondecktrivia.com/kansas-city-royals-cadet-hat-ebay-hatb">kansas city royals cadet hat ebay</a> <a href="http://www.segalino.com/nike-sb-blazer-low-womens-green-yellow-trainersg">nike sb blazer low womens green yellow</a> <a href="http://www.callalabaynsw.com/prada-pink-leather-handbag-pradar">prada pink leather handbag</a> <a href="http://www.thbdtv.com/billig-nike-free-one-dam%C3%A4nner-wei%C3%9F-runningb">billig nike free one dam盲nner wei脽</a> <a href="http://www.mcdevittmedia.com/michael-kors-large-flap-backpack-mkr">michael kors large flap backpack</a>
nicoleacire http://www.nicoleacire.com/
scopatore
 scopatore 2019-03-15 01:11回复
#115
<a href="http://www.keleric.com/nike-sb-performance-trucker-2.0-cap-hatl">nike sb performance trucker 2.0 cap</a> <a href="http://www.jeffreya.com/nike-zoom-winflo-2-femmes-bleu-or-chaussuresh">nike zoom winflo 2 femmes bleu or</a> <a href="http://www.vuduchoan.com/mujeres-asics-gel-lyte-5-verde-plata-zapatosk">mujeres asics gel lyte 5 verde plata</a> <a href="http://www.gmfamilylaw.com/womens-nike-free-balanza-orange-shoesi">womens nike free balanza orange</a> <a href="http://www.clubephytus.com/dam%C3%A4nner-asics-gel-kinsei-5-orangen-rot-schuhei">dam盲nner asics gel kinsei 5 orangen rot</a> <a href="http://www.findnewcoupon.com/air-jordan-retro-14-amarillo-hombresta-verde-zapatosp">air jordan retro 14 amarillo hombresta verde</a>
[url=http://www.scopatore.com/]scopatore[/url]
donareseguros
 donareseguros 2019-03-10 12:33回复
#114
<a href="http://www.ajupiter.com/florida-panthers-authentic-jersey-nfls">florida panthers authentic jersey</a> <a href="http://www.bcwatershow.com/adidas-neo-bianca-marrone-scarpeg">adidas neo bianca marrone</a> <a href="http://www.lavantafilm.com/air-jordan-retro-3-silber-brot-obuvc">air jordan retro 3 silber brot</a> <a href="http://www.lindaeshop.com/nike-free-run-4.0-gr%C3%A5-and-gr%C3%B8nn-tea-scarpea">nike free run 4.0 gr氓 and gr酶nn tea</a> <a href="http://www.pvktechinfo.com/flyknit-lunar-1-for-salg-jacksonville-schuheb">flyknit lunar 1 for salg jacksonville</a> <a href="http://www.reddotsmedia.com/limited-nike-camo-mens-tony-romo-jersey-nfl-9-dallas-cowboys-2018-salute-to-service-nflr">limited nike camo mens tony romo jersey nfl 9 dallas cowboys 2018 salute to service</a>
donareseguros http://www.donareseguros.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸