軟件測試必備-前端知識點之css基礎及ps的用法
CSS
一、 css定義
css樣式表、層疊樣式表，級聯樣式表
二、 css基礎語法
1、 寫style標簽，放在head標簽裏面的最後位置
2、 自己寫的css代碼，放在style標簽裏面
三、 css常用屬性
1、color: red; 設置文字顏色
2、font-size: 50px; 設置文字大小
3、font-family: “黑體”; 設置字體（如果設置的是中文字體，要加雙引號！）
4、width: 100px; 設置寬度
5、height: 100px; 設置高度
6、background: red; 設置背景色
四、 標簽選擇器
在css語法中使用標簽名字來選擇元素的語法就叫標簽選擇器；
div標簽代表大盒子、容器、放內容的（獨占一行）
span標簽代表小盒子、容器、放內容的（多個小盒子，在瀏覽器寬度夠用的前提下，可以同一行顯示）
五、 id選擇器
給html指定標簽設置id屬性，再從css語法中使用#指定id的名字，實現的id選擇器；
例：
#div01{}
<div id=”div01”></div>
命名細節：
1、 不能使用數字開頭
2、 不能使用中文
3、 不能使用特殊字符（除了下劃線_和中劃線-）
4、 可以使用駝峰命名法：首單詞小寫，後面的單詞首字母都大寫
例： myDivRed
註意:此種命名方式是程序員之間約定俗成的，首單詞大寫不是錯誤！
註意:id選擇器必須是唯一的！一個標簽不能設置多個id名；id的名字也不能出現重復的清空
六、 類選擇器
在html中設置class屬性，在css中使用.class的名字
例：
.div01{ xxx}
<div class=”div01”>xx</div>
註意：類名可以重復使用，同一個標簽可以設置多個類名屬性，中間使用空格分隔
七、 ps吸取顏色
1、 模擬擁有了一個設計稿（按鍵盤的print screen 或prtsc）可以實現截屏效果
2、 打開ps，在菜單欄點擊“文件-新建”
3、 彈出窗口直接點擊確定，ctrl+v即可把之前截屏的圖放入ps中
4、 Alt+鼠標滾輪可以放大縮小
5、 點擊左下角的圖標,鼠標就會變為吸管，點擊鼠標左鍵即可吸取顏色；
6、 復制數值，放在代碼中，別忘了自己添加井號！
八、圖片格式
1、.png 可以有透明效果的圖
2、.jpg 普通的圖片
3、.gif 動圖
4、.psd ps軟件生成出來的圖（ui設計師制作的）
九、ps常用操作
1、英文狀態下按鍵盤t，可以讓ps指針變為文字工具，此時我們點擊想要查看的文字即可在ps菜單欄上看到所有樣式屬性。
2、測量工具（先要改變ps的默認顯示單位）；
此工具就是測量間距用的，點擊之後，按住鼠標左鍵拖拽，即可看到寬、高屬性
十、css的書寫位置
1、style標簽寫在html文件中，叫內嵌式css；（電商網站的首頁，必須使用此種方式，因為加載速度最快）
2、link標簽引入外部的css文件到html文件中，叫外鏈式（除了電商首頁外的頁面，都要使用此種形式，因為實現了代碼的分離，方便修改）
3、 寫在標簽裏面的css樣式，叫行內css（千萬不要使用，修改起來非常困難）
軟件測試必備-前端知識點之css基礎及ps的用法