Web开发者不容错过的10段CSS代码-白红宇

Web开发者不容错过的10段CSS代码

阅读量：6151 次

发布时间：2019-06-21

本文共 7538 字，大约阅读时间需要 25 分钟。

　　Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

　　本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

　　1. CSS Resets

　　网络上关于CSS重置的代码非常多。本段代码是根据进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

                         
html, body, div, span, applet, object, iframe, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, 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
; }
        
      

　　2.经典的CSS Clearfix

　　这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

                         
.clearfix:after { 
content
: 
"."
; 
display
: 
block
; 
clear
: 
both
; 
visibility
: 
hidden
; 
line-height
: 
0
; 
height
: 
0
; }
.clearfix { 
display
: inline-
block
; }
 
<font></font>  
html[xmlns] .clearfix { 
display
: 
block
; }
* html .clearfix { 
height
: 
1%
; }
        
      

　　3.升级版的Clearfix

　　在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。

                         
.clearfix:before, .container:after { 
content
: 
""
; 
display
: table; }<font></font>  
.clearfix:after { 
clear
: 
both
; }
/* IE 6/7 */
.clearfix { zoom: 
1
; }
        
      

　　4. Cross-Browser Transparency

　　CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

                         
.
transparent
{ 
    
filter: alpha(opacity=
50
); 
/* internet explorer */
    
-khtml-opacity: 
0.5
;      
/* khtml, old safari */
    
-moz-opacity: 
0.5
;       
/* mozilla, netscape */
    
opacity: 
0.5
;           
/* fx, safari, opera */
}
        
      

　　源码地址：

　　5. CSS Blockquote模板

　　这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。

                         
blockquote { 
    
background
: 
#f9f9f9
;<
    
border-left
: 
10px
solid
#ccc
; 
    
margin
: 
1.5em
10px
;
    
padding
: .
5em
10px
;
    
quotes
: 
"\201C"
"\201D"
"\2018"
"\2019"
;
}
blockquote:before { 
    
color
: 
#ccc
;
    
content
: 
open-quote
;  
    
font-size
: 
4em
;
    
line-height
: .
1em
;
    
margin-right
: .
25em
; 
    
vertical-align
: -.
4em
;
} 
blockquote p { 
    
display
: 
inline
;
}
        
      

　　查看源码：

　　6. 个性化的圆角代码

　　许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

                         
#container { 
    
-webkit-border-radius: 
4px
3px
6px
10px
;
    
-moz-border-radius: 
4px
3px
6px
10px
;
    
-o-border-radius: 
4px
3px
6px
10px
;  
    
border-radius: 
4px
3px
6px
10px
;
}
/* alternative syntax broken into each line */
#container { 
    
-webkit-border-top-left-radius: 
4px
;
    
-webkit-border-top-rightright-radius: 
3px
;
    
-webkit-border-bottom-rightright-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
;
}
        
      

　　7. 一般媒体查询

　　这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

                         
/* Smartphones (portrait and landscape) ----------- */
@media only 
screen
and (min-device-width : 
320px
) and (max-device-width : 
480px
) {  
  
/* Styles */
}  
/* Smartphones (landscape) ----------- */
@media only 
screen
and (min-width : 
321px
) { 
  
/* Styles */
}  
/* Smartphones (portrait) ----------- */
@media only 
screen
and (max-width : 
320px
) { 
  
/* Styles */
} 
/* iPads (portrait and landscape) ----------- */
@media only 
screen
and (min-device-width : 
768px
) and (max-device-width : 
1024px
) { 
  
/* Styles */
} 
<font></font>  
/* iPads (landscape) ----------- */
@media only 
screen
and (min-device-width : 
768px
) and (max-device-width : 
1024px
) and (orientation : 
landscape
) { 
  
/* Styles */
} 
/* iPads (portrait) ----------- */
@media only 
screen
and (min-device-width : 
768px
) and (max-device-width : 
1024px
) and (orientation : 
portrait
) { 
  
/* Styles */
}   
/* Desktops and laptops ----------- */
@media only 
screen
and (min-width : 
1224px
) { 
  
/* Styles */
}
/* Large screens ----------- */
@media only 
screen
and (min-width : 
1824px
) { 
  
/* Styles */
} 
/* iPhone 4 ----------- */
@media only 
screen
and (-webkit-min-device-pixel-ratio:
1.5
), only 
screen
and (min-device-pixel-ratio:
1.5
) { 
  
/* Styles */
}
        
      

