通过维基百科知道,Cascading Style Sheets (CSS) 是一种样式表达语言，用于文档的外观和格式的标记。 我们最常用到的是在 html 和 xhtml 中，css同样也可以用于任何类型的XML、SVG、XUL文档。 下面给出一些收集的常用CSS片段：

先给一个 html base template

在来一个css的基础样式模版

/*     Document   : ${name}    Created on : ${date}, ${time}    Author     : ${user}    Description:        Purpose of the stylesheet follows.*//* html5doctor.com Reset Stylesheetv1.6.1Last Updated: 2010-09-17Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark*/html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}/* Minimal base stylesMore Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css*/html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll}a:link{-webkit-tap-highlight-color:#FF5E99}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:2em}ol{list-style-type:decimal}nav ul,nav li{list-style:none;list-style-image:none;margin:0}small{font-size:85%}b,strong,th{font-weight:700}td{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}pre{padding:15px;white-space:pre-wrap;word-wrap:break-word}.ie6 legend,.ie7 legend{margin-left:-7px}button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto}textarea{overflow:auto;vertical-align:text-top}label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer}input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}input:invalid,textarea:invalid{-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;border-radius:1px;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}.ie7 img{-ms-interpolation-mode:bicubic}/* ------------------------- Backgrounds *//*body {background:url("../images/im_bg.gif") left top repeat;}*//* ------------------------- Generic */body {    /*color:#ffffff;*/}.clear {clear:both;}img { /* Needed for mobile */    display:block;    margin-left:auto;    margin-right:auto;    width:100%;}/* ------------------------- Typography */strong {font-weight:bold;}p {}h1 {}h2 {}h3 {}h4 {}h5 {}h6 {}address {}pre, code {font-family: monospace;}/* Links */a, a:visited, a:active {}a:hover {}/* ------------------------- Forms */input {}select {}label {}/* ------------------------- Lists *//* ------------------------- Layout *//* ------------------------- Popups *//* ------------------------- Media Queries *//* ---------------------------------------------------------------------------- *//* MEDIA QUERIES -------------------------------------------------------------- *//* ---------------------------------------------------------------------------- *//** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ */@media print {  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */  a, a:visited { color: #444 !important; text-decoration: underline; }  a[href]:after { content: " (" attr(href) ")"; }  abbr[title]:after { content: " (" attr(title) ")"; }  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */  tr, img { page-break-inside: avoid; }  img { max-width: 100% !important; }  @page { margin: 0.5cm; }  p, h2, h3 { orphans: 3; widows: 3; }  h2, h3{ page-break-after: avoid; }}/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {    /* Styles */}/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px)and (max-width : 480px) {    /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-width : 481px)and (max-width : 768px) {    /* Styles */}/* iPads (landscape) ----------- */@media only screen and (min-width : 769px) and (max-width : 1024px) {    /* Styles */}/* Larger screens ----------- */@media only screen and (min-width : 1024px) {    /* Styles */}

将图片垂直居中放在一个容器里

The markup:
    
     
     
    
The CSS:
    

按媒体大小显示media

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

网站的安全字体列表

font-family: Arial, Helvetica, sans-serif;font-family: 'Arial Black', Gadget, sans-serif;font-family: 'Bookman Old Style', serif;font-family: 'Comic Sans MS', cursive;font-family: Courier, monospace;font-family: 'Courier New', Courier, monospace;font-family: Garamond, serif;font-family: Georgia, serif;font-family: Impact, Charcoal, sans-serif;font-family: 'Lucida Console', Monaco, monospace;font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-family: 'MS Sans Serif', Geneva, sans-serif;font-family: 'MS Serif', 'New York', sans-serif;font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;font-family: Symbol, sans-serif;font-family: Tahoma, Geneva, sans-serif;font-family: 'Times New Roman', Times, serif;font-family: 'Trebuchet MS', Helvetica, sans-serif;font-family: Verdana, Geneva, sans-serif;font-family: Webdings, sans-serif;font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Pure CSS 文字渐变

/ CSS text gradients /    h2[data-text] {        position: relative;    }    h2[data-text]::after {        content: attr(data-text);        z-index: 10;        color: #e3e3e3;        position: absolute;        top: 0;        left: 0;        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)),    }

Bootstrap 下拉导航鼠标经过弹出

ul.nav li.dropdown:hover ul.dropdown-menu{    display: block;}/* if you want to hide the arrow */a.menu:after, .dropdown-toggle:after {  content: none;}

修改 Undered List (ul) 点颜色

ul li {    color: black;    list-style-type: none;}ul li:before {    color: red;    float: left;    margin: 0 0 0 -0.89em;    font-size: 2em;    content: '\2022';}

固定页脚

#footer {   position:fixed;   left:0px;   bottom:0px;   height:30px;   width:100%;   background:#999;}/* IE 6 */* html #footer {   position:absolute;   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document: .document Element;.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document: ;.documentElement.scrollTop : document.body.scrollTop))+'px');}

CSS Blockquote 样式

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