前端基礎——CSS（一）

時間 2020-10-26

標籤 css html 前端 css3 瀏覽器服務器字體網站 url code 欄目 CSS 简体版

原文原文鏈接

CSS

css 層疊樣式表（cascading style sheets），做用是靜態的修飾網頁，而且能夠配合各類腳本語言動態的對網頁各元素進行格式化css

發展過程html

版本：             時間：               
    css1             1995年12月
    css2             1997年初
    css3             1999年開始制訂

前端三層技術前端

html ----> 結構層 ------- 從語義的角度搭建網頁結構

css ----> 樣式層 ------- 從美觀的角度描述頁面樣式

JavaScript--->行爲層 ------- 從交互的角度描述頁面行爲

css實現了頁面的結構和樣式分離，拯救了混亂的HTML

css組成css3

層疊層                            樣式
   (css中貫穿始終的加載特性)        (定義如何顯示HTML元素)
    層疊性                          文字文本
    繼承性                          背景
                                    盒模型
                                    浮動
                                    定位
                                    其餘

css 書寫位置

內聯式：也稱行內式，在HTML標籤上的style屬性中書寫css樣式

<div style="width:100px;height:100px;background>

內聯式缺點：必須寫在標籤上，使標籤結構繁重，增長代碼量

內嵌式：
缺點：結構和樣式沒有徹底分離，代碼依舊書寫在HTML文件的<style>標籤內部；css樣式只能給一個HTML文件使用，若css代碼太多，會形成頭重腳輕。

外聯式：在HTML的<head>標籤內部使用<link>標籤引入

屬性名     屬性值            說明
   rel    "stylesheet"    表示引入的外部文件與html之間的關係
   href    css 文件路徑    超文本引用
   type    "text/css"     表示加載時代碼按照純文本形式的css代碼加載

外聯式的優勢：1.實現了HTML和css徹底分離；2.多個HTML文件能夠公用一個css文件，減小代碼量，便於提取公共的css；3.實現一個css變化，多個頁面同時變化；4.一個HTML文件能夠引入多個css文件，能夠實現同一個頁面中的css代碼分層瀏覽器

導入式：(不建議使用直接在html中使用）
導入樣式和連接樣式比較類似，採用@import樣式導入CSS樣式表，在HTML初始化時，會被導入到HTML或者CSS文件中，成爲文件的一部分，相似第二種內嵌樣式。會在加載html文檔後在加載樣式因此有時會出現沒有樣式的狀況(很短暫)，而後就有樣式了

@import在html中使用，以下：

<style type="text/css">

@import url(style.css);

</style>

CSS規則

css規則由兩個主要部分構成：選擇器，以及一條或多條聲明服務器

多條樣式屬性
p{ width : 400px; font-size : 14px;}
|       |           |
選   屬         屬
擇   性         性
器   名         值字體

樣式規則
1.內嵌式中全部代碼必須寫在<head>標籤內的<style>標籤內

2.給每一個選擇器添加的樣式屬性都必須寫在一對大括號{}以內

3每條屬性後面的分號必須寫，若不寫，會致使後面的代碼加載錯誤

4.上傳服務器時，經常使用緊湊格式的css樣式格式，減小沒必要要的空白字符，壓縮文件大小，便於傳輸

(有專門的網站能夠進行css代碼壓縮/解壓縮格式化)網站

CSS經常使用樣式

顏色color：給文字設置顏色的url

字體font-family：元素內文字的字體，字體屬於font綜合屬性的一個單一屬性。屬性值能夠有多個，值之間用逗號分隔。

瀏覽器中加載的字體是用戶機器中自帶的，若是電腦沒有設置的字體則加載失敗，須要查找下一個，全部每每在最後設置一個全部機器都具有的通用字體做爲後路。code

盒子模型實體化——三屬性

width、height、background-color

CSS 高級選擇器

選擇器：選擇要添加樣式的HTML標籤的一種方法、模式
css2.1版本有7中選擇器：

基礎選擇器：標籤選擇器、id選擇器、類選擇器、通配符選擇器

高級選擇器：後代選擇器、交集選擇器、並集選擇器

標籤選擇器：經過標籤名選擇標籤元素。選中的是HTML文件中全部的同名標籤。（不受嵌套關係影響，依舊能選中）

id選擇器：經過標籤上的id屬性去選擇標籤。

若是但願多個標籤設置相同的樣式，使用id選擇器的話，必須給這多個標籤去不一樣的id名，分別選中設置。【書寫：#id屬性值】

類選擇器：經過標籤上的class屬性去選擇標籤。
選擇的是頁面中全部class屬性值相同的標籤。【書寫：.class屬性值】

通配符選擇器：經過一個特殊符號選擇頁面內全部的標籤，選擇的是<html>標籤在內的全部標籤。【書寫：* 】

缺點：選擇效率低，會讓不須要的標籤也加載一次樣式，致使瀏覽器多作無用的工做。

後代選擇器：包含選擇器，經過標籤之間存的嵌套關係去選擇元素，至關於基礎選擇器。【書寫：空格表示後代，空格前面的選擇器選中的標籤是後面選擇器選中的祖先級】

代碼示例：
   <style>
      .b1 ul li p{
      color:red;
      }
   </style>
   ......
   <div class="b1">
       <ul>
        <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
        <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
        <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
        <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
        </ul>
    </div>

交集選擇器：經過一個標籤上知足全部基礎選擇器稍微需求去選擇標籤。若是一個條件不知足都不能被選中，常見的是標籤與類的交集。

【書寫：基礎選擇器進行連續書寫，若是有標籤選擇器參與交集，必須書寫在開頭。
還能夠進行類名的連續交集。交集選擇器能夠做爲其餘高級選擇器的組成部分。（IE6不支持類名連續交集寫法）
】

代碼示例：
     <style>
        p.demo{
            color:red;
        }//顏色爲紅色
        .d1 p.demo{
            color:red;
        }//這個覆蓋了上面的直接爲綠色
    </style>
    ....
    <div class="d1">
       <ul>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p class="demo p1">b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
       </ul>
    </div>

並集選擇器：能夠將前面的6種選擇器中間用逗號進行分隔，最後一個不寫逗號。選中的是全部的單獨選擇器選中的標籤的並集集合。

代碼示例：
    <style>
       div,.demo{
          color:red;
        }
     </style>
     .....
      <div class="d1">
       <ul>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p class="demo p1">b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
          <li><p>b1 標籤 裏的 li標籤 內的段落p </p></li>
       </ul>
    </div>

若是多個標籤具備公共樣式，可是不能用一個選擇器選中，可使用並集寫法，也能夠用該方法，進行默認樣式清除，替換通配符的功能。

body,h2,div,ul,li,p {
       margin:0;
       pading:0;
   }

行內式樣式與內嵌式或外鏈式樣式比較權重時，行內式權重最高。
可是，與!important關鍵字相比權重要低的~

CSS 層疊式

繼承性：樣式能夠從祖先級繼承而來
層疊性：多個選擇器在進行對比的過程當中，最終只有一個屬性會加載成功，它會層疊、覆蓋掉其餘的屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。