css 常用樣式(分享)
我要評論font-family 設(shè)置字體名稱
可以使用多個名稱，用逗號分隔，瀏覽器則按照先后順序依次使用可用字體
- p { font-family:'宋體','黑體','Arial'; }
font-size 設(shè)置字體大小
length 用長度值指定文字大小，不允許負值
percentage 用百分比指定文字大小，其百分比取值是基于父對象中字體的尺寸，不允許負值
- p { font-size:14px;}
font-weight 控制字體粗細
normal 正常的字體，相當于數(shù)字值400
bold 粗體，相當于數(shù)字值700
100~900 定義由細到粗的字符
- p { font-weight:bold;}
font-style 控制字體是否傾斜
normal 指定文本字體樣式為正常的字體
italic 指定文本字體樣式為斜體，對于沒有設(shè)計斜體的特殊字體，如果要使用斜體外觀將應(yīng)用oblique
oblique 指定文本字體樣式為傾斜的字體，人為的使文字傾斜，而不是去選取字體中的斜體字
- p { font-style: normal; }
- p { font-style: italic; }
- p { font-style: oblique; }
font(字體樣式縮寫)
- 例：
- p{
- font-style: italic;
- font-weight: bold;
- font-size: 14px;
- line-height: 22px;
- font-family:'宋體';
- }
- 縮寫后：
- p { font: italic bold 14px/22px '宋體'; }
color 文本顏色
•英文單詞，比如：red，yellow，green …
•十六進制表示方式，#開頭，6個十六進制的字符或數(shù)字組合，比如：#FFFFFF，#000000 …
•RGB模式，紅 0-255，綠 0-255，藍 0-255，比如：RGB(120,33,234)
•RGBA模式，比如：RGBA(255,0,0,0.5)，最后的A表示透明度50%
text-decoration 文本裝飾線條
none 默認。定義標準的文本
underline 定義文本下的一條線
overline 定義文本上的一條線
line-through 定義穿過文本的一條線
blink 定義閃爍的文本
- h1 {text-decoration:overline;}
- h2 {text-decoration:line-through;}
- h3 {text-decoration:underline;}
text-shadow 文本陰影
h-shadow 必需。水平陰影的位置。允許負值
v-shadow 必需。垂直陰影的位置。允許負值
blur 可選。模糊的距離
color 可選。陰影的顏色
- h1{ text-shadow: 2px 2px 2px #ff0000;}
寬度 width : auto | length
高度 height : auto | length
- p { width:300px;}
- div { width:50%;}
- img { height:200px;}
- div { height:100px;}
外邊距 margin : auto | length
margin-top 設(shè)置上邊的外邊距
margin-bottom 設(shè)置下邊的外邊距
margin-left 設(shè)置左邊的外邊距
margin-right 設(shè)置右邊的外邊距
縮寫型式：
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距 左右邊距
margin: 上邊距 左右邊距 下邊距
- div { width:300px; height:100px; margin:10px;}
- div { width:300px; height:100px; margin:0 auto;}
內(nèi)邊距 padding : length
padding-top 設(shè)置上邊的內(nèi)邊距
padding-bottom 設(shè)置下邊的內(nèi)邊距
padding-left 設(shè)置左邊的內(nèi)邊距
padding-right 設(shè)置右邊的內(nèi)邊距
- div { width:300px; height:100px; padding:10px;}
透明度 opacity : <number>
number值為 0.0-1.0 之間的小數(shù)
兼容全瀏覽器的寫法：
- div{ filter:alpha(opacity=50); } /* IE6-IE8 */
- div{ opacity:0.5; } /* 現(xiàn)代瀏覽器 */
以上這篇css 常用樣式(分享)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了css動畫效果之a(chǎn)nimation的常用樣式，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-08-11
css常用樣式font設(shè)置字體的多種變換(實例詳解)
這篇文章主要介紹了css常用樣式font設(shè)置字體的多種變換,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-19- 下面小編就為大家?guī)硪黄獪\談html5標簽css3的常用樣式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-20
- 這里我總結(jié)了一下平時自己在項目中經(jīng)常用到的20個CSS常用的樣式，都是些個人的經(jīng)驗，這里分享給大家，希望對大家有所幫助2014-09-02
- CSS常用樣式包括定位、顯示、寬高和剪裁等屬性，這些都是我們大家經(jīng)常使用到的，在本文做個總結(jié)，以備不時之需2014-04-18
這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-31
