task 5

• 样式有几种引入方式? link 和 @import有什么区别？

1. 外部样式表

<link rel="stylesheet" type="text/css" href="index.css">；
href：链接文件的位置
rel：当前文件与链接文件的关系

2. 内部样式表

    <style type="text/css">
        h1 {
            color: blue;
            font-size: 20px;
        }
    </style>

3. 内联样式表

在想要的改变样式的标签内添加style属性
            <h1 style="color:white;font-size:20px">

4. link和@import的区别
   • link为html标签，@import是css提供的一种方式，link标签还可以对应许多属性，@import只能加载css
   • 加载顺序不同，当一个页面被加载的时候，link引用的css会同时被加载，@improt引用的css会在页面加载完成后加载
   • 兼容性：link标签兼容性优于@import

• 文件路径../main.css 、./main.css、main.css有什么区别?

./main.css与main.css表示的含义相同，表示调用在当前目录中的main.css文件
../main.css表示调用上级目录中的main.css文件

• console.log是做什么用的
  1. 方便你调式javascript使用，你可以看到你在页面中输出的内容,里面的内容非常丰富
  2. console不会打断你页面的操作,console输出内容后你页面还可以正常操作
• text-align有几个值，分别有什么作用

值	描述
left	左边对齐。默认值：由浏览器决定。
right	右边对齐
center	中间对齐
justify	两端对齐
inherit	从父元素继承 text-align 属性的值

text-align 规定文本的水平对齐方式。

• px、em、rem分别是什么？有什么区别？如何使用
  • px：px是Pixel的缩写，单位名称为像素，px相对于显示器屏幕分辨率而言是相对长度单位，，对于浏览器而言为绝对长度单位
  • em 相对长度单位，当前对象内文本的字体尺寸
  • rem 相对长度单位。相对于html的font-size计算值的倍数
  • 补充：任意浏览器的默认字体单位大小为16px（16像素）。所有未经调整的浏览器都符合: 1em=16px
• 对chrome 审查元素的功能做个简单的截图介绍

审查元素.png

• 如下代码，设置 p为几 rem，让h1和p的字体大小相等?

      <h1>饥人谷</h1>
      <p>饥人谷</p>

    <style>
        html {
            font-size: 62.5%;
        }

        p {
            font-size: ?rem;
        }

        h1 {
            font-size: 60px;
        }
    </style>

计算：
任意浏览器的默认字体单位大小为16px，因此html{font-size: 62.5%;}转换为px单位的值为16px*62.5%=10px。
h1和p字体大小相等，则p的字体大小为6rem

• 代码
  1. 设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
  2. 设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高

task5代码：task5

本文版权归作者和饥人谷所有，转载请注明来源