CSS 2.1 使用手记 By Stabx

标题: CSS 2.1 使用手记 By Stabx

正文:

QUOTE:

CSS 2.1 使用手记 By Stabx

CREATED BY STABX, AT 2006-6-2.

CSS 2.1 使用手记 By shawl.qiu

---/-------------------------------------------------------------------

3. 语法

2. class / 类

1. Selectors / 选择器

附: 闲话片长
-----------------------------------------------------------------------

CODE:

QUOTE:

shawl.qiu<shawl.qiuATgmail.com>
绿色学院 | http://blog.csdn.net/btbtd/
2006-6-11

3.4 背景语法
background: transparent url(images/gi.png) left top fixed no-repeat;

3.3 边线语法
border-top: 0px dashed #0BDADF;
border-right:0px dashed #0BDADF;
border-bottom:1px dashed #000000;
border-left: 0px dashed #0BDADF;
or 
border: 1px solid #000000;

3.2 多个类语法
<style type="text/css">
    .c.c1.c2 { color:blue; }
</style>
<div class="c c1 c2">match</div>
<div class="c c1">not match</div>
<div class="c c1 c2 c3">match</div>
//解读
多个类语法只匹配完全一致, 或者匹配比匹配源更多的类. 

3.1 font 语法
dd {font: bold 14px/150% 宋体; }
//作用为: 粗体 14px大的字体/行高150% 字体为宋体.
注: 必须加上字体, 否则该语句被忽略.

3. 语法

2.3 优先级别 !important
div.at_main * dd {
    border: thin dotted #000000 !important;
    padding:5px;
    }

2.2 定义标签下属标签 
<style type="text/css">
ul.mm_navi a {
color:#FF0000
}
</style>
<ul class="mm_navi"><a id="t">this red</a></ul>
//影响 ul.mm_navi 下的 a 标签


2.1 使用多个类影响一个标签
<style type="text/css">
.a {
color:#FF0000
}
.b {
font-size:24px;
}
</style>
<p class="a b">a 和 b 同时作用于标签 p. </p>

2. 类

1.3.4 :first-line
<style type="text/css">
h1:first-line { 
    font-size: 200%; 
    font-style: italic;
    font-weight: bold; 
    float: left 
  }
</style>
<H1>This headline is <h2>very</h2> important</H1><br />
//作用于 H1 标签的第一行. 

1.3.3 :after
div.at_main:after {content:"CSS 也可以写入内容到 HTML 嘛."}

1.3.2 :before
div.at_main:before {content:"CSS 也可以写入内容到 HTML 嘛."}
//作用:
在指定标签的首部写入 文本内容, HTML 标签无效. 
! IE 6.0 不支持 content 语法.

1.3.1 :first-letter
div.at_main:first-letter {
font-size:150%;
margin:0px 0px 0px 24px;
color:#000000;
background-color:#FFFF00;
}
//作用:
对 DIV 标签内的第一个字起作用, 150% 大, 缩进 24px, 高亮色彩

1.3 使用虚类

1.2 可以使用 通配符, 例:
div.at_main * a:link {
color:#0000FF;
}
//作用:
所有在 div标签 类名称为 at_main 下的 a 链接标签, 颜色全部设置为蓝色, 在 类at_main 里的作用为全局控制. 

1.1 CSS2 可以使用数学符号进行判断, 例:
ul > li > a:link {
color:#0000FF;
}
//作用:
UL 标签 下的 LI 标签 的 A 标签, 链接颜色全部设置为蓝色

1. Selectors

---/-------------------------------------------------------------------

基本常识

4 (.|#)* 为定义全局类或ID

3. tag#* 为定义标签 ID

2. tag.* 为定义标签 类

1. 连接其他 .css 文件
@import url("ctubb.css");
or
@import "ctubb.css";

---/-------------------------------------------------------------------

心得

2. 尽可能的分离标签功能, 一个类一个功能, 需要多个功能再加上另外的类, 但须定义一个唯一标识类
--------------------------------
如:
.fleft { float:left; }
.fright { float:right; }

.cboth { clear:both; }
.cleft { clear:left; }
.cright { clear: right; }

.tleft { text-align:left; }
.tcenter, .center, .figure { text-align:center; }
.tright { text-align:right; }

.tnowrap { white-space:nowrap; }
.ovhidden { overflow:hidden; }
.ovauto { overflow:auto; }
.tbold,.bold { font-weight:bold; }
.mgpd0px {     margin:0px; padding:0px; }
---/------------------
例:
<div class="gtitle pd_5_0px">
<div class="gl_info pd_0_0_12_0px">
--------------------------------

1. 尽可能的少在页面上定义 类 或 ID, 定义一个类 或 ID, 就能操作下面的标签, 但最好不要超过三层.  

---/-------------------------------------------------------------------

难题

1. CSS 实现 圆角功能, 不要一堆垃圾代码, 不用图片. 

---/-------------------------------------------------------------------

小技巧

5. 页面菜单 Compatible
.mainmenu {
    background-color:#E7E8EB;
    display:table;
    width:100%;
    margin:2px 0px;
    }
.mainmenu li {
    float:left;
    text-align:center;
    }
.mainmenu li a {
    padding:0px 10px 0px 5px;
    background-color:#E7E8EB;
    }
.mainmenu li :hover {
    background-color:#002BB8;
    color:#ffffff;
    }

4. 禁止输入形意字 IE Only
<input type=text style="ime-mode: disabled; "> 

3. 滚动条颜色 IE Only
html {/* 设置滚动条颜色 - IE */
    scrollbar-arrow-color: #ffffff;; /*箭头*/
     scrollbar-track-color: #ffffff; /*底色*/
     scrollbar-base-color: #79F479; /*基本色调*/
    scrollbar-face-color: #03D100; /*表面*/
    scrollbar-dark-shadow-color:#252523; /*阴影*/
    }

2. 细线表格 compatible
table{ 
    background-color:#FFFFFF !important; /*表格背景色绝对白色*/
    border-collapse: collapse; /*清除 IE 的默认边框*/
    border: 1px solid #999999;
    }
td, th {
    border-top: 1px solid #999999; /* 设置 1px 比设置为 thin 通用 */
    border-right: 1px solid #999999;
    border-collapse: collapse; /*清除 IE 默认边框*/
    padding:2px;
    }

1.1 强制换行 IE Only
word-wrap: break-word;
//该语句以单词为分界进行换行

1. 强制换行 IE Only
word-break : break-all;
//注意: 该语句以字母为单位或者文字为单位进行换行 

######## 欢迎交流/欢迎赋教 < shawl.qiu@gmai.com> ########