css常用樣式

標籤：lin   parent   屬性   ==   expr   儲存格   auto   die   shadow   

box-shadow

Chrome和Safari 寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。

.box-shadow-6{      box-shadow:-10px 0 10px red, /*左邊陰影*/      10px 0 10px yellow, /*右邊陰影*/      0 -10px 10px blue, /*頂部陰影*/      0 10px 10px green; /*底邊陰影*/  }

 

根據input的type來控制css樣式

1.用css中的type選取器

input[type="text"]{ }

2.用css的expression判斷運算式

input{ background-color:expression(this.type=="text"?‘#FFC‘:‘‘);}

 css強制性換行

div{  word-break:break-all; /*支援IE，chrome，FF不支援*/  word-wrap:break-word;/*支援IE，chrome，FF*/}

 CSS :first-child 選取器,:last-child選取器,nth-child(IE7,8無效，不識別)

:nth-child(2)選取第幾個標籤，“2可以是你想要的數字”:nth-child(2n)選取偶數標籤，2n也可以是even:nth-child(2n-1)選取奇數標籤，2n-1可以是odd:nth-child(3n+1)自訂選取標籤，3n+1表示“隔二取一”

 css3實現背景色彩坡形

background:-webkit-linear-gradient(top,#FFF,#cb1919);background:-o-linear-gradient(top,#FFF,#cb1919);background:-ms-linear-gradient(top,#FFF,#cb1919);background:-moz-linear-gradient(top,#FFF,#cb1919);background:linear-gradient(top,#FFF,#cb1919);

第一個參數：設定漸層的起始位置。第二個參數：設定起始位置的顏色。第三個參數：設定終止位置的顏色

媒體查詢功能

@media screen and (max-width: 960px){    body{        background: #000;    }}

實現三角形 

div{  position:absolute;  left:50%;  bottom:0;  margin-left:-10px;  width:0;  height:0;   border-width:10px;  border-style:solid dashed dashed dashed;  border-color:transparent transparent #71151c transparent;}

 css3水平垂直置中

div{  display: box;   display: -webkit-box;   display: -moz-box;   -webkit-box-pack:center;   -moz-box-pack:center;   -webkit-box-align:center;   -moz-box-align:center; }

 

樣式改變單詞的大小寫

首字母大寫：text-transform:capitalize

全部大寫：text-transform:uppercase

全部小寫：text-transform:lowercasecase

<span style="text-transform:capitalize;" >this is a test!!!</span>

首字母大寫<inputtype="text"style="text-transform:capitalize;">

全部大寫<inputtype="text"style="text-transform:uppercase;">

全部小寫<inputtype="text"style="text-transform:lowercasecase;">

 

表格文法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)

 

設定表格中的td寬度固定table-layout:fixed

文法：table-layout:automatic | fixed | inherit

 automatic：預設。列寬度由儲存格內容設定。

fixed：列寬由表格寬度和列寬度設定。

inherit：規定應該從父元素繼承 table-layout 屬性的值。

合并表格邊框border-collapse:collapse

文法：border-collapse:separate | collapse | inherit

 separate：預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

collapse：如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

 

css常用樣式