【轉】01-css的引入方式 引入css方式(重點掌握) 行內樣式 內接樣式 外接樣式 3.1 鏈接式 3.1 導入式 css介紹 現在的互聯網前端分三層: HTML:超文本標記語言。從語義的角度描述頁面結構。 CSS:層疊樣式表。從審美的角度負責頁面樣式。 JS:JavaScript 。從交互的角 ...
引入css方式(重點掌握)
-
行內樣式
-
內接樣式
-
外接樣式
3.1 鏈接式
3.1 導入式
css介紹
現在的互聯網前端分三層:
- HTML:超文本標記語言。從語義的角度描述頁面結構。
- CSS:層疊樣式表。從審美的角度負責頁面樣式。
- JS:JavaScript 。從交互的角度描述頁面行為
CSS:Cascading Style Sheet,層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式,定義網頁的顯示效果。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。
css的最新版本是css3,我們目前學習的是css2.1
接下來我們要講一下為什麼要使用CSS。
HTML的缺陷:
- 不能夠適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
CSS 優點:
- 使數據和顯示分開
- 降低網路流量
- 使整個網站視覺效果一致
- 使開發效率提高了(耦合性降低,一個人負責寫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