一點點進擊前端---css基礎知識

什麼是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;
}

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章