樣式有幾種引入方式?link和@import有什么區別?
共計 4 種方式可以在 HTML 中引入 CSS。
- 內聯方式 直接在html里用標簽添加樣式。
- 嵌入方式 通常在標簽添加樣式。一般是給class或者id添加樣式。 嵌入方式所添加的樣式對當前頁面有效。
- 鏈接方式 在標簽內引入外部css文件。此種方式優點:可維護性好,CSS文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可。
- 導入方式 使用@import導入外部css文件。
link和@import有什么區別?
- link屬于html標簽,一般用于引用css樣式和a標簽的鏈接。 @import必須在標簽里引用css樣式。
- 加載順序不同。
link是在瀏覽器加載到css時同時加載,而@import 是在加載完所有html后才加載。 - 兼容差別。link所有瀏覽器都支持,@import必須在ie5以上版本。
- 通過dom控制樣式時,只能用link,而@import不支持。
文件路徑../main.css 、./main.css、main.css有什么區別?
../main.css 指上一層目錄里的main.css文件。
./main.css和main.css 都指當前文件夾內的main.css文件。
console.log是做什么用的?
調試js。在瀏覽器控制臺顯示console.log的內容。
text-align有幾個值,分別有什么作用?
text-align 指文本水平對齊方式。
text-align:left; 左對齊
text-align:right;右對齊
text-align:center;居中對齊
text-align:justify;兩端對齊
text-align:inherit;繼承父元素屬性中的text-align
px、em、rem分別是什么?有什么區別?如何使用。
px是像素單位,絕對數值。
em/rem是相對數值,em相對其父元素,rem相對其html節點定義的數值大小。rem是css3新引入的一個度量單位,支持IE 8以上版本。
對chrome 審查元素的功能做個簡單的截圖介紹。
如下代碼,設置p為幾 rem,讓h1和p的字體大小相等?
<h1>饑人谷</h1>
<p>饑人谷</p>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
一般瀏覽器的根元素默認字體大小16px,16*62.5%=10px 也就是說1rem=10px
p標簽的font-size設置為6rem.