一些CSS樣式基礎知識
- jacklove原創
- 2018-05-21 11:24:431952瀏覽
在學習中會遇到一些css基礎知識，本篇介紹一些CSS樣式基礎知識。
樣式有幾種引入方式? link 和@import有什麼區別
樣式有三種引入方式，分別是：
#外部引入式
主要是使用link標籤或@import標籤從外部引入後綴名為.css的樣式文件，語法分別是：
ee0b4617487ab7809c3039cd537eed19
.css);
把樣式寫在目前c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927標籤內，語法是：
<style>
p {color:red; text-align:center;
}</style>內聯式在所要新增樣式的開始標籤內加入樣式（結束標籤無法新增），語法為：
f2293436eff2616a1df9036ef3f99b9c我是P標籤內容94b3e26ee717c64999d7867364b1b4a3
#link 和@import區別主要是：
瀏覽器載入先後區別。 （先載入link，後載入@import）
link通用相容性比@import更好
link支援使用JS控制DOM去改變樣式；而@import不支援
檔案路徑../main.css 、./main.css、main.css有什麼區別
../main.css代表上級目錄的main.css檔案
./main.css代表目前目錄main.css文件
main.css代表目前目錄的main.css文件，相當於./main.css
console.log是做什麼用的
console.log主要是來做開發偵錯用的，把所除錯的物件顯示在審查元素的控制台中。功能相當於：alert()（不是很理解，有待深入研究）
text-align: justify是什麼
#主要作用於大段文字排版中調整中間縫隙使兩邊對齊。
px、em、rem分別是什麼？有什麼區別？如何使用
px為像素單位，一般都是寫死的，不會有別的干擾因素。
em與rem為相對單位，是多變的。 em為相對父級元素的單位大小而產省變化，rem為相對根節點的元素單位產生變化。例如：
<!DOCTYPE html><html style="font-size:15px"> <!--这里是根节点，设置为15px--><head> <title>px.em.rem区别</title></head> <body>我是body内容 <h1>我是标题内容</h1> <div style="font-size:2em;border:red 1px solid"><!--em相对于父级html，html为15px，2em相当于30px--> 我是div内容 <p style="font-size:2em">我是em</p> <!--em相对于父级div,div为30px，2em相当于60px--><p style="font-size:2rem">我是rem</p><!--rem是相对于根节点，根节点为15px，2rem相当于30px--></div></body></html>
本篇介紹了css樣式的基礎知識，更多相關內容請關注php中文網。
#######以上是一些CSS樣式基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！