1. 程式人生 > >前端之CSS

前端之CSS

功能 後代選擇器 add 為什麽 樣式表 isp css2 作用 耦合性

01-css的引入方式

在HTML中引入css方式總共有三種:

  1. 行內樣式
  2. 內接樣式
  3. 外接樣式

     3.1 鏈接式

     3.1 導入式

css介紹

現在的互聯網前端分三層:

  • HTML:超文本標記語言。從語義的角度描述頁面結構
  • CSS:層疊樣式表。從審美的角度負責頁面樣式
  • JS:JavaScript 。從交互的角度描述頁面行為

CSS:Cascading Style Sheet,層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式,定義網頁的顯示效果。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。

css的最新版本是css3,我們目前學習的是css2.1

接下來我們要講一下為什麽要使用CSS。

HTML的缺陷:

  1. 不能夠適應多種設備
  2. 要求瀏覽器必須智能化足夠龐大
  3. 數據和顯示沒有分開
  4. 功能不夠強大

CSS 優點:

  1. 使數據和顯示分開
  2. 降低網絡流量
  3. 使整個網站視覺效果一致
  4. 使開發效率提高了(耦合性降低,一個人負責寫html,一個人負責寫css)

比如說,有一個樣式需要在一百個頁面上顯示,如果是html來實現,那要寫一百遍,現在有了css,只要寫一遍。現在,html只提供數據和一些控件,完全交給css提供各種各樣的樣式。

行內樣式

技術分享圖片
1 <div>
2     <p style="color: green">我是一個段落</p>
3 </div>
View Code

內接樣式

技術分享圖片
<style type="text/css">
    /*寫我們的css代碼*/
        
    span{
    color: yellow;
    }

</style>
View Code

外接樣式-鏈接式

技術分享圖片
<link rel="stylesheet" href="./index.css">
View Code

外接樣式-導入式

技術分享圖片
<style type="text/css">
        @import url(‘./index.css‘);
</style> 
View Code

02-css的選擇器

css的選擇器:1.基本選擇器 2.高級選擇器

基本選擇器包含:

標簽選擇器