开发者有用的CSS片段
通过维基百科知道,Cascading Style Sheets (CSS) 是一种样式表达语言，用于文档的外观和格式的标记。 我们最常用到的是在 html 和 xhtml 中，css同样也可以用于任何类型的XML、SVG、XUL文档。 下面给出一些收集的常用CSS片段：
先给一个 html base template
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Untitled</title>
<link rel="stylesheet" href="http://link/to/styles.css">
<link rel="stylesheet" href="path/to/styles.css">
<script src="http://link/to/directory/or/file.js"></script>
<script src="path/to/file.js"</script>
<script>
<!-- js scripts -->
</script>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>
在来一个css的基础样式模版
/*
Document : ${name}
Created on : ${date}, ${time}
Author : ${user}
Description:
Purpose of the stylesheet follows.
*/
/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: 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 styles
More 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:
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
The CSS:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
按媒体大小显示media
/* 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 */
}
/* 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 */
}
网站的安全字体列表
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 文字渐变
/<em> CSS text gradients </em>/
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;
}