1. 首页
  2. 代码片断库
  3. CSS
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

CSS 如何：在WordPress 2.7中设置作者评论

li.bypostauthor {
   /* CSS styles for author comments */ 
}

li.byuser { 
   /* CSS styles for registered users comments */ 
}

CSS 圆边CSS

-moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px;
-moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px;

CSS 酒吧

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My First CSS WebSite</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.header {
background-color: #9A060B;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
.quote {
width: 100%;
background-color: #EEE;
color: #000;
font-size: 8pt;
font-weight: bold;
padding: 2px;
border-bottom: 1px solid #000;
text-align: right;
}
</style>
</head>
<body>
<div class="header">CSS Website</div>
<div class="quote">Because CSS is Awesome</div>
</body>
</html>

CSS 单击颜色名称以更改文本颜色

<html>
<head>
<title>Click the color name to change the text color: </title>
 
<style type="text/css">
  .red {color:red}
 .green {color:green}
 .blue {color:blue}
</style>
 
</head>

<body>

<center>
<h4>Click the color name to change the text color: </h4>
<table width="70%" border="1" cellspacing="3" cellpadding="3">
<tr> 
<td width="25%"><a href="#; return false;" onClick="document.all.one.className='red'" 
                 onMouseOver="this.style.background='red';this.style.color='white';" 
                 onMouseOut="this.style.background='';this.style.color='';">Red</a>
</td>
    
<td rowspan="3"><span id="one">Click the color name to change the text color. 
                               This is changing className by javascript.</span> 
</td>
</tr>
 
<tr> 
<td><a href="#; return false;" onClick="document.all.one.className='green'" 
     onMouseOver="this.style.background='green';this.style.color='white';" 
     onMouseOut="this.style.background='';this.style.color='';">Green</a>
</td>
</tr>
<tr> 
<td><a href="#; return false;" onClick="document.all.one.className='blue'" 
     onMouseOver="this.style.background='blue';this.style.color='white';" 
     onMouseOut="this.style.background='';this.style.color='';">Blue</a>
</td>
</tr>
</table>
<br>

</center>
</body>
</html>

CSS CSS媒体类型支持

**************************************************
********************** HTML **********************
**************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<title>CSS Media Type Support</title>
	
	<link rel="stylesheet" href="mediaTest.css" media="all" type="text/css">
	
	<style type="text/css" media="all">
		table {
			border-collapse:collapse;
			font-family:Arial, Helvetica, sans-serif;
			font-size:0.9em;
		}
		caption {
			margin-bottom:0.5em;
		}
		th, td {
			border:1px solid gray;
			padding:0.5em;
			text-align:center;
			width:50%;
		}
		th {
			white-space:nowrap;
			width:auto;
			font-weight:bolder;
		}
	</style>
	
</head>
<body>
	
	<p><a href="/">Back to main page</a></p>

	<table summary="List of CSS media types and an indication if they are in use.">
		<caption>CSS Media Types</caption>
		<tr>
			<th>Media Type</th>
			<th>Applied?</th>
		</tr>
		<tr>
			<td>Audio</td>
			<td class="audio"><span>is in use</span></td>
		</tr>
		<tr>
			<td>Aural</td>
			<td class="aural"><span>is in use</span></td>
		</tr>
		<tr>
			<td>Braille</td>
			<td class="braille"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Embossed</td>
			<td class="embossed"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Handheld</td>
			<td class="handheld"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Print</td>
			<td class="print"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Projection</td>
			<td class="projection"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Screen</td>
			<td class="screen"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Speech</td>
			<td class="speech"><span>is in use</span></td>
		</tr>
		<tr>
			<td>TTY</td>
			<td class="tty"><span>In Use</span></td>
		</tr>
		<tr>
			<td>TV</td>
			<td class="tv"><span>In Use</span></td>
		</tr>
	</table>
	
	<p>
	I've found that Opera supports the most, including Aural, Handheld, Print, Projection (full screen), Screen, and 
	Speech. Firefox supports Print, Projection, and Screen. Safari, IE, and K-Meleon only support Print and Screen.
	</p>
	
</body>
</html>

**************************************************
********************** CSS ***********************
**************************************************

.audio, .aural, .braille, .embossed, .handheld, .print, .projection, .screen, .speech, .tty, .tv { background-color:#FFF; }
.audio span, .aural span, .braille span, .embossed span, .handheld span, .print span, .projection span, .screen span, 
.speech span, .tty span, .tv span { display:none; }
@media audio { .audio { background-color:#CF9; } .audio span { display:inline; } }
@media aural { .aural { background-color:#CF9; } .aural span { display:inline; } }
@media braille { .braille { background-color:#CF9; } .braille span { display:inline; } }
@media embossed { .embossed { background-color:#CF9; } .embossed span { display:inline; } }
@media handheld { .handheld { background-color:#CF9; } .handheld span { display:inline; } }
@media print { .print { background-color:#CF9; } .print span { display:inline; } }
@media projection { .projection { background-color:#CF9; } .projection span { display:inline; } }
@media screen { .screen { background-color:#CF9; } .screen span { display:inline; } }
@media speech { .speech { background-color:#CF9; } .speech span { display:inline; } }
@media tty { .tty { background-color:#CF9; } .tty span { display:inline; } }
@media tv { .tv { background-color:#CF9; } .tv span { display:inline; } }

CSS DivIt

.ds .d90  { width: 90%; }
.ds .d80  { width: 80%; }
.ds .d75  { width: 75%; }
.ds .d70  { width: 70%; }
.ds .d66  { width: 66.66%; }
.ds .d60  { width: 60%; }
.ds .d50  { width: 50%; }
.ds .d40  { width: 40%; }
.ds .d33  { width: 33.33%; }
.ds .d30  { width: 30%; }
.ds .d30  { width: 30%; }
.ds .d25  { width: 25%; }
.ds .d20  { width: 20%; }
.ds .d10  { width: 10%; }

.ds .d90, .ds .d80, .ds .d75, .ds .d70,
.ds .d66, .ds .d60, .ds .d50, .ds .d40, .ds .d33,
.ds .d30, .ds .d25, .ds .d20, .ds .d10
{ float: left; overflow: hidden; *margin-left: -0.04em }

CSS 基本结构

@import url('reset.css'); /* CSS Reset */
@import url('divit.css'); /* DivIt gs  */

/* === <tags /> ====================== */
body {
  font: 62.5%/1.75 'lucida grande', verdana, sans-serif;
  color: #333; background: #ddd; text-align: center;
}
 
a {
  color: #000;
  text-decoration: none;
}
acronym, abbr {
  border-bottom: 1px dotted #ddd;
}
 
h1, h2, h3, h4, h5, h6 {
  color: #000;
}
h1 {
  font-size: 2.4em; /* 24px */
}
h2 {
  font-size: 2.2em; /* 22px */
}
h3 {
  font-size: 2.0em; /* 20px */
}
h4 {
  font-size: 1.8em; /* 18px */
}
h5 {
  font-size: 1.6em; /* 16px */
}
h6 {
  font-size: 1.4em; /* 14px */
}
 
p, ul, ol, dl {
  font-size: 1.2em; /* 12px */
  margin-bottom: 0.5em;
}

/* === .classes ====================== */
.hide {
	display: none;
}
.wrapper {
	width: 800px;
	text-align: left;
	margin: auto;
}

/* === #ids ========================== */

CSS CSS Reseter

/* v1.0 | 20080212 */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS 没有预加载的快速翻转

#menu a { background: url("button.gif") 0 0 no-repeat; ... } 

#menu a:hover { background-position: -157px 0; ... } 

#menu a:active { background-position: -314px 0; ... }

CSS 天使LMS课程标题图像替换

#bannerSection h1 {
    background: black url( your-image-url ) no-repeat;
    height:100px; /* height of your image */
    margin:0.5em auto 0 0.8em; 
    padding:0.4em 0 0.4em 25px;
    text-indent:-9999px;
    width:auto;
}