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是設定這個元素的內容和元素內部的邊距   適合內容的邊距的調整文字

css學習2

相關文章