前端語言基礎篇 之 【常見樣式詳解】

前端語言零基礎——樣式詳解

前端開發語言介紹

•  html(hypertext Markup Language) —— 結構超文本标記語言
•  css (Cascading Style Sheets ) —— 樣式層疊樣式表
•  js (javascript) —— 行為

樣式表出現的位置

1. 行間樣式表 ：<div style="....."></div>
2. 内部樣式表  :  <style>.................</style>
3. 外部樣式表  :  <link href="style.css"rel="stylesheet"/>

常見樣式 —— background

• 屬性：屬性值；
• width 寬度
• height 高度
• background 背景

             background-attachment:fixed:fixed; 背景是否移動

             background-color:gray; 選擇背景顔色

             background-image:url(bg.jpg); 配置背景圖

             ackground-repeat:no-repeat; 背景是否移動

             background-position:center 0px; 背景圖的位置

常見樣式— border

border邊框

• border- width 邊框寬度
• border- style  邊框樣式
• border- color 邊框顔色

邊框樣式：

•  solid 實線
• dashed 虛線
• dotted 點線

常見樣式-padding和margin

padding 内邊距

          内邊距相當于給一個盒子在内部加了厚度會影響盒子的整體容積。

          padding-top       上邊内邊距

          padding-ringht    右邊内邊距

          padding-bottom 下邊内邊距

          padding-left         左邊内邊距 

margin 外邊距

1、上下邊距會疊壓；

2、父子級包含子級的margin-top 會傳遞給父級；（内邊距替代外邊距）

文本設定常用格式

• font-size            文字大小
• font-family        字型
• font-weight      文字着重
• font-style          文字傾斜
• color                  文字顔色
• line-height         行高
• text-align           文本對齊方式
• text-indent        首行縮進
• text-decoration  文本修飾
• word-spacing     單詞間距
• letter-spacing     字母間距