1. 程式人生 > >【css】選擇器+盒子模型

【css】選擇器+盒子模型

做牛腩的時候曾接觸過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>
<link href="css檔案的路徑" rel="stylesheet"></link
>
推薦使用這種方式,可用性高。為啥不推薦使用上一種引入方式就看看下面的對比。
第三種link引入與第二種@import引入的區別:

link_vs_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;

定位與盒子模型配合使用以控制html元素的位置。