前端之css（一）

目錄

• 什麼是css
• 註釋
• CSS三種引入方式
• 基本選擇器
  • 元素選擇器
  • id選擇器
  • 類選擇器
  • 通用選擇器
• 組合選擇器
  • 後代選擇器
  • 兒子選擇器
  • 弟弟選擇器
  • 毗鄰選擇器
• 屬性選擇器
• 分組與嵌套
• 僞類選擇器
• 僞元素選擇器
  • first-letter
  • before
  • after
• 選擇器優先級

什麼是css

css： 層疊樣式表

css語法結構：

選擇器 {屬性1：屬性值1}

註釋

/*單行註釋*/

/*
多行註釋1
多行註釋2
*/

CSS三種引入方式

• 經過link標籤引入外部的css文件（最正規用法）

<link rel="stylesheet" href="01%20css簡介.css">

• 直接在html頁面上的head內經過style標籤直接書寫css代碼

<style>
    h1 {
        color: red;
    }
</style>

• 行內標籤（直接在標籤內部經過style標籤寫）（不推薦使用）

<h1 style="color: yellow">文本信息</h1>

基本選擇器

元素選擇器

/*讓全部的span標籤變成紅色*/

<style>
    span {
        color: red;
    }
</style>

id選擇器

<style>

        #d2 {
            color: gold;
        }
    </style>

類選擇器

<style>
        .c1 {
            color: red;
        }
    </style>

通用選擇器

選擇全部

<style>
        * {
            color: orchid;
        }
    </style>

組合選擇器

後代選擇器

兒子選擇器

弟弟選擇器

毗鄰選擇器

屬性選擇器

1. 找含有某個屬性名的標籤

1. 找含有某個屬性名而且屬性值是什麼的標籤

1. 找p標籤 含有某個屬性名而且屬性值是什麼 的標籤

• 任何的標籤都有本身的默認的屬性 id class
• 標籤支持自定義任何多的屬性（也就意味着能夠讓標籤幫你攜帶一些額外的數據）

分組與嵌套

分組

嵌套

僞類選擇器

a標籤有四種狀態

• 沒有被點擊過
• 鼠標懸浮在上面
• 點擊以後不鬆手
• 點擊以後 再回到原來的頁面

咱們將input框鼠標帶你進去以後的那個狀態叫作input獲取焦點，

鼠標移出去以後的狀態叫作input框失去焦點

<style>
        a:link {    /*沒有點擊爲紅色*/
            color: red;
        }
        a:hover {   /*鼠標懸浮以後爲藍色*/
            color: blue;
        }
        a:active {  /*點擊以後不放手爲黃色*/
            color: yellow;
        }
        a:visited {     /*點擊以後回到原來的頁面 顯示爲綠色*/
            color: green;
        }
    </style>

僞元素選擇器

能夠清除浮動帶來的負面影響，能夠經過css添加文本內容

first-letter

經常使用的給首字母設置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

選擇器優先級

1. 選擇器相同的狀況下， 引入方式不一樣

   遵循就近原則， 誰離標籤更近，就聽誰的

2. 選擇器不一樣的狀況下

   行內選擇器 > id選擇器 > 類選擇器 > 元素選擇器