playts: CSS

显示标签为“CSS”的博文。显示所有博文

2009年6月20日星期六

css-hacks-important

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CSS Hacks - !important</title>
  <style type="text/css">
   p{
    background: green !important;
    background: red;
   }
  </style>
 </head>
 <body>
  <p>Test</p>
 </body>
</html>

2009年2月20日星期五

提取Google Project边栏的风格

效果可以看http://code.google.com/p/google-code-prettify/

原理是利用3层的box边框大小

行内容一
行内容二
行内容三

示例代码：

 <div style="background: #e5ecf9; margin-bottom: 0.6em;">
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="margin: 0; padding: 0 13px 0 13px;">
 <ul>
 <li>行内容一</li>
 <li>行内容二</li>
 <li>行内容三</li>
 </ul>
 </div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 </div>

分离CSS和HTML

CSS代码--

.pmeta_bubble_bg {
 background: #e5ecf9;
 margin-bottom: 0.6em;
 width: 300px;
}
.box-inner {
  margin: 0;
  padding: 0 13px 0 13px;
}

.round1 {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.round2 {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.round4 {
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.round1,
.round2,
.round4 {
  font-size: 0;
  margin: 0;
  padding: 0;
  height: 1px;
}

HTML代码--

 <div class="pmeta_bubble_bg">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <div class="round1"></div>
 <div class="round2"></div>
 <div class="round4"></div>
 </div>

2009年2月18日星期三

drupal6.x分页风格仿digg

闲来无事修改drupal6.x分页风格仿digg，效果如下：

CSS代码：

/* 注意：保证以下代码不被默认的代码覆盖
 如果有冲突自行修改
----------------------------------------------- */

/* container
 在低分辨率下（如：800x600）使用默认garland主题时
 防止分页超出页面宽度换行，你可以根据情况注释掉
----------------------------------------------- */
#container{
 width: 980px;
}

/* pager
----------------------------------------------- */
div.item-list ul.pager{
 padding: 0px;
 margin: 1em 0;
 clear: left;
 text-align: center;
 font: 12px/1.4em Arial, Helvetica, sans-serif;
}

div.item-list ul.pager li{
 background-image:none;
 display:inline;
 margin: 0px;
 padding: 0px;
 list-style: none;
 border: none;
}

div.item-list ul.pager a.active,
div.item-list ul li.pager-current,
div.item-list ul li.pager-ellipsis{
 background: #fff;
 text-decoration: none;
 border: 1px solid #9AAFE5;
 color:#105CB6;
 display: block;
 float: left;
 padding: .2em .5em;
 margin-right: 1px;
 cursor:pointer;
}

div.item-list ul li.pager-ellipsis{
 border: none;
 color:#333;
}

div.item-list ul.pager li .active:hover {
 border: 1px solid #2E6AB1;
}

div.item-list ul.pager li.pager-current{
 border: 1px solid #2E6AB1;
 font-weight: bold;
 background: #2E6AB1;
 color: #fff;
 margin-right: 1px;
}

2009年2月17日星期二

RGBa 浏览器支持

原文：RGBa Browser Support

使用例子：

div {background: rgba(200, 54, 54, 0.5);}

关于颜色请参考：http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color

使用RGB:

<div style="background: rgb(0, 0, 128); height: 100px; width: 100px;"></div>

使用RGBA:

<div style="height: 333px; width: 500px;position: relative;">
<img src="http://farm4.static.flickr.com/3223/3290904238_cd8e54d044.jpg" width="500" height="333" />
<div style="position: absolute; height: 313px; top: 10px; left: 10px; width: 480px; background: rgb(51, 102, 0); background: rgba(51, 102, 0, 0.5);">RGBa 浏览器支持</div>
</div>

RGBa 浏览器支持

rgba(0, 0, 128, 0.5)是指颜色为rgb(0, 0, 128)同等#000080，0.5是opacity的值

IE可以使用：filter:alpha(opacity=50);
firefox使用：opacity: 0.5;
看：CSS Transparency Settings for All Browsers

Browser, Version, Platform	Outcome	Fallback
Firefox 3.0.5 (OS X)	Works	--
Firefox 3.0.5 (Windows XP, Vista)	Works	--
Firefox 2.0.0.18 (PC)	Doesn't Work	Solid Color
Safari 4 (Developer Preview, OS X)	Works	--
Safari 3.2.1 (OS X, Windows XP)	Works	--
Mobile Safari (iPhone)	Works	--
Opera 9.6.1	Doesn't Work	Solid Color
Opera 10 Beta (Linux & Windows)	Works	--
IE 4.01	Doesn't Work	No Color
IE 5.5 (PC via IETester)	Doesn't Work	No Color
IE 6 (PC via IETester)	Doesn't Work	Solid Color
IE 7	Doesn't Work	Solid Color
IE 8 beta 2	Doesn't Work	Solid Color
Google Chrome 0.4.154.33 (Windows XP)	Works	--
Google Chrome 1.0.154.46 (Windows XP)	Works	--
Netscape 4.8 (PC)	Doesn't Work	No Color
Navigator 9.0.0.5 Linus	Doesn't Work	Solid Color
SeaMonkey 1.1.14	Doesn't Work	No Color
SeaMonkey 2.0	Works	--
Sunrise 1.7.5	Works	--
Stainless 0.2.5	Works	--
Flock 1.2.7	Doesn't Work	Solid Color
Flock 2.0.2	Works	--
BlackBerry Storm Browser	Works	--
Camino 1.6.6	Doesn't Work	Solid Color
Camino 2.0b1	Works	--
Iceape 1.1.14 (Linux)	Doesn't Work	Solid Color
Kazehakase 0.5.2 (Linux)	Doesn't Work	Solid Color
Avant 11.7 (Windows XP)	Doesn't Work	Solid Color

2009年1月5日星期一

认识了解CSS2.1的font-family

'font-family'
Value: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
Initial: depends on user agent
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

示例 1：

body { font-family: Gill, Helvetica, sans-serif }

<family-name>

在示例 1 中Gill 和 Helvetica 分别是字体的名字

<generic-family> 在示例 1 中 sans-serif 是一个字体序列

generic families的定义

'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western)
'monospace' (e.g. Courier)

serif 是指有衬线的字体，看：衬线体

sans-serif 是指无衬线的字体，看：无衬线体

无衬线体（Sans-serif）有衬线体（serif）

衬线字体的衬线（红色部分）

Examples of fonts that fit this description include:

Latin fonts: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Greek fonts: Bitstream Cyberbit
Cyrillic fonts: Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Hebrew fonts: New Peninim, Raanana, Bitstream Cyberbit
Japanese fonts: Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Arabic fonts: Bitstream Cyberbit
Cherokee fonts: Lo Cicero Cherokee

sans-serif

AaBbCc 123

2009年1月4日星期日

用 CSS 将超出显示宽度的内容隐藏起来

一般的文字截断（适用于内联与块）：

.text-overflow {
display:block;/*内联对象需加*/
width:31em;/*指定宽度*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义：

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}

td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

需要注意的是，这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

2008年7月18日星期五

Default style sheet for HTML 4

This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.

For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
h1            { page-break-before: always }
h1, h2, h3,
h4, h5, h6    { page-break-after: avoid }
ul, ol, dl    { page-break-before: avoid }
}

原文链接：http://www.w3.org/TR/CSS21/sample.html

下面的是CSS2的，看起来和CSS2.1相比更全面一些

Appendix A. A sample style sheet for HTML 4.0

This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4.0 ([HTML40]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS2, including replaced elements (IMG, OBJECT), scripting elements (SCRIPT, APPLET), form control elements, and frame elements.

ADDRESS,
BLOCKQUOTE, 
BODY, DD, DIV, 
DL, DT, 
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4, 
H5, H6, IFRAME, 
NOFRAMES, 
OBJECT, OL, P, 
UL, APPLET, 
CENTER, DIR, 
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }


/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, 
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, 
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, 
COL, COLGROUP, TD, TH, CAPTION 
                { unicode-bidi: embed }
/* End bidi settings */


@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE, 
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3, 
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

原文链接：http://www.w3.org/TR/CSS2/sample.html

订阅：博文 (Atom)