css学习2

  1 、 
   css的边框用border来设置 。    可以设置任何html元素的边框的样式 宽度颜色 等等 

   border: dashed 3px blue ;  直接设置border的样式 ,那么 left rigth bottom top都会自动设置
  
   border-left :dashed 3px blue ;  也可以这样设置

   border-left-width：3px  也可以精确设置 

   border-style :dashed ;设置边框的样式 、
 
   具体看文档。

2、img 标签中的图像可以用  css样式的height 和 width设置样式 。

    例 img{height:110px ; width:50% ;}  
   
    高度是110px ;  宽度是父标签的一半这里也就是浏览器 的一半锁以这张图片可以自适应窗口的大小 。 

   text-align不仅仅可以设置文本对齐方式 还可以设置图片的对齐 这里的对齐主要是指水平对齐  ；

   virtical-align  设置垂直对齐方式  

   fileFox浏览器和IE浏览器对于对齐方式的显示效果不尽相同使用的时候应该使用相同的对齐方式。 

3、图文混排  float:left;可以使先图文混排 头文字下沉的效果   left左边下沉
   
   right右边下沉
   left左边下沉 
  
   将图片放在文本前然后设置 float属性的值便可以实现 文字环绕图片的效果也叫图文混排
   
 
 4、background-image  css设置背景图片  

   如果一张小图片被设置成了html背景图片那么 他将会在x y轴上 粘贴满 , 

   我们可以设置css样式来 限制  

   background-repeat  的属性来设置 图像的平铺方式   

    repeat : 　背景图像在纵向和横向上平铺
    no-repeat : 　背景图像不平铺
    repeat-x : 　背景图像在横向上平铺
    repeat-y : 　背景图像在纵向平铺   

   background-position:bottom  right ;   可以控制 背景图片在html窗口中的位置 。。 
  
   background-attachment : scroll | fixed   设置背景图片是固定的还是可以移动的

   继承性和覆盖性css       还可以设置绝对位置  相对于左上 

  img标签后字体会换行显示  

  利用表格控制文本显示的时候 需要设置水平对齐和  垂直对齐  。

  text-align  virtical-align   

   图片和文字有时候可以放在一个 段落中进行处理  对body设置text-align可以使div等对齐  

5、指定标题列。标题列将在单元格中居中并以粗体显示 th 表示列标题    caption表示table标题会在表格上居中显示 

  css设置的背景颜色是针对全部的背景 比如表格 对table设置背景那么就是相对于 全部表格 以及子元素的颜色 

  border-collapse : separate | collapse   设置表格的边线是分开还是合并成一个线
  border-spacing : length || length   设置表格边框之间的距离  
  我们可以为每个th 和td设置边框来实现内外外部边框 

  span和div树无意义的标签  p标签换行的时候多一行空白 div没有

6、  对于 a标签设置背景图片 标签最大的height  width就是图片的实际尺寸 ,超过无效 。
     当在表格中插入图片的时候  表格会自动被撑大
     对于只有一行一列的table 来说  对于 table  tr  td设置样式的效果基本一样  
 
     xhtml和html在表格中显示超连接按钮的效果不一样 ,xhtml效果不好 。

7、display:block ;  将一个区域变成一个区块 ,区块就和p 一样 一个区块占一行 。这个区块后面的内容自动到下一行显示  
   利用这个属性我么可以设置一个区域的显示效果 例如下面
   a{
       text-decoration:none ;
  border-left:13px solid  #420000 ;
  background-color: #BF0000 ; 
  color:#FFFFFF ;
  font-size:20px ; 
  width:200px  ;
  height:30px ;
  display:block;
  
  }
 
   padding 可以设置内容和父元素之间的边距

8、  margin  和padding的应用   很多时候一个布局的好坏取决于这两个属性

     margin是设置当前元素距离他的外层元素 的边距    设置表格边框 之间的边距的时候用这个  我们需要设置那个元素 就使用那个元素的margin
    
     padding是设置这个元素的内容和 元素内部的边距   适合内容的边距的调整 文字