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