CSS-語法

Pluto_lei發表於2020-09-29
CSS

CSS-基礎

一、兩種語法

選擇器 {   
    屬性: 值;
    屬性: 值;
 }

@關鍵字 { 
   其他
 }

注意：

  1. 空格和縮排建議保留
  2. 半形符號，不要寫成全形

二、四種引入方式

2.1、引入方式一

通過<link>標籤引用
<link rel="stylesheet" href="index.css">

2.1、引入方式二

通過CSS語法@import引入
放在style標籤或者CSS檔案中

  1. @import 必須放在CSS檔案開頭
  2. 語法後面的分號必不可少
<style>
@import url("index.css"); 
@import url('index.css'); 
@import url(index.css); 
@import 'custom.css'; 
@import "common.css"; 
@import url('landscape.css') screen and (orientation:landscape);
</style>

2.1、引入方式三

內部樣式

  1. 將CSS放在頁面<style>標籤中
  2. style標籤可以放在head裡，也可放在body內任意地方
<!DOCTYPE html>
 <html>
 <head>  
<meta charset="UTF-8" />  
<title>CSS</title> 
 <style> 
   h1 { background: orange; }  
</style> 
</head> 
<body> 
 <h1>Hello CSS!</h1>
 </body>
 </html>

2.1、引入方式四

內聯樣式
不推薦，但在某些情況下也有用
<p style="background: orange; font-size: 24px;"> CSS <p>

三、廢棄的引入方式

屬性樣式
已廢棄，儘量不用
<img src="a.png" width=100 height=200 >

link方式和@import引入CSS有 什麼區別?
<link>是HTML的標籤，在頁面上代表一個元素，可以被JS選中修改； @import是CSS的語法，JS無法操控
兩個link標籤，檔案會並行載入。 一個link的CSS裡包含一個@import， 檔案序列載入會更慢。因此不推薦用@import

相關文章