1. 程式人生 > >前端基礎第四天

前端基礎第四天

經過幾天的html的學習,已經有點開始慢慢的進入一個程式設計師的世界
從今天開始,我們就開始一起學習css的內容
一起來看看今天的重點吧,

一,css的初體驗
css的相關設定放在style裡,style放在title下,是一個雙標籤
1.css的相關屬性
color:設定字型的顏色
font-size:設定字型的大小
background:設定字型的背景
width:設定字型的寬度
height:設定字型的高度
2.css的概念
層疊樣式表
3.字型的屬性
font-size:字型的大小;單位為px;
font-weight:字型的粗細.預設為normal,400;加粗,為bold,700;
font-style:字型的樣式;不傾斜為normal,傾斜為italic
font=family;字型的型別;‘宋體’;‘楷體’.等
可以連寫
連寫的格式為(swsf稍微舒服)
font: 樣式 粗細 大小 型別
即;font: italic bold 40px ‘宋體’;可以省略前兩個
二.開發人員除錯工具
用來除錯,查錯,找bug
1.開啟方式
右鍵,檢視網頁原始碼
右鍵,檢查
2.除錯的作用
1.修改屬性值
直接修改
滑鼠滾輪
鍵盤上下鍵
2.新增屬性
直接在上一個屬性值後面的分號點選,直接新增
3.控制樣式生效
點選每個屬性前面的小框,可以控制
如果樣式有一個刪除線,表示該樣式,不生效
4.檢視是否生效
5.檢視報錯原因
三.簡單基本選擇器
1.標籤選擇器
標籤{css}
選擇所有的標籤,不管標籤藏得多深
2.類選擇器
.類名{css}
給標籤名加一個class屬性,新增一個類,來指定某一個標籤
相當於名字,可以重名
3.id選擇器
#id{css}
給標籤加一個id值,根據id值來給標籤賦予新的樣式
id只有一個,相當於身份證
四,複雜選擇器
1.萬用字元選擇器
*{css}
設定所有標籤的樣式
2.並集選擇器(,)
選擇器1,選擇器2{css}
設定滿足選擇器1或者選擇器2的樣式,有逗號連結
3.交集選擇器(直接連線)
選擇器1選擇器2{css}
設定既滿足選擇器一,又滿足選擇器2的樣式
4.後代選擇器( 空格隔開)
選擇器1 選擇器2{css}
設定選擇器1裡面所有的滿足選擇器2(子代,孫代,等等)的內容樣式
5.子代選擇器
選擇器1>選擇器2{css}
設定選擇器1裡面,子代中選擇器2的樣式(只有子代)
五,拓展小知識
顏色的屬性
rgb表示法
r:reb;
g:green;
b:blue;
1. rgb(0,0,0),分別表示三個顏色的比重,取值範圍為0-255
2.rgba(0,0,0,0),最後一位為透明度,取值為0-1.
3.十六進位制表示法:#000000-#FFFFFF: