css学习

关于class与ID

在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。


　例子: 
#top {
     background-color: #ccc;
     padding: 1em
}

.intro {
     color: red;
     font-weight: bold;
}

　　html页面通过id和class属性调用CSS，像下面这样：


　例子: 
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

　　id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。

     ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服。
     从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

文章出处：DIY部落(http://www.diybl.com/course/1_web/css/cssjs/200824/98898.html)

在选择器中使用属性：
1、myElement[myAttribute]:元素包含一个名为myAttribute的属性；
2、myElement[myAttribute=myValue]:元素包含一个名为myAttribute的属性,并且该属性的值为myValue;
3、myElement[myAttribute~=myValue]:元素包含一个名为myAttribute的属性,该属性的值是由空格分隔的单词列表，并且其中某一   个单词正好为myValue;
4、myElement[myAttribute|=myValue]:元素包含一个名为myAttribute的属性,该属性的值是由一个连字符分隔的单词列表，并且该列表以myValue打头。


将超出的部分用省略号代替
text-overflow : clip | ellipsis
clip      : 默认值。不显示省略标记(...)，而是简单的裁切
ellipsis  : 当对象内文本溢出时显示省略标记(...)


word-wrap : normal | break-word
normal      : 默认值。允许内容顶开指定的容器边界
break-word  : 内容将在边界内换行。如果需要，词内换行( word-break )也将发生

word-break : normal | break-all | keep-all
normal     : 默认值。允许在词间换行
break-all  : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚               洲文本
keep-all   : 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

writing-mode : lr-tb | tb-rl
lr-tb  : 默认值。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。
           所有的字形都是竖直向上的。这种布局是罗马语系使用的
tb-rl  : 上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。
           后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。
           这种布局是东亚语系通常使用的。


text-indent : length
length  : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位。
            检索或设置对象中的文本的缩进。默认值为 0 。在被另一个对象(如 br )断开的对象内不能应用本属性。

white-space : normal | pre | nowrap
normal  : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre     : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为
            standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode，
            此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap  : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性


vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
auto         : CSS1  根据 layout-flow 属性的值对齐对象内容
baseline     : CSS1  默认值。将支持 valign 特性的对象的内容与基线对齐
sub          : CSS1  垂直对齐文本的下标
super        : CSS1  垂直对齐文本的上标
top          : CSS1  将支持 valign 特性的对象的内容对象顶端对齐
text-top     : CSS1  将支持 valign 特性的对象的文本与对象顶端对齐
middle       : CSS1  将支持 valign 特性的对象的内容与对象中部对齐
bottom       : CSS1  将支持 valign 特性的对象的内容与对象底端对齐
text-bottom  : CSS1  将支持 valign 特性的对象的文本与对象顶端对齐
length       : CSS2  由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。
                 定义由基线算起的偏移量。基线对于数值来说为0，
                 对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

text-shadow : color || length || length || opacity
color   : 指定颜色。请参阅 颜色单位 和 附录：颜色表 
length  : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。请参阅 长度单位 
length  : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。请参阅 长度单位 
opacity : 由浮点数字和单位标识符组成的长度值。不可为负值。
            指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。