常用的CSS技巧代码段整理.docx
- 文档编号:29431303
- 上传时间:2023-07-23
- 格式:DOCX
- 页数:37
- 大小:26.19KB
常用的CSS技巧代码段整理.docx
《常用的CSS技巧代码段整理.docx》由会员分享,可在线阅读,更多相关《常用的CSS技巧代码段整理.docx(37页珍藏版)》请在冰豆网上搜索。
常用的CSS技巧代码段整理
常用的CSS技巧代码段整理
1、垂直对齐
如果你用CSS,则你会有困惑:
我该怎么垂直对齐容器中的元素?
现在,利用CSS3的Transform,可以很优雅的解决这个困惑:
.verticalcenter{
position:
relative;
top:
50%;
-webkit-transform:
translateY(-50%);
-o-transform:
translateY(-50%);
transform:
translateY(-50%);
}
使用这个技巧,从单行文本、段落到box,都会垂直对齐。
目前浏览器对Transform的支持是需要关注的,Chrome4,Opera10,Safari3,Firefox3,andInternetExplorer9.均支持该属性。
2、伸展一个元素到窗口高度
在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素:
html和body:
html,body{
height:
100%;
}
然后将100%应用到任何元素的高:
div{height:
100%;}
3、基于文件格式使用不同的样式
为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。
下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:
a[href^="http:
//"]{
padding-right:
20px;
background:
url(external.gif)no-repeatcenterright;
}
/*emails*/
a[href^="mailto:
"]{
padding-right:
20px;
background:
url(email.png)no-repeatcenterright;
}
/*pdfs*/
a[href$=".pdf"]{
padding-right:
20px;
background:
url(pdf.png)no-repeatcenterright;
}
4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。
在示例中,我们将对一个SVG图像添加灰度过滤:
//www.w3.org/2000/svg"> 为了跨浏览器,会用到filter属性: img{ filter: url(filters.svg#grayscale);/*Firefox3.5+*/ filter: gray;/*IE6-9*/ -webkit-filter: grayscale (1);/*GoogleChrome,Safari6+&Opera15+*/ } 5、背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。 目前,你不能为渐变添加动画,但下面的代码可能有帮助。 它通过改变背景位置,让它看起来有动画效果。 button{ background-image: linear-gradient(#5187c4,#1c2f45); background-size: auto200%; background-position: 0100%; transition: background-position0.5s; } button: hover{ background-position: 00; } 6、CSS: 表格列宽自适用 对于表格,当谈到调整列宽时,是比较痛苦的。 然后,这里有一个可以使用的技巧: 给td元素添加white-space: nowrap;能让文本正确的换行 td{white-space: nowrap;}1. 7、只在一边或两边显示盒子阴影 如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。 为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位: after伪类。 实现底边阴影的代码如下: .box-shadow{ background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow: after{ content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px0px8px2px#000000; -moz-box-shadow: 0px0px8px2px#000000; box-shadow: 0px0px8px2px#000000; } 8、包裹长文本 如果你碰到一个比自身容器长的文本,这个技巧对你很有用。 在这个示例中,默认时,不管容器的宽度,文本都将水平填充。 css 简单的CSS代码就能在容器中调整文本: pre{ white-space: pre-line; word-wrap: break-word; } 效果看起来如下: css 9、制造模糊文本 想要让文本模糊? 可以使用color透明和text-shadow实现。 .blurry-text{ color: transparent; text-shadow: 005pxrgba(0,0,0,0.5); } 10、用CSS动画实现省略号动画 这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像。 .loading: after{ overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis2sinfinite; content: "\2026";/*asciicodefortheellipsischaracter*/ } @keyframesellipsis{ from{ width: 2px; } to{ width: 15px; } } 11、样式重置 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} html{height: 101%} body{font-size: 62.5%;line-height: 1;font-family: Arial,Tahoma,sans-serif} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block} ol,ul{list-style: none} blockquote,q{quotes: none} blockquote: before,blockquote: after,q: before,q: after{content: '';content: none} strong{font-weight: bold} table{border-collapse: collapse;border-spacing: 0} img{border: 0;max-width: 100%} p{font-size: 1.2em;line-height: 1.0em;color: #333} 12、典型的CSS清除浮动 .clearfix: after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} .clearfix{display: inline-block;} html[xmlns].clearfix{display: block;} *html.clearfix{height: 1%;} 13、新版清除浮动(2011) .clearfix: before,.container: after{content: "";display: table;} .clearfix: after{clear: both;} /*IE6/7*/ .clearfix{zoom: 1;} 14、跨浏览器的透明 .transparent{ filter: alpha(opacity=50);/*internetexplorer*/ -khtml-opacity: 0.5;/*khtml,oldsafari*/ -moz-opacity: 0.5;/*mozilla,netscape*/ opacity: 0.5;/*fx,safari,opera*/ } 15、CSS引用模板 blockquote{background: #f9f9f9;border-left: 10pxsolid#ccc;margin: 1.5em10px;padding: .5em10px;quotes: "\201C""\201D""\2018""\2019"} blockquote: before{color: #ccc;content: open-quote;font-size: 4em;line-height: .1em;margin-right: .25em;vertical-align: -.4em} blockquotep{display: inline} 16、个性圆角 #container{ -webkit-border-radius: 4px3px6px10px; -moz-border-radius: 4px3px6px10px; -o-border-radius: 4px3px6px10px; border-radius: 4px3px6px10px; } /*alternativesyntaxbrokenintoeachline*/ #container{ -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; } 17、通用媒体查询 /*Smartphones(portraitandlandscape)-----------*/ @mediaonlyscreen and(min-device-width: 320px)and(max-device-width: 480px){ /*Styles*/ } /*Smartphones(landscape)-----------*/ @mediaonlyscreenand(min-width: 321px){ /*Styles*/ } /*Smartphones(portrait)-----------*/ @mediaonlyscreenand(max-width: 320px){ /*Styles*/ } /*iPads(portraitandlandscape)-----------*/ @mediaonlyscreenand(min-device-width: 768px)and(max-device-width: 1024px){ /*Styles*/ } /*iPads(landscape)-----------*/ @mediaonlyscreenand(min-device-width: 768px)and(max-device-width: 1024px)and(orientation: landscape){ /*Styles*/ } /*iPads(portrait)-----------*/ @mediaonlyscreenand(min-device-width: 768px)and(max-device-width: 1024px)and(orientation: portrait){ /*Styles*/ } /*Desktopsandlaptops-----------*/ @mediaonlyscreenand(min-width: 1224px){ /*Styles*/ } /*Largescreens-----------*/ @mediaonlyscreenand(min-width: 1824px){ /*Styles*/ } /*iPhone4-----------*/ @mediaonlyscreenand(-webkit-min-device-pixel-ratio: 1.5),onlyscreenand(min-device-pixel-ratio: 1.5){ /*Styles*/ } 18、现代字体栈 /*TimesNewRoman-basedserif*/ font-family: Cambria,"HoeflerText",Utopia,"LiberationSerif","NimbusRomanNo9LRegular",Times,"TimesNewRoman",serif; /*AmodernGeorgia-basedserif*/ font-family: Constantia,"LucidaBright",Lucidabright,"LucidaSerif",Lucida,"DejaVuSerif,""BitstreamVeraSerif","LiberationSerif",Georgia,serif; /*AmoretraditionalGaramond-basedserif*/ font-family: "PalatinoLinotype",Palatino,Palladio,"URWPalladioL","BookAntiqua",Baskerville,"BookmanOldStyle","BitstreamCharter","NimbusRomanNo9L",Garamond,"AppleGaramond","ITCGaramondNarrow","NewCenturySchoolbook","CenturySchoolbook","CenturySchoolbookL",Georgia,serif; /*TheHelvetica/Arial-basedsansserif*/ font-family: Frutiger,"FrutigerLinotype",Univers,Calibri,"GillSans","GillSansMT","MyriadPro",Myriad,"DejaVuSansCondensed","LiberationSans","NimbusSansL",Tahoma,Geneva,"HelveticaNeue",Helvetica,Arial,sans-serif; /*TheVerdana-basedsansserif*/ font-family: Corbel,"LucidaGrande","LucidaSansUnicode","LucidaSans","DejaVuSans","BitstreamVeraSans","LiberationSans",Verdana,"VerdanaRef",sans-serif; /*TheTrebuchet-basedsansserif*/ font-family: "SegoeUI",Candara,"BitstreamVeraSans","DejaVuSans","BitstreamVeraSans","TrebuchetMS",Verdana,"VerdanaRef",sans-serif; /*Theheavier"Impact"sansserif*/ font-family: Impact,Haettenschweiler,"FranklinGothicBold",Charcoal,"HelveticaInserat","BitstreamVeraSansBold","ArialBlack",sans-serif; /*Themonospace*/ font-family: Consolas,"AndaleMonoWT","AndaleMono","LucidaConsole","LucidaSansTypewriter","DejaVuSansMono","BitstreamVeraSansMono","LiberationMono","NimbusMonoL",Monaco,"CourierNew",Courier,monospace; 19、自定义文本选择 : : selection{background: #e2eae2;} : : -moz-selection{background: #e2eae2;} : : -webkit-selection{background: #e2eae2;} 20、为logo隐藏H1 h1{ text-indent: -9999px; margin: 0auto; width: 320px; height: 85px; background: transparenturl("images/logo.png")no-repeatscroll; } 21、图片边框偏光 img.polaroid{ background: #000;/*Changethistoabackgroundimageorremove*/ border: solid#fff; border-width: 6px6px20px6px; box-shadow: 1px1px5px#333;/*Standardblurat5px.Increaseformoredepth*/ -webkit-box-shadow: 1px1px5px#333; -moz-box-shadow: 1px1px5px#333; height: 200px;/*Settoheightofyourimageordesireddiv*/ width: 200px;/*Settowidthofyourimageordesireddiv*/ } 22、锚链接伪类 a: link{color: blue} a: visited{color: purple} a: hover{color: red} a: active{color: yellow}1. 2. 3. 4. 23、奇特的CSS引用 .has-pullquote: before{ /*Resetmetrics.*/ padding: 0; border: none; /*Content*/ content: attr(data-pullquote); /*Pullouttotheright,modularscalebasedmargins.*/ float: right; width: 320px; margin: 12px-140px24px36px; /*Baselinecorrection*/ position: relative; top: 5px; /*Typography(30pxline-heightequals25%incrementalleading)*/ font-size: 23px; line-height: 30px; } .pullquote-adelle: before{ font-family: "a
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 常用 CSS 技巧 代码 整理
![提示](https://static.bdocx.com/images/bang_tan.gif)