一.样式有几种引入方式? link 和 @import有什么区别?
样式引入方式共三种:
- 外部样式表:
<link rel="stylesheet" type="text/css" href="index.css">; - 内部样式表:
<style type="text/css">
.inside {
background-color: #0f0;
font-size: 2em;
}
</style> -
内联样式表:
<p style="font-size:3rem; background-color:#00f"></p>
如图,下面分别三种引入方式实例显示:
样式的三种引入方式
link 和 @import有什么区别:
link:它是html的标签,除了调用.css外还可以调用.js等外部数据,它引入的内容复用性好,缺点是调用的代码数据较庞大时浏览器加载时间会长一点,所以适合用在多个元素共用同一个样式表时使用;
调用方式:<link rel="stylesheet" type="text/css" href="???.css">
@import:它放置在内部样式表中,属于css的标签,只能调用.css文件,相对link调用少一次网络请求,响应较快。
调用方式:@import url(???.css)
二.文件路径../main.css 、./main.css、main.css有什么区别
.css文件为外部样式文件,放在不同文件目录有不同的路径调用方式
- "../main.css":为调用html文件上一目录的main.css样式文件;
- "./main.css"和"main.css":都为调用html文件当前目录的main.css样式文件,后者省略"./";
三. console.log是做什么用的
用于调试页面程序,可以在审查元素调试时看到你在页面中输出的内容。
它的作用类似alert(),但是相对于alert()他的优点是:
- 它能看到结构化的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的全部内容,
- console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。
四.text-align有几个值,分别有什么作用
共有4个值:left(靠左)、center(居中)、right(靠右)、justify(两端对齐,窗口变小同样自动换行)
下面为text-align属性运行效果显示:
text-align演示
五 .px、em、rem分别是什么?有什么区别?如何使用
px、em、rem都为font-size的值的单位:
px:直接单位(像素),相对于屏幕分辨率来计算其字体所占像素值;
em:相对单位,其值相对其父元素来确认每em占的像素值,父元素未声明则继续往上一级父元素确认,若任然未声明则依次确认直到根节点(html);
rem:相对单位,其值相对根节点(html)来确认每rem占的像素值,若根节点未明确声明则默认为1rem=16px;
六.对chrome审查元素的功能做个简单的截图介绍
chrome审查元素七.如下代码,设置 p为几 rem,让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
计算结果为6rem:计算方式,html默认字体大小为16px,内部样式表再将html设置覆盖为16*62.5%=10px=1rem,那么P的字体大小应设置为6rem=60px;
如图:实际运行也为6rem;
fifth question.png
八.代码
- 设置body的字体为微软雅黑,字号16px, 行高1.5倍,字体颜色 #333
- 设置段落颜色#000, 首行缩进两个字体宽度,1.5倍行高#
如图,代码运行结果如下:
代码question
声明:本博客版权归兰文聪和饥人谷所有,转载需说明来源!
网友评论