Web前端入門學習(1)——走進前端世界
前端基礎知識
前端開發語言:
HTML(Hypertext Markup Language):超文字標記語言;
CSS(Cascading Style Sheets):層疊樣式表;
JS(JavaScript):指令碼語言。
樣式表:
行間樣式表、內部樣式表、外部樣式表。
樣式
樣式格式:屬性名:屬性值;
常見樣式:
border:1px solidred
border-width:1px
border-style:solid
border-color:red
常見顏色模式:
關鍵字:red yellow blue white...
rgb:(123,12,44)
十六進位制:#3f3f3f
盒子邊框
border-top:1px solidred
border-right:1px solidred
border-bottom:1px solidred
border-left:1px solidred
背景
background-color
background-p_w_picpath
background-repeat:(no-repeat repeat-x repeat-y repeat inherit)
background-position:(top right bottom left 30px 20px 50% 30% inherit)
background-p_w_upload:(srcoll fixed inherit)
background複合:blue url(./a.img) no-repeat 20px 30px fixed;
文字設定
font-weight:(normal bold bolder lighter 100~900(normal:400,blod:700) inherit)
font-style:(normal italic oblique inherit)
font-size:字型大小
line-height:行高
font-family:元素字型
font複合:font-style font-weight font-size/line-hight font-family
文字設定
color
text-align
text-indent
text-decoration
letter-spacing
word-spacing
white-space:(normal pre nowrap pre-wrap pre-line inherit)
超連結
a:link 未訪問過的連結;
a:visited 已訪問過的連結;
a:hover 滑鼠放在連結上時;
a:active 連結被點選的那一刻;
規則:a:hover必須放在a:link和a:visited後面,a:active 必須放在a:hover後面。
download下載:點選下載href指定的地址內容。
target:_blank _self _parent _top filename
base標籤:在<head>頭部為頁面上所有連結規定預設目標。
padding填充
padding-top padding-rihgt padding-bottom padding-left
padding:15px 20px 18px 25px
上填充:15px
右填充:20px
下填充:18px
左填充:25px
padding:10px 20px 15px
上填充:10px
左右填充:20px
下填充:15px
padding:20px 15px
上下填充:20px
左右填充:15px
margin外邊距
margin-top margin-rihgt margin-bottom margin-left
margin:15px 20px 18px 25px
上邊距:15px
右邊距:20px
下邊距:18px
左邊距:25px
padding:10px 20px 15px
上邊距:10px
左右邊距:20px
下邊距:15px
padding:20px 15px
上下邊距:20px
左右邊距:15px
padding:100px auto 0px
上邊距:100px
左右邊距:居中
下邊距:0px
盒子模型
盒子大小:邊距、邊框、填充、內容。
盒子寬度:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;
盒子高度:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;
轉載於:https://blog.51cto.com/cherry360/1863428