太阳能光伏网站开发过程中CSS的总结

本次开发用到不少CSS样式的知识，在这里做个简单的总结

1.在样式布局开始时，建议将padding与margin设置为0

2.如果某些选择器的风格完全相同或者部分相同，可以使用并集选择器，如下例：

/* 兼容火狐，ie，谷歌*/
/* 18块方格内容样式*/
.hqxx_1 p, .hqxx_2 p, .hqxx_3 p,
.cyxx_1 p, .cyxx_2 p, .cyxx_3 p,
.jscx_1 p, .jscx_2 p, .jscx_3 p,
.rdjj_1 p, .rdjj_2 p, .rdjj_3 p,
.qyjs_1 p, .qyjs_2 p, .qyjs_3 p,
.hyfz_1 p, .hyfz_2 p, .hyfz_3 p
{
	padding: 5px;
	text-indent: 2em;
}

3.可以使用CSS样式对某一部分内容进行省略：代码如下

   在ie8以及火狐下开始没有限制display的类型，直接导致结果无法省略，加上display：block以后，ie8和火狐下都可以正常显示省略
    {
    display: block;
    white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
    }

white-space: nowrap 是为了保证无论单元格中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

在上面三个属性里overflow比较多用，overflow常用的值有scroll和auto分别有如下意思：

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 

4.cursor的使用：属性规定要显示的光标的类型常用的属性如下：

default ：默认光标（通常是一个箭头），表示为正常的页面 
pointer ： 光标呈现为指示链接的指针（一只手），表示为可以点击的内容，比如宽度，链接等 
text ： 此光标指示文本，形状为一个竖杠，表示此部分内容可以编辑 

注意：在IE下cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但火狐下cursor:hand不被支持。

5.z-index 的使用；在这次开发中，有一次我写在修改滑动条的红线时，当滑动条横线和边框线重叠，红线就会被灰色的边框线遮盖，后来老大说可能是 z-index 没有设置，这才查了下z-index 的使用方法：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

所以z-index的值越大，堆叠顺序越高。比如 z-index:-1的顺序要比 z-index:1低;[[BR]]

6. word-wrap：属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象，他有两个值，分别为normal 与break-word ，具体用法如下：
   
   • normal :　 默认值。允许内容顶开指定的容器边界 如下图： 
   • break-word :　 内容将在边界内换行。如果需要，词内换行( word-break )也将发生 ，如下图： 

7.text-align 属性规定元素中的文本的水平对齐方式：该属性通过指定行框与哪个点对齐，该属性通过指定行框与哪个点对齐。在一个 div 对象里的所有块对象的会继承此属性值。此属性有以下几个可能值：

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

8.text-decoration 属性规定添加到文本的修饰。

• text-decoration是文字装饰的意思:前面其实已经提到了，之所以强调它是想说，你无法把它加在非文字的元素上，比如img，比如table。
• text-decoration的颜色由color决定：之所以如此，是因为文字的颜色就是由color定义的。如果你发觉文字颜色与划线颜色不一致，那你得确定下你在什么上面加的text- decoration。
• text-decoration的粗细不受文字大小影响：事实证明，即使是12px与120px的文字各加上text-decoration，它们的划线粗细都是一样的（貌似永远是1px粗）。
• text-decorationverline;是定义上划线：不是中划线，中划线是line-through。overline的意思很容易搞混，所幸的是，上划线几乎是一个从未派上用场的属性。
• 值如下：

none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 

10.outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。如果不需要，将其值设置为none，操作如下：

• outline:none;
• outline 简写属性在一个声明中设置所有的轮廓属性。如下：

  p
    {
    outline:#00FF00 dotted thick;
    }
  
  

• outline 还可以像padding和margin一样按顺序设定值,如： outline-color 
  outline-style 
  outline-width 
  

11.本次光伏项目定位属性用的非常频繁，常用的定位属性有：position、z-index、top、right、left、bottom。

• position 属性规定元素的定位类型，常用的值有相对与绝对，这里有一篇博客讲的比较清晰，我们看以参考下​http://www.cnblogs.com/yinc/articles/2017649.html
• top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
• left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
• z-index已经已经讲过，此处不再啰嗦。

top、right、left、bottom 等属性的值均是一样的，所以在这里统一给出：

auto 默认值。通过浏览器计算上边缘的位置。 
% 设置以包含元素的百分比计的上边位置。可使用负值。 
length 使用 px、cm 等单位设置元素的上边位置。可使用负值。 
inherit 规定应该从父元素继承 top 属性的值。 

12.display 属性规定元素应该生成的框的类型，常用的值有下边三个：

• none 此元素不会被显示。
• block 此元素将显示为块级元素，此元素前后会带有换行符。
• inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block 行内块元素。（CSS2.1 新增的值） 
  在这个博客里对display的上面几个属性做了详细的区分​http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

13.在对段落内容的首行进行缩进时，用到了text-indent，这个属性允许使用负值。如果使用负值，那么首行会被缩进到左边。

如下例：

 将段落的第一行缩进 50 像素：

p
  {
  text-indent:50px;
  }

• 缩进的值可以如例子一样使用像素或距离，也可以使用百分比。

14.CSS 尺寸属性：这次项目中用到了height，width

• height 设置元素高度。
• width 设置元素的宽度。 
  

height，width可用的值有以下种类：

auto 默认。浏览器会计算出实际的高度。 
length 使用 px、cm 等单位定义高度。 
% 基于包含它的块级对象的百分比高度。 

15.在这次开发过程中，float我用的不多，而江龙用的较多，这里我将其基本用法阐述：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

• 这里有一篇博客，对float讲的比较透彻，大家可以看看：​http://paranimage.com/css-float-attribute/
• float的常用值如下：
  left ： 元素向左浮动。 
  right ： 元素向右浮动。 
  none ： 默认值。元素不浮动，并会显示在其在文本中出现的位置。 
  

16.锚伪类是最常用的伪类，在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，下边这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

• a:link {color: #FF0000} 未访问的链接
• a:visited {color: #00FF00} 链接访问过后的样式（只要访问历史记录存在）
• a:hover{color:#FF00FF} 鼠标悬停样式
• a:active{color:#0000FF} 鼠标按下样式

17.样式修改时注意：避免整个文件进行复制，只改变或‌新建不兼容的部分；在新建样式时整个文件全局搜索，避免命名的重复，后面的覆盖前面的。

18.设置全局样式，便于维护。对于有相同规则的样式，如图片滑动，栏目切换，内容滑动切换等等均可以设置全局样式

19.在新建页面时，谨记：扩展性，因为客户的欣赏水平有可能随时改变，比他们多想几个点来满足今后的扩展和优化。

20.内容过长，加一个局部滚动条，或者动态加载

21.背景随内容自动扩展，方法：将存放内容的div对于父div设置成相对位置 

22.footer（每个页面的公共部分），根据内容或条目的增减会自动上调或下移。这个实现方式有两种：将footer相对父div设置成相对位置；或者用js动态改变其样式（位置）