1.漸變
1.漸變指的是多種顏色平緩變化的一種顯示效果
2.主要因素：色標（一種顏色 及其 出現的位置），一個漸變是由多個色標組成(至少兩個)
3、漸變分類
（1）線性漸變：以直線的方向來填充漸變色
（2）徑向漸變：以圓形的方式實作的填充效果
（3）重復漸變：將線性漸變 或 徑向漸變 重復幾次實作出來
4.線性漸變
屬性：background-image
取值：linear-gradient(angle,color-point1,color-point2,...);
（1）angle
表示漸變填充的方向或角度
取值：
關鍵字： to top / right / bottom / left 從下向上 / 左向右 / 上向下 / 右向左 填充漸變色
角度值：
0deg：從下向上填充漸變色等同于 to top
90deg：從左向右填充漸變色等同于 to right
180deg：從上向下填充漸變色等同于 to bottom
270deg：從右向左填充漸變色等用于 to left
線性漸變角度值：
（2）color-point
表示漸變里各個顏色出現的位置
取值：顏色以及位置的組合，中間用空格隔開
1、red 0% 在填充方向的開始位置處顏色為 紅色 2、green 50% 到填充方向一半的位置處，顏色變為綠色 3、blue 200px 到填充方向的200px的位置處，顏色變為藍色 //從下向上，顏色由紅色向綠色漸變 background:linear-gradient(to top,red 0%,green 100%); //從左下角開始，顏色由紅色到綠色漸變，到50px的位置處變為綠色，并開始由綠色到藍色漸變 background:linear-gradient(45deg,red 0px,green 50px,blue 100%);
5.瀏覽器兼容性
各瀏覽器的新版本都支持漸變屬性
對于不支持的瀏覽器版本，可以通過增加瀏覽器前綴的方式，讓瀏覽器支持漸變
Firefox : -moz-
Chrome & Safari : -webkit-
Opera : -o-
IE : -ms-
#container .btn-submit{
background:linear-gradient(0deg,red,blue);
background:-moz-linear-gradient(0deg,red,blue);
background:-webkit-linear-gradient(0deg,red,blue);
background:-o-linear-gradient(0deg,red,blue);
background:-ms-linear-gradient(0deg,red,blue);
}
2、文本格式化屬性
1.字體屬性
（1）指定字體
屬性：font-family
取值：用 , 隔開的字體名稱串列
font-family:"微軟雅黑",Arial; font-family:"microsoft yahei",Arial,"simhei","宋體"
（2）字體大小
屬性：font-size
取值：以 px 或 pt 為單位的數字
（3）字體加粗
屬性：font-weight
取值：
1、bold ：加粗 2、normal ：正常 3、value 無單位的數字 等同于 normal 等同于 bold //介于正常體與粗體之間 font-weight:700;
（4）字體樣式
屬性：font-style
取值：
normal：正常顯示
italic：斜體顯示
（5）小型大寫字母
將小寫字符變為大寫，但大小與小寫字符一致
屬性：font-variant
取值：
normal：正常
small-caps：小型大寫字符
（6）字體屬性
簡寫方式
屬性：font
取值：style variant weight size family ;
注意：使用簡寫屬性時，必須要設定family的值，否則無效
2.文本屬性
（1）文本顏色
屬性：color
（2）文本排列
作用：指定文本、行內、行內塊元素的水平對齊方式
屬性：text-align
取值：left / center / right / justify（兩端對齊）
（3）文字修飾
屬性：text-decoration
取值：
1、none : 無任何的線條修飾 2、underline : 下劃線修飾 3、line-through : 洗掉線 4、overline : 上劃線
（4）行高
作用：一行資料所占高度
屬性：line-height
取值：以 px 為單位的數值
注意：如果行高設定的比文字的高度高的話，該行文本將在指定行高范圍內垂直居中顯示
line-height:30px; //行高是font-size的1.5倍 line-height:1.5;
（5）首行文本縮進
屬性：text-indent
取值：以 px 為單位的數值
（6）文本陰影
屬性：text-shadow
取值：h-shadow v-shaow blur color
3.表格
1.表格的常用屬性
（1）邊距屬性：padding
（2）邊框屬性：border
（3）尺寸屬性：width ， height
（4）文本格式化屬性：font-* ， text-* ， line-height
（5）背景屬性：顏色，圖片，漸變
（6）vertical-align
作用：指定單元格資料的垂直對齊方式
取值：
1、top ：上對齊 2、middle ：居中對齊 3、bottom ：下對齊
2.表格的特用屬性
（1）邊框合并
屬性：border-collapse
取值：
1、separate 默認值，即分離邊框模式 2、collapse 邊框合并
（2）邊框邊距
作用：設定單元格之間或單元格與表格之間的距離
屬性：border-spacing
取值：
1、給定一個值 ：水平和垂直的間距相同 2、給定兩個值 ： 第一個值 表示的是水平間距 第二個值 表示的是垂直間距
注意：只有在分離邊框模式下，邊框邊距才有效
（3）標題位置
屬性：caption-side
取值：
top ：默認值，標題在表格內容之上 bottom ：標題在表格內容之下
（4）顯示規則
作用：用來幫助瀏覽器指定如何布局一張表，也就是指定 td 尺寸的計算方式
屬性：table-layout
取值：
1、auto 默認值，即自動表格布局，列的尺寸實際上是由內容來決定的 2、fixed 固定表格布局，列的尺寸由設定的值為準的
4.浮動定位
1.語法
屬性：float
取值：
1、none 默認值，即無任何浮動效果 2、left 左浮動，讓元素停靠在父元素的左邊，或挨著左側已有的浮動元素 3、right 右浮動，讓元素停靠在父元素的右邊，或挨著右側已有的浮動元素
2.浮動引發的特殊效果
（1）當父元素顯示不下所有已浮動子元素時，最后一個將換行，但是，有可能被卡住
（2）元素一旦浮動起來后，寬度將以內容為主(未指定寬度情況下)
（3）元素一旦浮動起來后，將變為塊級元素；允許修改尺寸，能正常處理垂直方向外邊距
（4）文本，行內元素，行內塊元素是采用環繞的方式來排列的，是不會被浮動元素壓在底下的，而會巧妙的避開浮動元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169663.html
標籤：Html/Css