任务5-HTML2

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

1.样式有三种引入方式,分别是

  • 外部样式表<link rel="stylesheet" type="text/css" href="index.css">
  • 内部样式表(位于标签内部)
    <style type="text/css">
       p{color:red;}
    </style>
  • 内联样式(在HTML元素内部)
    <p style="color:red;font-size:15px;">这是一个段落</p>

2.link和 @import有的区别:

  • link属于HTML标签,@import是css提供的一种引入方式;
  • 加载顺序不同,link引入的css在页面被加载时会同时加载,而@import需要等到页面都加载完全后才加载,因此网速慢的时候容易看到没有css样式的页面;
  • link引入的css兼容性更好,@import是在CSS2.1提出的,低版本的浏览器不支持;

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

  • ../main.css指的是上一级目录下的文件;
  • ./main.css;main.css;/main.css都是指当前目录下面的文件;

三、console.log是做什么用的?

  • 调试JavaScript用的。类似于alert,不过不会弹出弹窗打断操作。

四、text-align有几个值,分别有什么作用?写截图说明区别

1.text-align是设置文本得对其方式的,常用的值有4个;

  • text-align:left是文本左对齐;
  • text-align:center是文本居中;
  • text-align:right是文本右对齐;
  • text-align:justify是文本左右两端对齐;

2.截图说明:

演示代码
对应文本效果

五、px、em、rem分别是什么?有什么区别?如何使用?

1.px像素是相对于显示器分辨屏幕而言的。可以设置多少像素大小来适应网页制作的需要,一般用作PC端固定布局。
2.em是根据父元素字体大小的属性来计算的,如果设置父元素的字体大小为16px;子元素字体大小为font-size:1.5em,那么该子元素字体换算成像素就是24px。
3.rem是css3新增的一个相对单位。rem得大小是根据HTML根元素大小来设定的。计算方法跟em类似,而且后两种单位表达方式多用于移动端布局。

六、对chrome 审查元素的功能做个简单的截图介绍

审查元素功能

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

Paste_Image.png
  • 浏览器默认的字体大小为16px,那么HTML的字体大小应该为16px×62.5%=10px;
  • rem的大小是根据HTML跟元素字体大小来设定的,因此p{font-size:6rem};
本教程版权归作者和饥人谷所有,转载须说明来源!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 课程目标 掌握样式的几种引入方式能使用Chrome开发工具进行基本页面调试熟悉常见文本样式熟悉单位的使用 课程建议...
    饥人谷_江君阅读 3,265评论 0 0
  • 1.样式有几种引入方式? link 和 @import有什么区别? ①css的引入一般有3种,分别为:(1)外部资...
    freddy阅读 1,738评论 0 0
  • 1. 样式有几种引入方式? link 和 @import有什么区别? 外部样式表:指在html文件的head标签...
    小木子2016阅读 2,463评论 0 0
  • 样式有几种引入方式?link和@import有什么区别? 三种。1.内部样式。在html文档中加入 ,可以加载在...
    墨月千楼阅读 1,625评论 0 0

友情链接更多精彩内容