【css】選擇器+盒子模型
阿新 • • 發佈:2018-12-25
做牛腩的時候曾接觸過css,有一篇部落格總結如下:【牛腩】HTML+CSS基礎瞭解
【如何引入css】
曾寫了一篇文章:【JavaScript】什麼是JavaScript?提到如何把JavaScript程式碼引入html程式碼中的幾種方式。類似的,css程式碼引入html中也有那麼幾種方式。下面一一列舉:
1、通過html提供的一個標籤<style></style>
直接把css程式碼寫入html程式碼頁面。
<style type="text/css">
.class1{
border:1px;
}
<style >
此種方式的css程式碼只能在本頁面中使用,複用性比較低。
2、通過html提供的一個標籤<style></style>
引入外部css檔案到html內碼表。
<style type="text/css">
@import url("css檔案的路徑");
</style>
3、通過html提供的一個標籤<link></link>
的 href
屬性來把外部css文件引入html內碼表。
<link href="css檔案的路徑" rel="stylesheet"></link >
推薦使用這種方式,可用性高。為啥不推薦使用上一種引入方式就看看下面的對比。
第三種link引入與第二種@import引入的區別:
4、直接在html的各種標籤中使用style
屬性。
<a style="color:#0F0;">一條新聞題目</a>
只能適用於本標籤,複用性低,不推薦使用。
【選擇器】
css是用來對html的內容進行樣式設定的,html頁面是由一對對的標籤以及實際要展示的內容來組成。
那麼要如何對html中的特定內容實現特定的樣式效果呢?就是通過html頁面中眾多的標籤來控制的。標籤對特定內容做標記,用來控制對特定的頁面內容實現特定的效果。
css獲取html中特定文字的標籤以及標籤的屬性、屬性值。加上樣式設定。就這麼實現了。
那麼獲取標籤以及標籤的屬性、屬性值的過程是通過選擇器來實現的。
選擇器分為這麼幾類:
基礎的選擇器:
1、標籤選擇器:找到所有指定的標籤進行樣式化。
div{
color:#0f0;
}
2、類選擇器:使用類選擇器首先要給html標籤指定對應的class屬性值。
.class的屬性值{
color:#0f0;
}
3、id選擇器:使用id選擇器首先要給html標籤新增一個id屬性值。
#id的屬性值{
color:#0f0;
}
優先順序比較:
ID選擇器>類選擇器>標籤選擇器
注意:類選擇器和id選擇器的屬性值都不能以數字開頭,否則無效。
配合使用的選擇器:
1、交集選擇器:
對指定的選擇器的公共部分
選擇器1選擇器2…{
樣式1,樣式2,……
}
2、並集選擇器:
對指定的選擇器進行統一的格式化。
選擇器1,選擇器2…{
樣式1;樣式2;……
}
3、通過選擇器:
可以匹配任何元素
*{
樣式1;樣式2;……
}
4、偽類選擇器:
針對元素處於某一狀態
a:link{color:#FF0000}/*未訪問的連結*/
a:visited{color:#00ff00}/*已訪問的連結*/
a:hover{color:#ff00ff}/*滑鼠移動到連結上*/
a:active{color:#0000ff}/*選定的連結*/
【盒子模型】
css中最最核心的部分就是盒子模型了。html頁面內容無非就是文字、圖片、圖形。樣式的設定無非就是設定顏色、大小、位置、形狀。而盒子模型就是設定位置的一個關鍵點。
盒子模型長這個樣子
Margin:外邊距,一個盒子邊框和另一個盒子邊框的距離。
Border:邊框
Padding:內邊距,一個盒子邊框和它的內容的距離。
正中間的是內容content。
定位也是用來設定html元素位置的。
定位分為三種:
1、相對定位:相對於元素原本的位置進行移動的。使用方式:position:relative;
2、絕對定位:相對於整個頁面而言固定不變。使用方式:position:absolute;
3、固定定位:相對於瀏覽器而言固定不變。使用方式:position:fixed;