CSS基礎總結
CSS細化知識點總結
1.行內樣式:只對它所修飾的元素起作用
語法:style=”屬性1:值1;屬性2:值2...屬性n:值n”
2. 樣式的優先級: 當有多個樣式作用在同一元素上時,誰離元素近,就使用誰的樣式,即誰離得近,誰的優先級高.
3. 長度單位em:1em就是當前一個字體的尺寸,text-indent: 2em;讓文本縮進2個字符
4. 顏色的三種表示法:
1.rgb顏色表示法:rgb(red,green,blue),其中三個參數代表三種顏色的強度,值是[0,255]
2.十六進制表示法:用十六進制的值表示顏色,#RRGGBB
3.英文單詞表示法:用英文單詞表示顏色,例如紅色是red
5.基礎選擇器:1. 標簽選擇器:用元素名稱作為選擇器,選擇出網頁上所有名稱匹配的元素
2.類選擇器使用分2步:
2.1.給要選中的元素添加class屬性, 格式class="值"
2.2.聲明類選擇器,類選擇器名稱:.class屬性值
類選擇器可以選出多個元素,它們的類名要相同
3. ID選擇器使用分2步:
3.1.給要選中的元素添加id屬性, 格式id="值"
3.2.聲明ID選擇器,ID選擇器名稱:#id屬性值
按h5的標準,每個元素的id都是唯一的,ID選擇器只能選出一個元素
4. 通配符選擇器*:選出網頁上所有的元素
6.關系選擇器:1. 交集選擇器:由2個選擇器直接構成,選擇的元素範圍是它們各自的元素的公共部分,即交集
2. 並集選擇器:由多個選擇器通過逗號連接在一起,這些元素可以是任意的基礎選擇器,並集選擇器選擇的元素範圍是所有選擇器選出的元素的並集(合並在一起)
3. 後代選擇器:選出參考元素的所有後代元素,
語法:E F,即選出所有E選擇器匹配元素的所有後代F元素(包含兒子和孫子)
4. 親子選擇器:選出參考元素的所有親子元素,
語法:E>F,即選出所有E選擇器匹配元素的所有直接兒子元素F(不包含孫子元素)
7.屬性及偽類選擇器:1.屬性選擇器:根據元素的屬性來選擇元素
語法1: [attr]:選擇網頁上具有attr屬性的所有元素,不用管attr屬性的值
語法2:E[attr]:選擇具有attr屬性的所有E元素,不用管attr屬性的值
語法3:E[attr=value]:選擇具有attr屬性且屬性值是value的所有E元素
語法4:[attr=value]:選擇具有attr屬性且屬性值是value的所有元素
註意:如果屬性值value沒有/及:等特殊字符,那麽value可以不用雙引號包裹
2. 偽類選擇器:
2.1.:active:鼠標在元素上按下時的狀態
2.2. :hover:鼠標懸浮(停在上面)在元素上的狀態
8.選擇器的優先級:1.簡單選擇器優先級順序: !important>id選擇器>類選擇器>標簽選擇器>通配符選擇器 如果在簡單選擇器裏的某個樣式上加了!important,那麽此時它的優先級是最高的
2. 當修飾元素的選擇器是復合選擇器時,先比較id選擇器出現的次數,誰的id選擇器的次數多,誰的優先級高;在id選擇器次數相同情況下,再比較類選擇器的次數,誰的類選擇器的次數多,誰的優先級高
9. css屬性
背景屬性
可以使用background屬性來代替background-image, background-repeat, background-position三個屬性
技巧:
設置背景圖片水平和豎直方向都居中
1)將html和body的高度都設為100%
html,body { height: 100%; } |
2)設置背景圖片的位置為50% 50%或者center center
background-position: center center; |
(1)background-repeat:設置背景圖片重復,默認值是repeat(在水平和豎直方向都平鋪)
* repeat-x:在水平方向平鋪
* repeat-y:在豎直方向平鋪
* no-repeat:不平鋪,只顯示一張
(2)background-position: center center; 背景圖片居中,默認只能水平居中
(3)background-attachment: fixed; 將背景圖片固定,不會隨著文檔滾動而消失
文本屬性
(1) opacity:設置不透明度,範圍是[0,1],1表示完全不透明,最清楚,0表示完全透明,元素就隱藏了
(2) font-style: italic; 字體風格,italic為斜體
(3) font-weight: bold;字體粗細 ,bold和bolder都是加粗
(4) text-decoration: line-through;text-decoration:文本裝飾,可以定義文本的下劃線,上劃線或中劃線
(5) letter-spacing: letter-spacing:字與字之間的間距
(6) height: 50px;line-height: 50px; 當元素內的行高和高度相同時,元素內的文本就能在豎直方向上居中
(7) text-align: text-align:設置塊級元素內的文本的水平對齊方式
(8) overflow: hidden:超出元素框的內容會被修剪,看不到了
scroll:多余的內容能夠看到,會出現滾動條
auto:自動適應,如果元素高度不夠,則會出現滾動條,否則沒有滾動條
10.列表屬性
有序列表ol>li
list-style-type: upper- alpha:列表項的符號是大寫英文字母
upper- roman:列表項的符號是大寫羅馬字母
11.元素分類:
(1) 塊級元素:獨占一行的元素,不能和相鄰元素共享一行,例如:h1-h6,p,div,ol,ui,li,pre,table等
(2) 行內元素:能和相鄰元素共享一行的元素,例如:span,a,img等
特點:不要對行內元素設置寬和高,設了也沒用,寬和高自動適應內容,img除外(它可以設置寬高)
(3)行內元素和塊級元素的轉換:
塊級元素轉換為行內元素:給塊級元素設置display:inline
行內元素轉換為塊級元素:給行內元素設置display:block
(4)行內塊級元素:既有行內元素的特點(可以和相鄰的行內元素共享一行),
又有塊級元素的特點(可以設置寬和高,以及padding和maring)
將元素設置為行內塊級元素:display:inline-block
(5)把元素隱藏起來,有兩種方式:
方式1:給元素設置display屬性,值為none,隱藏元素且不會保留元素的物理空間,與它相鄰的元素會擠過來
方式2:給元素設置visibility屬性,值為hidden,隱藏元素,但是會保留元素的物理空間
12.CSS定位
(1)絕對定位(position: absolute;):設置絕對定位,此時元素會脫離文檔流 ,它原來的物理空間會被相鄰的元素占有.,絕對定位的元素在移動過程中是參照離它最近的父元素進行平移
left:讓元素向右移動多少像素
top:讓元素向下移動多少像素
絕對定位的元素會脫離文檔流,與它相鄰的元素會擠過來
固定定位:特殊的絕對定位,它的參照物是body元素(網頁上所有的元素的祖先元素)
(2)相對定位:參照元素當前的位置進行定位,相對定位元素需要配合left,right,top,bottom來定位,相對定位的元素沒有脫離文檔流,在定位過程中保留了物理空間 ,不會被相鄰元素占有
絕對定位,參照物是離他最近的父元素
相對定位:參照元素當前的位置進行定位
(3)Z-index屬性:在z軸(視覺線)上的堆疊順序,值越大的就越在前面,離我們的眼睛越近
13.CSS浮動:float
left: 設置元素向左浮動,參照父元素的左上角,向父元素的左邊移動
right:設置向右浮動,
設置了浮動的元素的物理空間消失了,會被相鄰的元素占有--浮動定位的元素脫離了文檔流
註意:浮動定位的元素也脫離了文檔流
清除浮動:讓浮動的元素再次回到文檔流中,重新擁有物理空間,清除浮動的步驟
1.在最後一個浮動元素的後面添加一個空div
2.給空div設置clear樣式,值是left/right/both,left是清除左邊的浮動元素 right清除向右浮動元素 both是清除兩邊的浮動元素
14.CSS的盒子模型
(1)內邊距padding:
左內邊距,即內容到左邊框的距離
padding-left:20px ;
右內邊距,即內容到右邊框的距離
padding-right:20px ;
上內邊距,即內容到上邊框的距離
padding-top:40px ;
下內邊距,即內容到下邊框的距離
padding-bottom:40px;
統一設置4個方向的內邊距
padding: 40px;
(2)邊框boder:
設置4個方向的邊框,值:邊框寬度 樣式 顏色 dashed:虛線邊框 solid:實線邊框
border-top:20px solid red;
border-bottom: 20px solid red;
border-left:20px solid red;
border-right: 20px solid red;
統一設置4個方向的邊框
border:10px solid red;
(3)外邊距margin
margin-top:20px;
margin-bottom: 20px;
margin-left:20px;
margin-right: 20px
設置4個方向的外邊距
margin: 20px;
(4)清除默認樣式,充分利用整個body
*{
margin: 0;
padding: 0;
}
(5)塊級元素居中對齊
清除默認樣式,充分利用整個body
*{
margin: 0;
padding: 0;
}
div{
設置塊級元素左右的margin為auto,會自動適應父元素,在水平方向上居中
margin:值1(上下的margin) 值2(左右的margin)
margin:0px auto;
15.CSS3的新知識
(1)設置圓角邊框:border-radius: 20px;
(2)box-shadow:屬性向框添加一個或多個陰影。
屬性值 |
描述 |
h-shadow |
必需。水平陰影的位置,允許負值。 |
v-shadow |
必需。垂直陰影的位置,允許負值。 |
blur |
可選。模糊距離。 |
spread |
可選。陰影的尺寸。 |
color |
可選。陰影的顏色。 |
註意:擴展:text-shadow添加文字陰影
(3)box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
屬性值 |
描述 |
content-box |
設置元素觸發標準盒子模型 |
border-box |
設置元素觸發怪異(IE)盒子模型 |
標準盒子模型:width和height屬性設置的是內容區的寬高。
怪異盒子模型:width和height屬性設置的是內容區、內邊距和邊框的寬高。
常見的怪異盒子標簽:input[type=‘submit‘]和input[type=‘reset‘]。
(4)CSS3的過度
通過 CSS3,我們可以在不使用 Flash 動畫或 JavaScript 的情況下,當元素從一種樣式變換為另一種樣式時為元素添加效果。
transition: property duration timing-function delay;
屬性值 |
描述 |
property |
指定CSS屬性的name,transition效果 |
duration |
transition效果需要指定多少秒或毫秒才能完成 |
timing-function |
指定transition效果的轉速曲線 |
delay |
定義transition效果開始的時候 |
timing-function取值 |
描述 |
linear |
規定以相同速度開始至結束的過渡效果 |
ease |
規定慢速開始,然後變快,然後慢速結束的過渡效果 |
ease-in |
規定以慢速開始的過渡效果 |
ease-out |
規定以慢速結束的過渡效果 |
ease-in-out |
規定以慢速開始和結束的過渡效果,中間勻速 |
實例:將鼠標懸停在一個div元素上,實現在3秒內實現盒子的寬度從100px到500px:
.box {
width: 100px;
height: 100px;
transition: width 3s ease;
}
.box:hover {
width: 500px;
}
實例:將鼠標懸停在一個div元素上,實現在4秒內實現盒子的寬度從100px到500px,並且在10秒內改變盒子背景顏色:
1 .box { 2 width: 100px; 3 height: 100px; 4 5 transition: width 4s ease, background-color 10s linear; 6 } 7 .box:hover { 8 width: 500px; 9 10 } 11
精品java學習視頻
正則表達式和文本操作:鏈接:https://pan.baidu.com/s/1f2As51CjLdTNDFQTbg1K6Q 提取碼:98b4
CSS基礎總結