【前端】CSS基礎學習

CSS選擇器(Cascading Style Sheet，層疊樣式表)

css代碼寫法: h1{color:red;} 選擇器{css屬性:屬性值;}

css代碼引入

方式1
 head標籤裏面寫
 <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
       }
    </style>
方式2
 內斂樣式:
 <div style=" height: 200px;width: 200px;"></div>
方式3 
 外部文件引入
 head標籤裏面寫link標籤
 <link rel="stylesheet" href="文件路徑">

 

css選擇器

基本選擇器

元素選擇器:
 div{ #標籤名字
         color:red;
 }
id選擇器:id值不能重複
 <div id="xuefei">
    雪飛大美女
 </div>
 
 #xuefei{  
  color:green;
 }
類選擇器: 類值能夠重複
 <div id="dazhuang" class="c1">
    大壯dsb
 </div>
 <div id="xuefei" class="c1">
    雪飛大美女
 </div>
 
 .c1{
  color: green;
 }
 
 div.c1{ #div標籤裏面含有class值爲c1的標籤
  color: green;
 }
通用選擇器
*{ #找到全部的標籤
 color: green;
}
​

 

組合選擇器

後代選擇器

div a{   #找到div標籤後代裏面的全部a標籤
 color:red;
}

兒子選擇器

div>a{ #找到div的兒子標籤這一代的a標籤
 color:red;
}

毗鄰選擇器

div+a{  #找到是緊挨着div標籤的下一個標籤(是兄弟標籤)
 color: red;
}

弟弟選擇器

div~a{  #找到的是同級的後面的全部兄弟標籤
 color: red;
}

 

屬性選擇器

 #經過屬性名來查找
 [title]{ #找到全部含有title屬性的標籤  
  color: red;
 }
 
 div[title]{ #含有title屬性的div標籤
  color: red;
 }
 #經過屬性名對應的值來查找,當屬性值的值爲數字的時候,數字要加上引號[title='666']
 input[type=text]{ #含有type屬性,而且type屬性的值爲text的input標籤
  
 }

分組

多個選擇器選擇的標籤設置相同css樣式的時候,就能夠用分組
div,p{ #div選擇器和p選擇器共同設置相同的樣式,能夠逗號分隔
 color:red;
}

僞類選擇器

a標籤自帶的效果:未訪問過的時候是藍色的字體顏色,訪問過以後是紫色的,自帶下劃線
​
/* 未訪問的連接 */
a:link {
 color: #FF0000
}
​
/* 已訪問的連接 */
a:visited {
 color: #00FF00
} 
​
/* 鼠標移動到連接上 */ 這個用的比較多,能夠應用在其餘標籤上
a:hover {  
 color: #FF00FF
} 
​
/* 選定的連接 */ 就是鼠標點下去尚未擡起來的那個瞬間，能夠讓它變顏色
a:active {
 color: #0000FF
}
​
/*input輸入框獲取焦點時樣式*/
input:focus {   #input默認的有個樣式，鼠標點進去的時候，input框會變淺藍色的那麼個感受
 #outline: none;
 #框裏面的背景色
}

僞元素選擇器

   /*僞元素選擇器*/
        div:first-letter{
            color: red;
            font-size: 20px;
       }
        /*在p標籤內容的前面插入一些內容*/
        p:before{
            content: '?';
            color: green;
            font-size:100px;
       }
        /*在p標籤內容的後面插入一些內容*/
        p:after{
            content: '哈哈!';
            color: pink;
       }

 

選擇器的優先級

      /*優先級數字越大,越優先顯示其效果,優先級相同的,顯示後面定義的選擇器對應的樣式*/
       /*id選擇器優先級爲100*/
       /*#d1{*/
           /*color:deepskyblue;*/
       /*}*/
       /*!*繼承的優先級爲0*!*/
       /*body{*/
           /*color:red;*/
       /*}*/
       /*!*類選擇器的優先級是10*!*/
       /*.c1{*/
           /*color: blue;*/
       /*}*/
       /*.c2{*/
           /*color: orange;*/
       /*}*/
       /*!*元素選擇器優先級是1*!*/
       /*div{*/
           /*color: green;*/
       /*}*/
       內斂樣式優先級爲1000
        <p class="cc3" style="color: red;">我是cc3的p標籤</p>
        
       important優先級最高,最牛逼
       .cc1 .cc3 {
           color: purple!important;
       }

 

css屬性相關

高度寬度設置,注意:只有塊級標籤可以設置高度寬度,內斂標籤不能設置高度寬度,它的高度寬度是由內容決定的

 div{
           width: 100px; 寬度
           height: 100px; 高度
           
       }

 

補充:a標籤的字體顏色設置必須選中a標籤才行

.c1 a{  
 color: red;
}

 

字體屬性

字體

.c1{
 font-family: '楷體','宋體','微軟雅黑';
}

字體大小

.c1{
           /*font-family: '楷體','宋體','微軟雅黑';*/
           font-size:14px; 默認字體大小爲16px.
            
       }

字體顏色

color:red;

子重,粗細

 .c1{
           
           font-weight: bold;
           font-weight: 100;
       }
        
​
值 描述
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
​

顏色表示方式

  p{
            /*color: red;*/
            /*color: #78FFC9;*/
            /*color: rgb(123,199,255);*/
             color: rgba(123,199,255,0.3); 多了一個透明度的數字:0-1的一個數字
       }

文字屬性

文字對齊

 text-align
 
 div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
       }
        
 left 左邊對齊 默認值
 right 右對齊
 center 居中對齊

文字裝飾

 text-decoration
 
 div a{
           /*text-decoration: none;*/ #給a標籤去除下劃線
           /*text-decoration: line-through;*/
           text-decoration: overline;
       }
 值 描述
 none 默認。定義標準的文本。
 underline 定義文本下的一條線。
 overline 定義文本上的一條線。
 line-through 定義穿過文本下的一條線。

首行縮進

p {
 text-indent: 32px; #首行縮進兩個字符，由於我記得一個字在頁面上的默認大小爲16px
}

 

背景屬性

背景顏色
background-color: red;
​
 div{
            width: 600px;
            height: 600px;
            /**/
            /*background-image: url("yeye.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 50px;*/ 相對於div標籤的,距離左邊100px,距離上面50px
            background:url("yeye.jpg") no-repeat left center;
            /*background-position: right top;*/
​
       }
簡寫方式,顏色 圖片路徑 是否平鋪 圖片位置
background:#ffffff url('1.png') no-repeat right top;
        

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 500px;
width: 200px;
}
.c2{
background-color: green;
height: 500px;
width: 200px;
}

.s1{
position: fixed; /*固定定位,位置是根據瀏覽器窗口來的*/
/*top:20px;*/
left: 20px;
bottom: 20px;
background-color: blue;
height: 40px;
width: 80px;
text-align: center;

line-height: 40px; /* 和標籤高度一致,標籤內容就垂直居中 */

}
.s1 a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>

<!--<a name="top">這裏是頂部,親愛的</a>--> <!-- 錨點 -->
<div id="top">這是頂部</div> <!-- 錨點 -->

<div class="c1"></div>
<div class="c2"></div>

<span class="s1">
<a href="#top">回到頂部</a> <!-- 觸發錨點 -->
</span>

</body>
</html>

錨點設置的兩種方式 <!--<a name="top">這裏是頂部,親愛的</a>--> <!-- 錨點 --> <div id="top">這是頂部</div> <!-- 錨點 -->觸發錨點的a標籤寫法<a href="#top">回到頂部</a> <!-- 觸發錨點 -->