首頁 > web前端 > css教學 > 一些CSS樣式基礎知識

一些CSS樣式基礎知識

jacklove
發布: 2018-05-21 11:24:43
原創
1977 人瀏覽過

在學習中會遇到一些css基礎知識,本篇介紹一些CSS樣式基礎知識。

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

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

#外部引入式
主要是使用link標籤或@import標籤從外部引入後綴名為.css的樣式文件,語法分別是:
.css" >

@import url(路徑

.css);

嵌入式

把樣式寫在目前標籤內,語法是:

<style>
   p {color:red;    text-align:center;
 }</style>
登入後複製

內聯式

在所要新增樣式的開始標籤內加入樣式(結束標籤無法新增),語法為:

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

相關推薦:
一些關於JS的基礎問題


#如何用前端js模組化寫require.js


用CSS實作的一張圖完成的按鈕實例

#######

以上是一些CSS樣式基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板