任务五-HTML2
1.样式有几种引入方式? link 和 @import 有什么区别?
样式的写法有五种,其中一种是浏览器的缺省设置也就是默认样式。其他四种引入方式分别为:link(链入外部样式表),@import (导入外部样式表),内置样式表以及内联样式表。
① link(链入外部样式表)
在 <head>
部分加入 <link type="text/css" rel="stylesheet" href="./index.css">
,引入外部的 CSS 文件。
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用 <link>
标记链接到这个样式表文件,这个 <link>
标记必须放到页面的 <head>
区内。
这个例子表示浏览器从 index.css 文件中以文档格式读出定义的样式表,其中 type="text/css"
表示这个信息的类型是 "text/css" 。换句话说,这是一个 CSS 样式表。在 HTML5 中,不再需要这个属性(可选)。rel="stylesheet"
此属性指定了 HTML 文件与所链接的文件之间的关系。我们要链接到一个样式表,这里使用值 "stylesheet"。href="index.css"
是文件所在的位置。
这里需要注意的细节就是 href="./index.css"
,"./"
表示当前路径下的 index.css,这是可以不加的,而拓展开来,若是这种情况 href="../index.css"
则就代表为上一级的目录下的文件。
② @import (导入外部样式表)
导入外部样式表是指在内部样式表的 <style>
里导入一个外部样式表,导入时用 @import,例:<style> @import url(index.css); </style>
③ 内置样式表
在<head>
部分加入<style type="text/css"> p{color:red;} </style>
,也就是在 <head>
中的 <style>
里添加相关的样式声明,这种方法适用于加入的样式不是通用的,只适用于该文件,其优势相对来说在于减少一次加载即网络请求。
④内联样式表
直接在页面的标签里加<p style="border: 1px solid #fff; border-redius: 4px;">段落</p>
,该方法使得样式的属性内容直接跟在将要修饰的文字标记里。而其中的 <style>
只是标签中的一个属性。
link 和 @import 有什么区别?
① link 属于 XHTML 标签,而 @import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外,还可以做很多其它的事情,比如定义 RSS,定义 rel 连接属性,等,@import 就只能加载 CSS 了。
② link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。
③ link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。
④ link是 XHTML 标签,无兼容问题;@import 是在 CSS2.1提出的,低版本的浏览器不支持。
2.文件路径 ../main.css、./main.css、main.css 有什么区别?
./main.css 中的 "./"
表示当前路径下的 main.css,这是可以不加的,也就是说 ./main.css = main.css 。而拓展开来,若是这种情况 ../index.css 则就代表为上一级的目录下的文件。
3. console.log 是做什么用的?
console.log 可以方便你调式 javascript,另你可以看到你在页面中输出的内容。
我们在编辑器中输入
<script>
console.log(100);
console.log(101);
console.log(102);
var obj = {
name: "hunger",
age: 100
};
console.log(obj);```
在控制台的审查元素中我们就可以看到下面的信息:
![审查元素.png](https://img.haomeiwen.com/i2339562/fe9b0818f5e0dbd3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这使得我们可以很清晰的看到我们在页面中输出的内容,方便调试。
console 不会像 alert 一样打断你页面的操作,而且 alert 不会输出你的内容,不方便调试。
#####4. text-align 有几个值,分别有什么作用?
text-align 有五个值,分别是 `text-align:center`,`text-align:left`,`text-align:right`,`text-align:justify`,`text-align:inherit`
text-align 属性规定元素中的文本的水平对齐方式。
`text-align:center` 把文本排列到中间,`text-align:left` 把文本排列到左边。默认值:由浏览器决定,`text-align:right` 把文本排列到右边,`text-align:justify` 实现两端对齐文本效果,`text-align:inherit` 规定应该从父元素继承 text-align 属性的值。
#####5. px、em、rem 分别是什么?有什么区别?如何使用?
① px 像素(Pixel),用 PX 设置字体大小,像素 px 是相对于显示器屏幕分辨率而言的。
② em 是相对长度单位,相当于当前对象内文本字体尺寸,如果当前对行内文本的的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸来设置。
③ rem 使用时仍然是相对大小,但相对的只是 HTML 根元素,通过它就可以只修改根元素来成比例地修改调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
他们的区别在于:
① em 和 rem 的值不是固定的,px 是相对固定的。
② em 会继承父级元素的字体大小,但 rem 不会继承父级元素的字体大小,只相对 HTML 根元素。
我们可以看下面这个例子:
<html>
<head>
<meta charset="utf-8" />
<style>
html {
font-size: 30px;
}
</style>
</head>
<body>
<h1>这里是标题<h1>
<div class="mydiv" style="font-size: 2em;">我是div
<p style="font-size: 2em;">我是子元素em</p>
<p style="font-size: 2rem;">我是子元素rem</p>
<p style="font-size: 12px;">我是子元素px</p>
</div>
</body>
</html>```
从这个缩略的代码区块我们可以看到我们人为设置的 html 根元素字体大小是 30px,其中 h1 的默认样式是 2em,所以它的值为 2 X 30px=60px,而 div 中的 em 因为 em 会继承父级,而上面有 h1,所以“我是子元素em” 的字体大小 60 X 2=120px。div 中的 rem 只会继承根目录的字体大小,所以“我是子元素rem”的字体大小为 30 X 2=60px,最后一个“我是子元素px”的字体大小为12px。
6.对chrome 审查元素的功能做个简单的截图介绍
chrome 审查元素.jpg7.如下代码,设置 p 为几 rem,让 h1 和 p 的字体大小相等?
题目.png答案为6rem。因为浏览器默认为 1em=16px 。而这里 html 设置为
font-size: 62.5%;
,所以 em 的值变为 16*62.5%=10px。所以 p 中 ?=6 即可让 h1 和 p的字体大小相等。