前端開發入門學習筆記（一）
HTML：超文本標記語言。
html：是一個基礎結構。
CSS：就是跟網頁做裝修的，修飾HTML的基礎內容：樣式。
JavaScript：一個網頁的行為，動作，動態的東西。
html標準文件格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>標題</title>
</head>
<!--我是頭部 周圍包括的符號為註釋-->
<body>
這裏為網頁的主題寫作區域
</body>
</html>
CSS:
div行間樣式表：<div style="width:100px; height:100px; background:red; font-size:30px;">aaa</div>
寫到了DIV的每行,單獨定義.每次只能應用到一行,有局限性,很少用到.
div內部樣式表：<div id="XX1"></div>id名稱最好用英文開頭,以#號賦值。
<div id="XX2"></div>可以用#號賦值另外一個div.
<style>
#XX1{
width:100px;
height:100px;
background:red;
}
#XX2{
width:200px;
height:200px;
background:blue;
}
</style>
如此用#號單獨賦值ID號以後可單獨調用.樣式表依然在HTML文件內部。
1.css(文件內的內容)
#div1{
width:100px;
height:100px;
background:red;
}
在主HTML程序中
<head>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div id="div1">aaa</div>
</body>
等於鏈接到了外部的1.css中的#div的賦值調用,這就是外部樣式表.
顏色值.
background-color:(顏色英文red,yellow.)、#16進制顏色模式#ffffff、rgb模式(100,200,300);，紅、黃、藍。
background-color:red;
background-color:#ffffff;
background-color:rgb(30,40,240);
/*CSS的註釋*/
background-image:url(image/123.jpg)
默認狀態下引用圖片背景是平鋪的。
background-repeat:no-repeat; 背景不重復。
repeat-x 水平平鋪。
repeat-y 垂直平鋪。
background-position:10% 30px;(保證有兩個值；只有單個值（默認X軸值），第二個值中間)
/*
背景定位： x水平 y垂直
100px 30px（像素值）
10% 20%(百分比)
(單詞表述)
left| center | right（X軸屬性） top | center | bottom（Y軸屬性） */
background-repeat:repeat-x;
background-position:center 0px;
使圖片重復平鋪居中
width:100px;
height:100px;
background:url(1.jpg)
background-position: -100px -20px;
既可以設置正數也可以設置負數，根據自己的需要來設置。
background-attachment:fixed;
固定背景不動。
屬性名稱：樣式值。
/*單一樣式*/
background:#ccc url(image/123.jpg) no-repeat -100px -20px fixed;
/*復合樣式 背景樣式的合並 統一屬性不要拆分*/
邊框：
border:1px dashed black;
不同瀏覽器 粗邊框造成不同的效果。
border-top:5px solid yellow;
定義邊框頂部
border-left:5px solid blue;
定義邊框左邊
border-bottom:5px solid green;
定義下邊框
border-right:5px solid red;
定義又邊框
邊框四角可單獨定義。
PS前端開發： 切圖（摳圖）、測量、圖片簡單處理
得到一張圖片：
1）設計師給的PS圖片（首頁.PSD文件）
2）截圖屏幕
3）瀏覽器插件。F12，查找下載圖片、雪碧圖等。
前端開發入門學習筆記（一）