真正零基礎學習HTML(四)

盒子模型
css基本屬性:
1.border:邊框 solid:實線顏色
2.width:寬
3.height:高
4.background-image:url()背景圖片
background-repeat-x/y/no:水平重複或不重複
滾動:background-attachment:fixtd(固定)scroll(背景圖片默認滾動)
background-position:left(水平)top(垂直);

字體屬性
1.大小:<font size></font> 單位:px,pd
2.樣式:font-style: oblique;(偏斜體) 、italic;(斜體) 、normal;(正常)
3.行高:line-height: normal;(正常) 單位:PX、PD、EM;
4.組合在一起,實現文本垂直居中 height: 40px;/測試attachment是請務必修改高度/line-height: 40px;
5.粗細:font-weight: bold;(粗體) 、lighter;(細體) 、normal;(正常)
6.變體:font-variant: small-caps;(小型大寫字母) 、normal;(正常)
7.大小寫:text-transform: capitalize;(首字母大寫) 、uppercase;(大寫) 、lowercase;(小寫) 、none;(無)
8.修飾:text-decoration: underline;(下劃線) 、overline;(上劃線) 、line-through;(刪除線) 、blink;(閃爍)
9.常用字體:(font-family):“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

鼠標樣式
1.cursor:point小手
2.move十字
3.wait沙漏/轉圈
4.help問號

區塊屬性
1.div塊級(獨佔一行) span內聯
2.對齊:text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)
3.縮進:text-indent: 數值px;text-indent: 2em; text-indent: 20px;
4.垂直對齊:vertical-align: baseline;(基線) sub;(下標) super;(上標) top; text-top; middle; bottom; text-bottom;
5.詞間距:word-spacing: normal; 數值
6.空格:white-space: pre;(保留) nowrap;(不換行)--<pre></pre>
7.顯示:display:block;(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題);

盒子模型

1.border:10px solid red 邊框
2.padding:20px 邊框和內容間距
3.內容+填充padding+邊框+外邊距
4.margin:盒子和盒子距離

5.padding:上右下左(順時針)20px 10px 15px 5px
padding:20px(上下) 10px(左右)
padding:20px(上) 10px(左右) 5px(下)

6.上下盒子外邊距最終取最大的margin-top 或 margin-bottom
7.左右盒子外邊距最終取和值margin-right 或 margin-left
8.margin:0 auto;上下是0 左右居中

邊框屬性
1.border-style: dotted;(點線) dashed;(虛線) solid(實線); double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;
2.border-width:; 邊框寬度
3.border-color:#;
4.簡寫方法:border:width style color;
5.Border:1px solid red

CSS文字屬性
1.color : #999999; /文字顏色/
2.text-decoration:underline; /加下劃線/
3.text-align:center; /文字居中對齊/
4.vertical-align:top;
5.top 把元素的頂端與行中最高元素的頂端對齊
6.bottom 把元素的頂端與行中最低的元素的頂端對齊。
7.圖像:list-style-image: url(xxx.gif/jpg/png);

CSS鏈接屬性
1.a:link /超鏈接文字格式/
2.a:visited /瀏覽過的鏈接文字格式/
3.a:hover /鼠標轉到鏈接/
4.a:active /按下鏈接的格式/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章