-
樣式有幾種引入方式?link和@import有什么區別？
三種。
1.內部樣式。
在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.內嵌樣式
<p style="color: blue;">饑人谷</p>
-
文件路徑../main.css、./main.css、main.css有什么區別？
../main.css中的main.css文件是在當前目錄的上一級目錄中找到main.css文件進行引用。
./main.css和main.css都是在當前目錄中找到main.css文件進行引用。
-
console.log是做什么用的？
console.log()用于在控制臺輸出普通信息。可以用于調試JavaScript代碼。我們在編寫程序實現某些功能時需要調試一下看運行結果是否符合預期，用console.log()可以在不影響頁面運行的情況下，在控制臺輸出結果，調試代碼，提高工作效率。
-
text-align有幾個值，分別有什么作用?
text-align有5個可能的值。
text-align: left 設置文本左對齊。
text-align: right 設置文本右對齊。
text-align: center 設置文本居中。
text-align: justify 當文本字數很多，超過一行時，讓文本兩端對齊。
text-align: inherit 規定從父元素繼承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>
運行結果如下圖：
-
px、em、rem分別是什么？有什么區別？如何使用?
px是表示像素。相對長度單位，是相對于顯示屏屏幕分辨率而言的。chrome瀏覽器最小字體像素是12px,小于12px字體大小沒有變化。
em是相對于父元素的倍數。1em表示是父元素字體的1倍大小，2em是2倍大小。
rem是相對于根元素<html>的倍數。根元素文本大小不設置的時候默認為16px。1rem是根元素字體的1倍大小，2rem是2倍大小。
這三個的區別在于，對于同一分辨率的顯示屏來說，px是固定的,16px在不同的html文件中代表同樣的文字大小。但是em、rem是有對比元素的。1.2em的文本大小隨著它的父元素文本大小而改變，1.2rem的文本大小隨著它的根元素文本大小而改變。在同一個html文件中，設置成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>
運行結果如下：
-
對chrome 審查元素的功能做個簡單的截圖介紹
-
1.如下代碼，設置 p為幾 rem，讓h1和p的字體大小相等?
<h1>饑人谷</h1>
<p>饑人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
應該設置為6rem。
瀏覽器默認字體大小是16px,16px*62.5%是10px,根節點<html>字體大小是10px。h1的字體大小60px，是10px的6倍，p要和h1大小相等，需要設置為6rem。
**本文版權歸本人和饑人谷所有，轉載請注明來源**