IT工程師數位筆記本

1.前端開發語言介紹

HTML（Hypertext Markup Language）—— 結構—— 超文本標記語言

CSS（Cascading Style Sheets）—— 樣式—— 層疊樣式表

JS（javascript）—— 行為—— 客戶端腳本語言

2.樣式表出現的位置

行間樣式表：<div style="……"></div>

內部樣式表：<style>…………</style>

外部樣式表：<link href="style.css" rel="stylesheet"/>

3.注釋

<!-- html 注釋 -->

/* css 注釋 */

注意有空格

4.樣式詳解

屬性：屬性值；

width 寬度

height 高度

復合樣式一：background 背景

　　　　　　background-color 背景顏色

　　　　　　background-image 背景圖像

　　　　　　background-repeat 背景圖是否重復

　　　　　　background-attachment 背景圖是否固定

　　　　　　background-position 背景圖顯示的位置

復合樣式二：border 邊框

　　　　　　border-width 邊框寬度

　　　　　　border-style 邊框樣式

　　　　　　border-color 邊框顏色

　　　　　　邊框樣式：

　　　　　　　　solid 實線

　　　　　　　　dashed 虛線

　　　　　　　　dotted 點線（IE6不兼容）

復合樣式三：padding 內邊距

　　　　　　padding-top 上邊內邊距

　　　　　　padding-right 右邊內邊距

　　　　　　padding-bottom 下邊內邊距

　　　　　　padding-left 左邊內邊距

　　　　　　padding: top right bottom left;

　　　　　注意：內邊距相當于給一個盒子加了填充厚度會影響盒子大小。

復合樣式四：margin 外邊距

　　　　　　　外邊距的問題：1、上下外邊距會疊壓；

　　　　　　　　　　　　　   2、父子級包含的時候子級的margin會傳遞給父級；（內邊距替代外邊距）

　　　　　　　外邊距復合：margin: top right bottom left;

5.盒模型（標準）

盒子大小 = border + padding + width/height

盒子寬度 = 左border+左padding+width+右padding +右border

盒子高度 = 上border+上padding+height+下padding+下border

6.常見樣式 — 文本設置

font-size 文字大小（一般均為偶數）

font-family 字體（中文默認宋體）

color 文字顏色（英文、rgb、十六位進制色彩值）

line-height 行高

text-align 文本對齊方式

text-indent 首行縮進（em縮進字符，1em=[font-size] 相當于1個字）

font-weight 文字著重

font-style 文字傾斜

text-decoration 文本修飾

letter-spacing 字母間距

word-spacing 單詞間距（以空格為解析單位）