css的三種宣告方式
1、行內樣式
通過每個標籤都有的style屬性
<div style="color:red;">黃衛星說沒有內容</div>
2、內聯樣式
通過在head裡寫style標籤,style標籤裡寫樣式
<style>
div {
color:gold;
}
</style>
3、外聯樣式
通過link標籤來引入css程式碼
<link rel="stylesheet" type="text/css" href="1.css" />
優先順序:
網頁載入順序決定優先順序
就近原則
偽類選擇器(要按下面的順序避免出錯)
a:link {
color:red;
}
a:visited {
color:pink;
}
a:hover {
color:black;
}
a:active {
color:blue;
}
屬性選擇器
input [ type=text ]
單位
px 畫素
% 百分比
em 根據父級元素的尺寸
rem 根據html的尺寸,例:2rem;就是兩個字型的大小;
vw 視窗寬度的百分比
vh 視窗高度的百分比
【注】css的優先順序對比,權重比精確定位更優先;
文字修飾:
text-indent 文字縮排;例子: text-indent:2rem;
text-shadow 文字陰影
text-shadow:10px 10px 10px red;
1、水平偏移量 可以為負
2、垂直偏移量 可以為負
3、陰影模糊值 不可以為負
4、陰影部分顏色
text-overflow 文字超出的顯示方式
clip 超出部分截斷
ellipsis 超出時顯示...
【注】 要想讓他生效的話需要設定
overflow:hidden;
white-space:nowrap;
還要給元素設定寬度
line-height 行高 【注意】當行高與元素高度一樣時會使文字垂直居中
vertical-align 對齊方式 經常用於設定圖片
top 頂端對齊
middle 中間對齊
bottom 底端對齊
背景
background-color 背景顏色
background-image 背景圖片 background-image:url(./image/xxxx);
background-attachment 背景圖片是否跟著滾動條滾動
fixed 相對於視窗固定 (這個功能好像經常看到)
scroll 隨滾動而滾動
background-repeat 背景圖片是否平鋪
background-position 背景圖片定位
left right top bottom 百分比
【注】css的功能真的很強大好用(完)