-
样式有几种引入方式?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。
**本文版权归本人和饥人谷所有，转载请注明来源**