　　源码地址：

　　8. 现代字体栈

　　在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问。

                         
/* Times New Roman-based serif */
font-family
: Cambria, 
"Hoefler Text"
, Utopia, 
"Liberation Serif"
, 
"Nimbus Roman No9 L Regular"
, Times, 
"Times New Roman"
, 
serif
;  
  
/* A modern Georgia-based serif */
font-family
: Constantia, 
"Lucida Bright"
, Lucidabright, 
"Lucida Serif"
, Lucida, 
"DejaVu Serif,"
"Bitstream Vera Serif"
, 
"Liberation Serif"
, Georgia, 
serif
;  
  
/*A more traditional Garamond-based serif */
font-family
: 
"Palatino Linotype"
, Palatino, Palladio, 
"URW Palladio L"
, 
"Book Antiqua"
, Baskerville, 
"Bookman Old Style"
, 
"Bitstream Charter"
, 
"Nimbus Roman No9 L"
, Garamond, 
"Apple Garamond"
, 
"ITC Garamond Narrow"
, 
"New Century Schoolbook"
, 
"Century Schoolbook"
, 
"Century Schoolbook L"
, Georgia, 
serif
;  
  
/*The Helvetica/Arial-based sans serif */
font-family
: Frutiger, 
"Frutiger Linotype"
, Univers, Calibri, 
"Gill Sans"
, 
"Gill Sans MT"
, 
"Myriad Pro"
, Myriad, 
"DejaVu Sans Condensed"
, 
"Liberation Sans"
, 
"Nimbus Sans L"
, 
Tahoma
, Geneva, 
"Helvetica Neue"
, 
Helvetica
, 
Arial
, 
sans-serif
;  
  
/*The Verdana-based sans serif */
font-family
: Corbel, 
"Lucida Grande"
, 
"Lucida Sans Unicode"
, 
"Lucida Sans"
, 
"DejaVu Sans"
, 
"Bitstream Vera Sans"
, 
"Liberation Sans"
, 
Verdana
, 
"Verdana Ref"
, 
sans-serif
;  
  
/*The Trebuchet-based sans serif */
font-family
: 
"Segoe UI"
, Candara, 
"Bitstream Vera Sans"
, 
"DejaVu Sans"
, 
"Bitstream Vera Sans"
, 
"Trebuchet MS"
, 
Verdana
, 
"Verdana Ref"
, 
sans-serif
;  
  
/*The heavier “Impact” sans serif */
font-family
: Impact, Haettenschweiler, 
"Franklin Gothic Bold"
, Charcoal, 
"Helvetica Inserat"
, 
"Bitstream Vera Sans Bold"
, 
"Arial Black"
, 
sans-serif
;  
  
/*The monospace */
font-family
: Consolas, 
"Andale Mono WT"
, 
"Andale Mono"
, 
"Lucida Console"
, 
"Lucida Sans Typewriter"
, 
"DejaVu Sans Mono"
, 
"Bitstream Vera Sans Mono"
, 
"Liberation Mono"
, 
"Nimbus Mono L"
, Monaco, 
"Courier New"
, 
Courier
, 
monospace
;
        
      

　　源码地址：

　　9. 自定义文本选择

　　一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

                         
::selection { 
background
: 
#e2eae2
; }
::-moz-selection { 
background
: 
#e2eae2
; }
::-webkit-selection { 
background
: 
#e2eae2
; }
        
      

　　10.隐藏Logo上的H1文本

                         
h
1
{ 
    
text-indent
: 
-9999px
;  
    
margin
: 
0
auto
;
    
width
: 
320px
;
    
height
: 
85px
;
    
background
: 
transparent
url
(
"images/logo.png"
) 
no-repeat
scroll
; 
}
        
      

转载地址：http://cogya.baihongyu.com/

你可能感兴趣的文章