摘要:樣式的引入方式樣式的引入有三種方式內聯式,可直接寫在標簽內,一般不建議這種寫法。調試介紹主要用于對程序調試,相比于,僅在控制臺中打印相關信息,不會阻斷程序的執行。
CSS樣式的引入方式
css樣式的引入有三種方式:
1.css內聯式,可直接寫在html標簽內,一般不建議這種寫法。
這里文字是紅色
2.css嵌入式,CSS代碼寫在
3.css樣式導入,link和import方式
【1】.link鏈接
【2】.import導入
注:三種css引入方式的優先級,內聯式》嵌入式》導入式。嵌入式>導入式有一個前提:嵌入式css樣式的位置一定在外部式的后面。一般將代碼寫在嵌入式的前面(實際開發中也是這么寫的)。其實總結來說,就是就近原則(離被設置元素越近優先級別越高)。(引入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控制其樣式。
../main.css 、./main.css、main.css、/main.css有什么區別
../main.css 相對路徑,指向當前所在目錄的上級目錄下的main.css文件
./main.css 相對路徑,指向當前所在目錄下的main.css文件
main.css 絕對路徑,指向當前所在目錄下的main.css文件
/main.css 絕對路徑,指向根目錄下的main.css文件
text-align有5個值,left/right/center/justify/inherit,左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候,每行中的字間距可能不一致。
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的值就行了.
我大小為16px;此段落文字大小為12px(16×0.75); 我大小是2em,即24px,這里是相對父級字號×2的,而不是相對body里面的16px
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設定的字體大小。
html{ font-size:62.5%; } body{ font-size:12px; font-size:1.2rem ; } p{ font-size:14px; font-size:1.4rem; }
如下代碼,設置 p為幾 rem,讓h1和p的字體大小相等?
title
title
瀏覽器默認字體大小為16px,代碼中html標簽樣式font-size:62.5%設置字體大小為62.5%,即0.625×16=10px,所以當前瀏覽器默認的字體大小被修改為10px。rem基于HTML根元素字體大小為參考,p標簽中的font-size設置為6rem時(6rem×10)即為60px,可與h1標簽字體大小相同。
console.log主要用于對JavaScript程序調試,相比于alert(),console.log僅在控制臺中打印相關信息,不會阻斷JavaScript程序的執行。console.log()可以接受任何字符串、數字和JavaScript對象。與alert()函數類似,console.log()也可以接受換行符n以及制表符t。console.log()語句所打印的調試信息可以在瀏覽器的調試控制臺中看到。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52375.html
摘要:樣式的引入方式樣式的引入有三種方式內聯式,可直接寫在標簽內,一般不建議這種寫法。調試介紹主要用于對程序調試,相比于,僅在控制臺中打印相關信息,不會阻斷程序的執行。 CSS樣式的引入方式 css樣式的引入有三種方式:1.css內聯式,可直接寫在html標簽內,一般不建議這種寫法。 這里文字是紅色 2.css嵌入式,CSS代碼寫在標簽中并放在head標簽內 p{ font-si...
摘要:父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為,并設置其背景顏色設置的上外邊距為觀察其結果。 前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS:Cascading Style Sheets層疊樣式表,級聯樣式表(簡稱:樣式表) 2.作用 設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML:負責內容的展示 CSS:負責內容(元素)...
摘要:修正中文支持的問題,使用前如果發現亂碼,需要進行一些修正解決編碼問題,會對輸入的文字進行編碼轉化,如果你使用或者編碼的話就會出現亂碼,如果你用編碼,就查找類庫中所有方法中的轉碼將其刪除,如果你采用或者編碼,使用進行編碼轉換。 修正 中文支持的問題,使用前如果發現亂碼,需要進行一些修正: 解決編碼問題,PHPword?會對輸入的文字進行utf8_encode編碼轉化,如果你使用GBK、...
閱讀 2404·2021-11-24 09:39
閱讀 3223·2021-10-09 09:53
閱讀 1130·2021-09-22 16:06
閱讀 4441·2021-09-02 10:18
閱讀 800·2021-08-23 09:42
閱讀 1760·2021-08-17 10:11
閱讀 2685·2019-08-30 13:02
閱讀 2120·2019-08-30 12:49