CSS 常用属性
1. 使用Web字體
@font-face {
??? font-family: Delicious;
??? src: url('/Delicious-Roman.otf')
}
然后調(diào)用該字體：?
h3 { font-family: Delicious, sans-serif; }
在IE中顯示為
?
2. 規(guī)定添加到文本的修飾
text-decoration: none
none 默認(rèn)。定義標(biāo)準(zhǔn)的文本
underline ? 定義文本下的一條線
overline 定義文本上的一條線
line-through 定義穿過文本的一條線
blink 定義閃爍的文本
?
3. 增加或減少字符間的空白(字符間距)
h1 {letter-spacing: -0.5em}
h2 {letter-spacing: 20px}
在IE中顯示為
normal: 默認(rèn)。規(guī)定字符間沒有額外的空間
length: 定義字符間的固定空間(允許使用負(fù)值)
inherit
?
4. 設(shè)置字體的尺寸
font-size: 200%
medium: 默認(rèn)值
smaller: 設(shè)置為比父元素更小的尺寸
larger: 設(shè)置為比父元素更大的尺寸
length: 設(shè)置為一個固定的值
%: 設(shè)置為基于父元素的一個百分比值
inherit
?
5. 規(guī)定元素中的文本的水平對齊方式http://www.w3school.com.cn/css/pr_text_text-align.asp
text-align: left; 把文本排列到左邊。默認(rèn)值：由瀏覽器決定。
right 把文本排列到右邊
center?? 把文本排列到中間
justify??? 實現(xiàn)兩端對齊文本效果
inherit
?
6. 設(shè)置所有外邊距屬性(依次為上右下左)
margin: 10px 5px 15px 20px
margin: 10px 表示4個外邊距都是10px
??
7. 設(shè)置所有內(nèi)邊距屬性(依次為上右下左)
padding: 10px 5px 15px 20px;
padding-left: 20px;
?
8. 設(shè)置元素的背景顏色?
backgound-color: yellow
?
9. 設(shè)置所有的邊框?qū)傩?/p>
border: 1px dashed #aaaaaa;
?
10. 這是邊框樣式
border-style: dotted dolid double dashed; 表示上邊框是點狀 右邊框是實線 下邊框是雙線 左邊框是虛線
和margin屬性順序一樣
border-style: dotted; 所有4個邊框都是點狀
?
11. 規(guī)定元素應(yīng)該生成的框的類型
display: inline; 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符
none: 此元素不會被顯示
block: 此元素會被顯示為塊級元素，此元素前后帶有換行符
inherit: 規(guī)定應(yīng)該從父元素繼承display屬性的值
?
12. 設(shè)置表格的邊框是否合并為一個單一的邊框
table {
border-collapse: collapse;
}
siparate 默認(rèn)值。邊框會被分開。不會忽略border-spacing和empty-cells屬性
collapse 如果可能，邊框會合并為一個單一的邊框。會忽略border-spacing和empty-cells屬性
inherit
?
13. 設(shè)置背景圖像http://www.w3school.com.cn/css/pr_background-image.asp
?background-image: url(bgimage.gif);
?background-repeat: none(默認(rèn)值) 根據(jù)此值，可以設(shè)置圖像無線平鋪或者不平鋪等。
?
14. 規(guī)定元素的定位類型
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
在IE中顯示為
static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中(忽略top,bottom,left,right或者z-index聲明)
absolute: 生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定
fixed: 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。
relative: ? 生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left: 20"會向元素的LEFT位置添加20像素。
inherit
?
15. 定義元素在哪個方向浮動
float: none; 默認(rèn)值。元素不浮動，并會顯示在 其在文本中出現(xiàn)的位置
left: 元素向左浮動
right: 元素向右浮動
inherit
?
expression用法 :?
width: expression(document.body.clientWidth);
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight);
top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);
left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);
轉(zhuǎn)載于:https://www.cnblogs.com/studyhs/archive/2012/09/06/2672860.html
總結(jié)
- 上一篇： OD使用教程3(中) - 调试篇03|解
- 下一篇： CSS 基本样式