HTML 1-樣式引入、路徑、尺寸單位

時間 2019-12-07

標籤 html 樣式引入路徑尺寸單位欄目 HTML 简体版

原文原文鏈接

CSS樣式的引入方式

css樣式的引入有三種方式：
1.css內聯式，可直接寫在html標籤內，通常不建議這種寫法。javascript

<p style="color:red;font-size:12px">這裏文字是紅色</p>

2.css嵌入式，CSS代碼寫在<style>標籤中並放在head標籤內css

<style type="text/css">
p{
    font-size:10px;
}
</style>

3.css樣式導入,link和import方式
【1】.link連接<link href="main.css" rel="stylesheet" type="text/css" />
【2】.import導入 <style type="text/css">@import "blue.css"</style>
注：三種css引入方式的優先級，內聯式》嵌入式》導入式。嵌入式>導入式有一個前提：嵌入式css樣式的位置必定在外部式的後面。通常將<link href="style.css" ...>代碼寫在<style type="text/css">...</style>嵌入式的前面（實際開發中也是這麼寫的）。其實總結來講，就是就近原則（離被設置元素越近優先級別越高）。(引入css樣式、A連接使用href,引入其餘的圖片,js代碼使用src)
link和import方式的區別：
link和@import的最根本區別就是，link是一個html的一個標籤，而@import是css的一個標籤。link屬於XHTML標籤（功能不侷限於導入CSS），而@import則是CSS提供的一種規則（CSS2.1提出的規範，老瀏覽器不兼容）。
【1】@import url（）機制是不一樣於link的，link是在加載頁面前把css加載完畢，因此顯示出來的頁面從開始就是帶樣式效果的；而@import url（）則是讀取完文件後再加載樣式，因此會出現一開始沒有css樣式，閃爍一下出現樣式後的頁面(網速慢的狀況下)。
【2】使用javascript控制dom改變樣式的時候只能使用link標籤，@import導入的樣式不受dom控制其樣式。html

文件路徑，絕對路徑和相對路徑

../main.css 、./main.css、main.css、/main.css有什麼區別java

../main.css 相對路徑，指向當前所在目錄的上級目錄下的main.css文件
./main.css 相對路徑，指向當前所在目錄下的main.css文件
main.css 絕對路徑，指向當前所在目錄下的main.css文件
/main.css 絕對路徑，指向根目錄下的main.css文件

text-align的做用

text-align有5個值，left/right/center/justify/inherit，左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候，每行中的字間距可能不一致。
chrome

css尺寸單位，px、em、rem

px像素單位，em、rem相對單位，em（相對父元素字體大小的倍數，父元素不存在時繼續向上層找其父元素，如找不到則以瀏覽器默認字體16px大小爲基準），rem（相對於HTML根節點元素字體大小的倍數）。對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可。對於須要適配各類移動設備，推薦使用rem
1.px：是你屏幕設備物理上能顯示出的最小的一個點，這個點不是固定寬度的，不一樣設備上點的長寬、比例有可能會不一樣。假設：你如今用的顯示器上1px寬=1毫米，但我用的顯示器1px寬=兩毫米，那麼你定義一個div寬度爲100px，你顯示器上看這個div是10釐米，我顯示器上看是20釐米。另一個px點的長寬不必定是1:1的正方形，有的設備上長寬比是不同的。IE沒法調整那些使用px做爲單位的字體大小。
2.em：全部現代瀏覽器下默認字體尺寸是16px。這時1em=16px。而後你人爲的把body裏面定義font-size:12px;（把瀏覽器默認16px改小了），此刻1em=12px，若是是0.8em則實際等於12px*0.8。em的用處是你要整個網頁字體統一變大變小你只要改body裏面font-size的值就好了.瀏覽器

<style>
      body{
    font-size: 16px;
    }
      p{
    font-size:0.75em;
    }
      span{
    font-size:2em;
    }
</style>

    <html>
      我大小爲16px;
      <p>此段落文字大小爲12px(16×0.75);
      <span>我大小是2em，即24px，這裏是相對父級字號×2的，而不是相對body裏面的16px</span>
      </p>
     </html>

3.rem em相對父級，嵌套層多了算字體大小很麻煩。因此有了Rem(IE6-8不支持)，他只相對html根元素字體尺寸(默認仍是16px，除非你本身用font-size定義其餘大小)，rem沒有了繼承父級尺寸這個關係。經過rem既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。好比默認的html font-size=16px，那麼我想設置12px 的文字就是：12÷16=0.75（rem）,實際開發中爲了便於計算，咱們改變一下html的默認font-size=10px不就好計算了（10÷16=62.5%）！再將原來的px數值除以10，而後換上em做爲單位。對於不支持rem的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位PX的聲明。這些瀏覽器會忽略用rem設定的字體大小。dom

html{
    font-size:62.5%; <!--10÷16=62.5%-->
}

body{
    font-size:12px;
    font-size:1.2rem ; <!-- 12÷10=1.2rem -->
} 
p{
    font-size:14px;
    font-size:1.4rem;<!--14÷10=1.4rem-->
}

以下代碼，設置 p爲幾 rem，讓h1和p的字體大小相等?函數

<h1>title</h1>
  <p>title</p>
   <style>
    html{
    font-size: 62.5%;
  }
    p{
    font-size: ?rem;
  }
    h1{
    font-size: 60px;
  }
 </style>

瀏覽器默認字體大小爲16px,代碼中html標籤樣式font-size:62.5%設置字體大小爲62.5%，即0.625×16=10px,因此當前瀏覽器默認的字體大小被修改成10px。rem基於HTML根元素字體大小爲參考，p標籤中的font-size設置爲6rem時（6rem×10）即爲60px，可與h1標籤字體大小相同。字體

chrome 調試介紹

console.log主要用於對JavaScript程序調試，相比於alert()，console.log僅在控制檯中打印相關信息，不會阻斷JavaScript程序的執行。console.log()能夠接受任何字符串、數字和JavaScript對象。與alert()函數相似，console.log()也能夠接受換行符n以及製表符t。console.log()語句所打印的調試信息能夠在瀏覽器的調試控制檯中看到。
url