1. 程式人生 > >前端學習第5天

前端學習第5天

首先祝大家元旦快樂,2019的我們會更加優秀
來看一下今天的學習內容吧

一.css的三種書寫位置
1.內嵌樣式
書寫位置,css寫在style標籤裡面,寫在title下面
作用範圍,當前頁面
適用範圍,小的案例或者小的demo裡
2.行內樣式
書寫位置,css寫在標籤的style屬性裡
作用範圍,當前標籤
適用的場景,基礎時候不用,找js當中使用
3.外聯樣式
書寫位置,寫在一個單獨的.css檔案中,需要通過link標籤引用
使用範圍,多個頁面,誰引入誰生效
使用場景,一般專案中使用
二.text-相關屬性
1.首行縮排,text-indent
取值,數字加px;
數字加em;1em=font-size,一個位元組;
2. 文字的對齊方式,text-align
取值,左邊left,中間,center,右邊right
能讓哪些元素居中?
文字 , span ,a,input,img
3.文字的修飾,text-decoration
取值,none,沒有效果,去除a標籤的預設下劃線
underline,下劃線
line-through,刪除線
文字格式化標籤的樣式
加粗,font-weight
下劃線,text-decoration:underline;
傾斜;font-style:italic;
刪除線;text-decoration:line-through;
四.盒子居中,margin: 0 auto;
div,p,h,標籤相當於一個盒子
讓盒子居中,margin: 0 auto;
五.css的三大特性
1.繼承性
1.子代有預設繼承父元素樣式的效果
2.有哪些樣式可以用繼承呢?
顏色,color
font-系列標籤
text-系列標籤
line-height;行高
3.繼承性的小應用
去除列表的小圓點
ul{list-style : none;}
4.繼承的特殊情況
當子代標籤有自己的屬性的時候就不能繼承父代標籤的屬性,具有獨立性
a標籤的顏色不能繼承,其實繼承下來了,但是被瀏覽器設定的預設屬性覆蓋了
h標籤font-size不能繼承,其實也是繼承下來了,只是覆蓋了
div的高度不能繼承,因為有原來的屬性
2.層疊性
當層疊樣式相同時,樣式會覆蓋,寫在下面的樣式會生效
當層疊樣式不同是,樣式會疊加,共同作用在標籤上
注意點:當優先順序相同時才會疊加屬性
3.優先順序
繼承<萬用字元選擇器<標籤選擇器<類選擇器<id選擇器<行內樣式<!important
注意:!important書寫在屬性值後面,分號前面
!important不能提高繼承的優先順序,只要是繼承優先順序都是最低的
權重:(0,0,0,0)從第一個開始依次是,行內樣式,id選擇器,類選擇器,標籤選擇器
!important,只要它不是繼承,天下第一
判斷方法:先看第一個標籤的數字,哪個大哪個就生效,相同的話就看第二個
權重計算題的步驟:
1.判斷選擇器是否作用在標籤上,如果不能直接選中就是繼承
2.接下來就是通過權重計算公式來判斷誰會生效
瀏覽器解析選擇器的順序是從有往左解析