css的一些屬性及其屬性值

標籤：font   -o   family   90度   tac   單詞   行高   css選取器   文字陰影   

CSS常用文字屬性1、字型、字型大小類：

①font-weight:字型粗細 bold-加粗、normal-正常、lighter-細體,也可以使用100-900數值，400表示normal，700表示b

②font-style:字型樣式。italic-傾斜、normal-正常 

③font-size:字型大小。可以寫px單位，也可以寫%.200%表示瀏覽器預設大小（16px）的兩倍=32px

④font-family:字型系列（字型族）
 >>>可以直接寫字型名，也可以寫字型系列名。
 >>>常用字型系列：serif-襯線體 sans-serif-非襯纖體；
 >>>font-family可以接受多個值，用逗號分隔。表示優先使用第一個，如果 沒有這個字型，依次向後使用。通常，最後一個值放字型系列名；
  eg：font-family:"黑體","微軟雅黑",sans-serif;

⑤font縮寫形式：
>>>順序必須是：
 font-weight、font-style、font-size/line-height、font-family
 >>>不同屬性之間，用空格分隔；
>>>font-size/line-height必須一組，用/分隔；
 >>>font-family多個字型之間，用逗號分隔
 >>>eg:font: bold italic 32px/50px  "微軟雅黑",serif;

 2、字型顏色
 ①color:字型顏色 可以使單詞、十六進位、RGB等

 ②opacity:透明度，可選值0~1
 [opacity和RGBA的區別]
 >>>RGBA本身可以設定顏色，而opacity必須配合其他顏色屬性來用；
 >>>rgba僅僅是讓當前元素設定的顏色透明；
 而opacity，會讓當前元素裡面的所有文字、背景、子項目都透明；

3、行距、對齊其他類
①line-height：行高。可以寫px單位、可以直接寫數字（表示預設行距的幾倍）
 、可以寫%（表示預設行距的百分比）
 >>>行高重要作用：讓單行文字在div中垂直置中
 設定行高等於div的高度，即可讓單行文字垂直置中。

②text-align：設定地區內的行級元素水平對齊；left/center/right

 ③letter-spacing：字元間距，字與字之間的距離

 ④text-decoration：文本修飾；
 underline-底線、overline-上劃線、line-through-刪除線、none

 ⑤overflow：設定超出地區文字的顯示方式。
 >>>overflow:hidden；超出地區的文字隱藏不顯示；
 >>>overflow:scroll;無論文字多少，都會顯示水平垂直捲軸
 >>>overflow:auto;自動，預設效果。文字多顯示捲軸，文字少，不顯示捲軸。
 >>>可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
 overflow-y:scroll;overflow-x:hidden;

 ⑥text-overflow：設定行末多餘文字的顯示方式；
 >>>clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號顯示
 >>>顯示省略符號，需要配合white-space：nowrap；使用
 >>>【重點】 設定行末顯示省略符號（三行代碼，缺一不可）
 over-flow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;

⑦white-space：nowrap；設定中文行末，不斷行顯示

⑧text-indent:首行縮排。

⑨-webkit-text-stroke:0.5px blue;文字描邊。
 -webkit-表示只有webkit核心的瀏覽器生效、常見的有chrome、safa

⑩text-shadow:文字陰影，有四個屬性值，空格分隔；
 >>>水平陰影距離，正數表示陰影右移，負數左移；
 >>>垂直陰影距離，正數表示陰影下移，負數上移；
 >>>陰影模糊距離，0表示陰影一點不模糊；
 >>>陰影的顏色；
 >>>eg:text-shadow: 20px -10px 2px blue;

 

CSS常用背景屬性

1、 background-color： 背景色

 2、 background-image: 背景圖。使用url("")選擇背景圖片。背景圖和背景色同時存在時，背景圖覆蓋背景色。

 3、 background-repeat: 背景圖的重複方式。

 no-repeat-不平鋪、repeat-平鋪、repeat-x-x軸平鋪、 repeat-y-y軸平鋪

 4、 background-size： 背景圖的大小
 [指定寬度高度]
 >>> 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
 >>> 當寫兩個屬性時，分別表示寬度、高度；
 當寫一個屬性時，表示寬度，高度將會等比縮放；
 [其他屬性值]
 >>> contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部地區)
 >>> cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出地區顯示不全)

 5、 background-position： 背景圖位移量
 >>> 指定位置： left/center/right top/center/bottom
 當，唯寫一個值時 ，另一個預設置中。
 >>> 指定座標： 兩個屬性分別表示 ：水平位移 垂直位移
 ① 座標的值，可以是px單位，也可以是百分數
 ② 當寫px單位時：
 水平方向：正數右移 負數左移 ； 垂直方向： 正數下移 負數上移；
 (左負右正 上負下正)
 ③ 當寫%百分數時：
 一般只能是正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。 eg：background-position:30%; 水平方向去掉圖片寬度，剩餘地區3:7分。

 

CSS新增屬性

 

1、display屬性
可以設定元素以何種狀態顯示，可選值：
none:隱藏元素；
block：顯示為區塊層級元素；
inline：顯示為行級元素；
inline-block：顯示為內聯區塊層級元素。本身將是一個 行級元素，但是，擁有區塊層級元素的所有屬性。比如寬度、
高度、margin、padding等。。。

 2、常見的inline-block層級的標籤
<img/> <input/> <textarea></textarea>
<td></td>

 3、隱藏一個元素的方式

 ① 寬度或高度設為0px；配合overflow：hidden；屬性
 ② display：none； 顯示為display：block；
 ③ opacity：0；設為全透明。但是元素的空間會佔據；
 ④ visibility：hidden；隱藏元素，但是元素所在空間依然
 會佔據。與opacity：0；效果很像；
 顯示visibility隱藏的元素，visibility：visible；

4、CSS3新增的屬性首碼
①  -webkit-：Chrome/Safari瀏覽器；
②  -moz- ：Firefox瀏覽器；
③  -ms- ：IE瀏覽器；
④  -o- ： Opera歐朋瀏覽器

5、CSS3 背景屬性
① background-clip:設定背景圖或背景色的裁切顯示地區。
 >>>mborder-box從邊框外緣開始顯示；
 >>>padding-box從邊框內緣開始顯示；
 >>>content-box從文字內容地區開始顯示；
 >>>如果不在卻與的背景圖或者背景色，會被裁切掉不顯示；

② background-origin：設定背景圖從哪開始定位。
 >>>border-box：背景圖左上方從邊框外緣開始；
 >>>padding-box：背景圖左上方從邊框內緣開始；
 >>>content-box：背景圖左上方從文字內容區開始；

 ③ background-origin不會改變背景圖顯示地區的大小，只是決定背景圖的左上方從哪裡開始定位；
 background-clip：只負責裁切出顯示地區，但是並不關心背景圖定位在哪。

④ background-attachment: 背景圖的附著方式；
 >>>scroll：背景圖跟隨地區滾動。預設效果；
 >>>fixed：背景圖充滿整個地區，並且背景圖是固定的，不隨捲軸滾動；

⑤ background 縮寫形式：
 background：background-color、background-image、
 background-repeat、background-atachment、background-position；

⑥ transition:過渡屬性，接受四個屬性值
 （1）設定哪個CSS屬性， 參與過渡；可以直接指定all/none
 （2）過渡多少時間完成。通常.3s .5s
 （3）過渡的樣式效果。通常選ease；
 （4）過渡延時幾秒後再開始。可以省略不寫；
 transition屬性可以同時定義多個過渡效果，用逗號隔開。
 eg：transition：width .5s ease,height 1.5s ease;

7、transform 定義變換屬性
① 常用的變換函數：
 >>>transform(10px,10px)平移，第二個不寫預設為0
 >>>scale（1.1）縮放，第二個不寫，預設等於第一個
 >>>rotate（90deg）旋轉，預設繞Z軸轉 可以使用rotateX（）等
 >>>skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度；

② transform可以同時實現多種變換，用空格分隔
 eg：transform:skew(20deg) scale(1.3) translate(100px);

③ transform-origin:定義變換起點，常用於旋轉變換。
 可選值：left/center/right bottom/center/top
 也可以直接指定X、Y軸座標點，第一個數為X軸；
 例如：transform:rotate(90deg);
 transform-origin:right bottom;
 表示：繞右下角旋轉90度。

 

8、CSS3動畫的使用
① 聲明一個主要畫面格（動畫）：
@keyframes name{
     from{
     to{}
    }

② 在CSS選取器中，使用animation調用聲明好的動畫；
Animation-name:動畫名稱
Animation-duration：動畫期間
Animation-timing-function：動畫速度曲線
Animation-delay：動畫開始的時間，延遲
Animation-iteration-count：動畫播放次數，預設為1.無限次數表示infinite
Animation-direction：動畫在下一個是否逆向播放，預設為normal表示不進行逆向播放，alternate
表示下一次將逆向播放（[email protected]到）
Animation-fill-mode：規定對象動畫時間之外的狀態。表示動畫結束後，停留在何種狀態。要使用這個屬性，
動畫的執行次數必須是有限次。（forwards：表示動畫停留在結束狀態；backwarks：表示動畫停留在初始狀態
，預設效果）

 

css的一些屬性及其屬性值