成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML 1-樣式引入、路徑、尺寸單位

Shihira / 2531人閱讀

摘要：樣式的引入方式樣式的引入有三種方式內(nèi)聯(lián)式，可直接寫(xiě)在標(biāo)簽內(nèi)，一般不建議這種寫(xiě)法。調(diào)試介紹主要用于對(duì)程序調(diào)試，相比于，僅在控制臺(tái)中打印相關(guān)信息，不會(huì)阻斷程序的執(zhí)行。

CSS樣式的引入方式

css樣式的引入有三種方式：
1.css內(nèi)聯(lián)式，可直接寫(xiě)在html標(biāo)簽內(nèi)，一般不建議這種寫(xiě)法。

這里文字是紅色

2.css嵌入式，CSS代碼寫(xiě)在

3.css樣式導(dǎo)入,link和import方式
【1】.link鏈接
【2】.import導(dǎo)入
注：三種css引入方式的優(yōu)先級(jí)，內(nèi)聯(lián)式》嵌入式》導(dǎo)入式。嵌入式>導(dǎo)入式有一個(gè)前提：嵌入式css樣式的位置一定在外部式的后面。一般將代碼寫(xiě)在嵌入式的前面（實(shí)際開(kāi)發(fā)中也是這么寫(xiě)的）。其實(shí)總結(jié)來(lái)說(shuō)，就是就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）。(引入css樣式、A鏈接使用href,引入其他的圖片,js代碼使用src)
link和import方式的區(qū)別：
link和@import的最根本區(qū)別就是，link是一個(gè)html的一個(gè)標(biāo)簽，而@import是css的一個(gè)標(biāo)簽。link屬于XHTML標(biāo)簽（功能不局限于導(dǎo)入CSS），而@import則是CSS提供的一種規(guī)則（CSS2.1提出的規(guī)范，老瀏覽器不兼容）。
【1】@import url（）機(jī)制是不同于link的，link是在加載頁(yè)面前把css加載完畢，所以顯示出來(lái)的頁(yè)面從開(kāi)始就是帶樣式效果的；而@import url（）則是讀取完文件后再加載樣式，所以會(huì)出現(xiàn)一開(kāi)始沒(méi)有css樣式，閃爍一下出現(xiàn)樣式后的頁(yè)面(網(wǎng)速慢的情況下)。
【2】使用javascript控制dom改變樣式的時(shí)候只能使用link標(biāo)簽，@import導(dǎo)入的樣式不受dom控制其樣式。

文件路徑，絕對(duì)路徑和相對(duì)路徑

../main.css 、./main.css、main.css、/main.css有什么區(qū)別

../main.css 相對(duì)路徑，指向當(dāng)前所在目錄的上級(jí)目錄下的main.css文件

./main.css 相對(duì)路徑，指向當(dāng)前所在目錄下的main.css文件

main.css 絕對(duì)路徑，指向當(dāng)前所在目錄下的main.css文件

/main.css 絕對(duì)路徑，指向根目錄下的main.css文件

text-align的作用

text-align有5個(gè)值，left/right/center/justify/inherit，左對(duì)齊/右對(duì)齊/居中對(duì)齊/兩端對(duì)齊/繼承父元素align值。justify兩端對(duì)齊的時(shí)候，每行中的字間距可能不一致。

css尺寸單位，px、em、rem

px像素單位，em、rem相對(duì)單位，em（相對(duì)父元素字體大小的倍數(shù)，父元素不存在時(shí)繼續(xù)向上層找其父元素，如找不到則以瀏覽器默認(rèn)字體16px大小為基準(zhǔn)） ，rem（相對(duì)于HTML根節(jié)點(diǎn)元素字體大小的倍數(shù)）。對(duì)于只需要適配少部分手機(jī)設(shè)備，且分辨率對(duì)頁(yè)面影響不大的，使用px即可。 對(duì)于需要適配各種移動(dòng)設(shè)備，推薦使用rem
1.px：是你屏幕設(shè)備物理上能顯示出的最小的一個(gè)點(diǎn)，這個(gè)點(diǎn)不是固定寬度的，不同設(shè)備上點(diǎn)的長(zhǎng)寬、比例有可能會(huì)不同。假設(shè)：你現(xiàn)在用的顯示器上1px寬=1毫米，但我用的顯示器1px寬=兩毫米，那么你定義一個(gè)div寬度為100px，你顯示器上看這個(gè)div是10厘米，我顯示器上看是20厘米。另外一個(gè)px點(diǎn)的長(zhǎng)寬不一定是1:1的正方形，有的設(shè)備上長(zhǎng)寬比是不一樣的。IE無(wú)法調(diào)整那些使用px作為單位的字體大小。
2.em：所有現(xiàn)代瀏覽器下默認(rèn)字體尺寸是16px。這時(shí)1em=16px。然后你人為的把body里面定義font-size:12px;（把瀏覽器默認(rèn)16px改小了），此刻1em=12px，如果是0.8em則實(shí)際等于12px*0.8。em的用處是你要整個(gè)網(wǎng)頁(yè)字體統(tǒng)一變大變小你只要改body里面font-size的值就行了.



    
      我大小為16px;
      
此段落文字大小為12px(16×0.75);
      我大小是2em，即24px，這里是相對(duì)父級(jí)字號(hào)×2的，而不是相對(duì)body里面的16px

