1.样式有几种引入方式?link和@import有什么区别
有5种写入样式方式:
1.行内式,在html元素标签中使用style属性来规定样式。
<p style="color:red">行内式</p>
2.嵌入式,在head元素中使用style标签,对整个页面中的各个元素进行设置。
<head>
<style type="text/css">
p {
color: red;
}
</style>
</head>
3.链入外部样式,使用link标签来引入一个外部样式表,也就是css文件。
<head>
<meta charset="UTF-8">
<title>饥人谷</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
4.导入式,使用@import导入外部样式表。
<style type="text/css">
@import "demo.css";
</style>
link和@import有什么区别
- 最主要的区别:link是XHTML标签,除了加载css外,还可以定义RSS,定义rel链接属性等,@import属于css范畴,只能加载css。
- 加载顺序的区别:link引入css时,在页面加载时同时加载,@import需要在网页完全载入以后加载。所以说一直有一个观点就是为了提高web网页性能,让用户得到更快的页面显示,不要使用@import而去使用link。
- 兼容性的区别:link是XHTML标签,无兼容性的问题,@import是在CSS2.1提出的,低版本的浏览器不支持。
- 使用dom控制样式的区别:link支持使用javascript控制DOM去改变样式,而@import不支持。
2.文件路径.../main.css、./main.css、main.css有什么区别?
../main.css表示打开上一级目录下的main.css文件。
./main.css和main.css表示的意思是一样,都是打开当前目录下的main.css文件。
3.console.log 是做什么用的?
console.log的功能是在控制台打印出你想要的数据,相对于alert(),它不会打断你javascript程序的执行,是一种更好的javascript程序的调试方式。
关于console.log的使用以及javascript的调试还不是很了解,先分享一个博客Chome开发者工具不完全指南(二、进阶篇),在以后的学习中再慢慢熟悉开发者工具。
4.text-align 有几个值,分别有什么作用?
text-align 属性规定元素中的文本的水平对齐方式。
值 | 描述 |
---|---|
left | 把文本排列在左边 |
right | 把文本排列在右边 |
center | 把文本排列在中间 |
justify | 实现两端对齐本文效果 |
inherit | 规定应该从父元素继承text-align属性的值。 |
默认值 | 如果 direction 属性是 ltr,则默认值是 left;如果 direction 是 rtl,则为 right。 |
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
代码测试如下:
在测试的时候发现
text-align: justify;
出现了问题,直接使用这段代码并没有生效。后来参考了大漠的这篇文章Text-align:Justify和RWD,使用伪类:after
解决了问题。关于这段伪类代码我是这么理解的:使用伪类after创建了一个content属性为空白的内联块元素,由于这个元素的width为100%,它会导致一个换行符出现,这样一来它前面的内容就实现了两端对齐。
这种方法是文章中作者推荐的,更简洁更有语义。
5.px、em、rem分别是什么?有什么区别?如何使用?
- px,是一种像素尺寸,在html可以直接用来指定字体的大小,假设一个字体的高度为14像素,这说明字母的最低部分和最高部分之间有14像素。
- em,类似于百分数,是一个相对度量单位,使用em时,要指定一个比例因子,就像这样:
font-size:1.2em;
这表示该元素的字体大小是它父元素的字体大小的1.2倍。
- rem,是css3中增加的相对度量单位,是相对于根元素(即html元素)计算值的倍数。
注意:浏览器默认的字体大小是16px。
他们的区别在于px的值是固定的,而em、rem的值是相对的。em是相对于父元素,而rem是相对于根元素。
使用方法用一段代码表示:
6.对chrome 审查元素的功能做个简单的截图介绍
7.如下代码,设置 p 为几 rem,让 h1 和 p 的字体大小相等?
浏览器的默认字体大小是16px,所以html的字体大小是16*62.5%=10px,所以p为6rem情况下可以让h1与p的字体大小相等。
本教程版权归饥人谷_任磊和饥人谷所有,转载须说明来源。