一些CSS樣式基礎知識

來源:互聯網
上載者:User
在學習中會遇到一些css基礎知識,本篇介紹一些CSS樣式基礎知識。

樣式有幾種引入方式? link 和 @import有什麼區別

樣式有三種引入方式,分別是:

外部引入式
主要是使用link標籤或者@import標籤從外部引入尾碼名為.css的樣式檔案,文法分別是:
<link type=text/css;rel="stylesheet";herf="路徑+###.css">
@import url(路徑+###.css);

嵌入式
把樣式寫在當前<style></style>標籤內,文法是:

<style>   p {color:red;    text-align:center; }</style>

內聯式
在所要添加樣式的開始標籤內添加樣式(不能在結束標籤添加),文法為:
<p style="color:yellow,font-size:20px">我是P標籤內容</p>

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中文網。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.