3.rem em相對(duì)父級(jí)，嵌套層多了算字體大小很麻煩。所以有了Rem(IE6-8不支持)，他只相對(duì)html根元素字體尺寸(默認(rèn)還是16px，除非你自己用font-size定義其他大小)，rem沒(méi)有了繼承父級(jí)尺寸這個(gè)關(guān)系。通過(guò)rem既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。比如默認(rèn)的html font-size=16px，那么我想設(shè)置12px 的文字就是：12÷16=0.75（rem）,實(shí)際開(kāi)發(fā)中為了便于計(jì)算，我們改變一下html的默認(rèn)font-size=10px不就好計(jì)算了（10÷16=62.5%）！再將原來(lái)的px數(shù)值除以10，然后換上em作為單位。對(duì)于不支持rem的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫(xiě)一個(gè)絕對(duì)單位PX的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。

html{
    font-size:62.5%; 
}

body{
    font-size:12px;
    font-size:1.2rem ; 
} 
p{
    font-size:14px;
    font-size:1.4rem;
}

如下代碼，設(shè)置 p為幾 rem，讓h1和p的字體大小相等?

  
title

  
title

瀏覽器默認(rèn)字體大小為16px,代碼中html標(biāo)簽樣式font-size:62.5%設(shè)置字體大小為62.5%，即0.625×16=10px,所以當(dāng)前瀏覽器默認(rèn)的字體大小被修改為10px。rem基于HTML根元素字體大小為參考，p標(biāo)簽中的font-size設(shè)置為6rem時(shí)（6rem×10）即為60px，可與h1標(biāo)簽字體大小相同。

chrome 調(diào)試介紹

console.log主要用于對(duì)JavaScript程序調(diào)試，相比于alert()，console.log僅在控制臺(tái)中打印相關(guān)信息，不會(huì)阻斷JavaScript程序的執(zhí)行。console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象。與alert()函數(shù)類似，console.log()也可以接受換行符n以及制表符t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113336.html

相關(guān)文章

  • HTML 1-樣式引入、路徑、尺寸單位

    摘要：樣式的引入方式樣式的引入有三種方式內(nèi)聯(lián)式，可直接寫(xiě)在標(biāo)簽內(nèi)，一般不建議這種寫(xiě)法。調(diào)試介紹主要用于對(duì)程序調(diào)試，相比于，僅在控制臺(tái)中打印相關(guān)信息，不會(huì)阻斷程序的執(zhí)行。 CSS樣式的引入方式 css樣式的引入有三種方式：1.css內(nèi)聯(lián)式，可直接寫(xiě)在html標(biāo)簽內(nèi)，一般不建議這種寫(xiě)法。 這里文字是紅色 2.css嵌入式，CSS代碼寫(xiě)在標(biāo)簽中并放在head標(biāo)簽內(nèi) p{ font-si...

    laoLiueizo 評(píng)論0 收藏0

  • 前端復(fù)習(xí)筆記

    摘要：一基本結(jié)構(gòu)設(shè)置字符編碼集格式網(wǎng)頁(yè)頭部二文本標(biāo)記加粗傾斜下劃線刪除線上標(biāo)下標(biāo)三引用樣式表的方式內(nèi)聯(lián)樣式在元素的開(kāi)始標(biāo)簽里，設(shè)置一個(gè)屬性，并設(shè)置對(duì)應(yīng)的屬性名及屬性值例使用場(chǎng)景里，使用給元素添加樣式內(nèi)部樣式表在標(biāo)簽里加上一對(duì)標(biāo)簽，并且在標(biāo)簽設(shè)置對(duì)一、基本結(jié)構(gòu) //設(shè)置字符編碼集格式 // //網(wǎng)頁(yè)頭部 二、文本標(biāo)記1.加粗 b2...

    yhaolpz 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——CSS

    摘要：父元素沒(méi)有上邊框?yàn)樽釉卦O(shè)置上外邊距時(shí)在中嵌套一個(gè)子元素設(shè)置其尺寸為，并設(shè)置其背景顏色設(shè)置的上外邊距為觀察其結(jié)果。 前端知識(shí)點(diǎn)總結(jié)——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級(jí)聯(lián)樣式表（簡(jiǎn)稱：樣式表） 2.作用 設(shè)置HTML網(wǎng)頁(yè)元素的樣式 3.HTML與CSS的關(guān)系 HTML：負(fù)責(zé)內(nèi)容的展示 CSS：負(fù)責(zé)內(nèi)容（元素）...

    nicercode 評(píng)論0 收藏0

  • PHPWord中文手冊(cè)整理

    摘要：修正中文支持的問(wèn)題，使用前如果發(fā)現(xiàn)亂碼，需要進(jìn)行一些修正解決編碼問(wèn)題，會(huì)對(duì)輸入的文字進(jìn)行編碼轉(zhuǎn)化，如果你使用或者編碼的話就會(huì)出現(xiàn)亂碼，如果你用編碼，就查找類庫(kù)中所有方法中的轉(zhuǎn)碼將其刪除，如果你采用或者編碼，使用進(jìn)行編碼轉(zhuǎn)換。 修正 中文支持的問(wèn)題，使用前如果發(fā)現(xiàn)亂碼，需要進(jìn)行一些修正： 解決編碼問(wèn)題，PHPword?會(huì)對(duì)輸入的文字進(jìn)行utf8_encode編碼轉(zhuǎn)化，如果你使用GBK、...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Shihira

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<