-
樣式有幾種引入方式?link和@import有什么區(qū)別？
三種。
1.內(nèi)部樣式。
在html文檔中加入<style type="text/css"></style>,可以加載在<head>標簽之間，也可以加載在<body>標簽之間。其中，在html5中，type="text/css"也可以省略。
<head>
<style>
p {
color:blue;
}
</style>
</head>
<body>
<p>饑人谷</p>
</body>
2.引用外部樣式
外部引用分為<link>和@import兩種。
<link>是HTML標簽，<link rel="stylesheet" type="text/css" href="main.css">只能放在HTML文件中使用。
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
@import是css樣式，可以放在<style>標簽中引用外部樣式，也可以直接放在css文件中，寫成@import url(樣式地址)。
<head>
<style>
@import url(main.css);
p {
color:blue;
}
</style>
</head>
<body>
<p>饑人谷</p>
</body>
main.css文件中:
@import url(main1.css);
p {
color:blue;
}
3.內(nèi)嵌樣式
<p style="color: blue;">饑人谷</p>
-
文件路徑../main.css、./main.css、main.css有什么區(qū)別？
../main.css中的main.css文件是在當前目錄的上一級目錄中找到main.css文件進行引用。
./main.css和main.css都是在當前目錄中找到main.css文件進行引用。
-
console.log是做什么用的？
console.log()用于在控制臺輸出普通信息?？梢杂糜谡{(diào)試JavaScript代碼。我們在編寫程序?qū)崿F(xiàn)某些功能時需要調(diào)試一下看運行結(jié)果是否符合預期，用console.log()可以在不影響頁面運行的情況下，在控制臺輸出結(jié)果，調(diào)試代碼，提高工作效率。
-
text-align有幾個值，分別有什么作用?
text-align有5個可能的值。
text-align: left 設(shè)置文本左對齊。
text-align: right 設(shè)置文本右對齊。
text-align: center 設(shè)置文本居中。
text-align: justify 當文本字數(shù)很多，超過一行時，讓文本兩端對齊。
text-align: inherit 規(guī)定從父元素繼承text-align屬性的值。
示例如下，
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
background-color: #ccc;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<div style="text-align: center">
<p style="text-align: left;">饑人谷</p>
<p style="text-align: right;">饑人谷</p>
<p style="text-align: center;">饑人谷</p>
<p style="text-align: justify;">饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷饑人谷</p>
<p style="text-align: inherit;">饑人谷</p>
</div>
</body>
</html>
運行結(jié)果如下圖：
-
px、em、rem分別是什么？有什么區(qū)別？如何使用?
px是表示像素。相對長度單位，是相對于顯示屏屏幕分辨率而言的。chrome瀏覽器最小字體像素是12px,小于12px字體大小沒有變化。
em是相對于父元素的倍數(shù)。1em表示是父元素字體的1倍大小，2em是2倍大小。
rem是相對于根元素<html>的倍數(shù)。根元素文本大小不設(shè)置的時候默認為16px。1rem是根元素字體的1倍大小，2rem是2倍大小。
這三個的區(qū)別在于，對于同一分辨率的顯示屏來說，px是固定的,16px在不同的html文件中代表同樣的文字大小。但是em、rem是有對比元素的。1.2em的文本大小隨著它的父元素文本大小而改變，1.2rem的文本大小隨著它的根元素文本大小而改變。在同一個html文件中，設(shè)置成1.2em的文本大小都是一樣的，而1.2em卻可能有很大不同。
示例如下：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
background-color: #ccc;
}
</style>
</head>
<body>
<div style="font-size: 2em;">
饑人谷
<p style="font-size: 2em;">饑人谷</p>
<p style="font-size: 2rem;">饑人谷</p>
<p style="font-size: 12px;">饑人谷</p>
</div>
</body>
</html>
運行結(jié)果如下：
-
對chrome 審查元素的功能做個簡單的截圖介紹
-
1.如下代碼，設(shè)置 p為幾 rem，讓h1和p的字體大小相等?
<h1>饑人谷</h1>
<p>饑人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
應該設(shè)置為6rem。
瀏覽器默認字體大小是16px,16px*62.5%是10px,根節(jié)點<html>字體大小是10px。h1的字體大小60px，是10px的6倍，p要和h1大小相等，需要設(shè)置為6rem。
**本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源**