什麼是html,css,js
html:定義文檔的內容,
css:決定內容整麼顯示(層疊樣式表—解決內容和表現分離的問題),
js:內容之間的邏輯和於用戶的交互
css的組成
css有
選擇器(要表現的目標/標籤)=id選擇器(優先級高於類選擇器)+class類選擇器
+聲明=屬性+值
樣式的優先級
內聯》內部》外部 --------------------------當 類選擇器–屬性 相同時,優先生效的是優先級高的,即優先內聯的生效
內聯以下的優先級如下:
內聯樣式優先級1000
id選擇器優先級100
類和僞類優先級10
元素選擇器優先級1
通配符優先級0
繼承的樣式沒有優先級
<head>
<link rel="stylesheet" type="text/css" href="style.css"/> <!-- 外部樣式 -->
<style type="text/css">
h3{color:green;} /* 內部樣式 */
</style>
</head>
<body>
<h3 style="color: blue">測試!</h3> <!-- 內聯樣式 -->
</body>
css的僞類 : 和僞元素 ::
解釋
首先僞元素和僞類都是作用於html標籤的樣式效果上的。他們是對內聯樣式的一個拓展。可以簡單理解成:css裏面的js,----動態添加元素,樣式生效的時機…html因爲添加了js,使得html標籤有了動作/行爲。。。。。。css也正是因爲有了這些僞類和僞元素,使得樣式也有了行爲/動作。。。。。。。。。這是對樣式的豐富
表示方法
-
: 僞類一般用:表示----比如
p:active{} 當標籤p是成爲連接被激活後,樣式要整麼呈現
p: focus{} 當標籤p被光標集中,樣式要腫麼呈現 -
:: 僞元素一般用::表示,比如
p::before{ }
p::after{}
css樣式的繼承關係
比如div裏面有ABC三個元素,如果你設置了div的字體color爲red,則ABC元素內的字體都會繼承該red
css爲何有時要清除浮動
一個div設置了左浮動,則div裏的元素ABC會排成一行顯示,這時如果B設置了clear:both清除浮動(也就是b要獨佔一行顯示,他會排除左右的元素),bc會到下面一行顯示。
CSS浮動會對原本的佈局產生破壞,所以我們會考慮清除浮動產生的影響,在網頁設計中,很常見的一種情況是給內容一個div作爲包裹容器,而這個包裹容器不設置高度,而是讓裏面的內容撐開包裹容器的高度。
css中我們常常會用 clearfix::after 方式清除浮動,即使用僞元素的形式。它的原理其實還是基於css的clear實現,使用clearfix後,after這個僞元素css會默認給他加上 clear : both
clearfix::after{
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
}
應用場景1:
如果子元素的高度大於父元素,且子元素設置了浮動,那麼子元素將溢出,這時候你可以使用 “clearfix(清除浮動)” 來解決該問題(就是解決子元素溢出問題)
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}