html-2

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

答:在html文件中,css样式一共有三种引入方式。

  1. 外部样式表,有两种方法:
    a. 使用<b>link</b>引入(最常用,推荐使用);b.使用@import引入。
    举例说明:

link 方式:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
@import方式:
<head> <style type="text/css" media="screen"> @import url("mystyle.css"); </style> <head>

  • 内部样式表,放入<b><style></b>标签内部;
    举例说明:

<head> <style> h1 {color:red;} p {margin-top:20px;} body {background-image:url("images/123.gif");} </style> </head>

  • 内嵌样式表,直接放入html元素标签内部;
    举例说明:

<body> <p style="color:red; font-size:18px">good</p> </body>

link和@import的区别?
答:

  1. 从属不同:link是HTML标签,除了加载CSS外,还可以定义RSS,定义rel连接属性等其他事务;@import属于CSS范畴,只能加载CSS。
  • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。所以某些网页在打开的时候只出现文字,没有排版和样式,而等@import加载以后才会重新渲染。
  • link是HTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。@import只有在IE5以上的才能识别,而link标签无此问题。
  • link支持使用Javascript控制DOM去改变样式;而@import不支持。
  • ink可以放在页面任何位置,一般情况下放在<head>..</head>标签中 ;但是@import必须放在<style>@import url(index2.css);</style>标签内。
二,文件路径…/main.css 、./main.css、main.css、/main.css有什么区别 ?

答:

  • …/main.CSS是上级目录中的main.CSS文件
  • ./main.CSS与main.CSS是当前目录中的main.CSS文件
  • /main.css:当前文件的根目录下的文件main.css
三,console.log是做什么用的 ?

答:用来分析和调试的一个JS函数,在浏览器的开发工具控制台中使用,改变参数值,调试页面。

四,text-align有几个值,分别有什么作用?写截图说明区别
  • text-align:center/文本水平居中对齐
  • text-align:right/文本右对齐
  • text-align:left/文本左对齐
  • text-align:justify/文本两端对齐
  • text-align:inherit/从父元素继承text-align属性
    截图说明:
文本对齐属性
五,px、em、rem分别是什么?有什么区别?如何使用 ?
  • px为像素,相对长度单位,像素是固定大小的单元,一个像素等于电脑屏幕上的一个点。
  • em是相对大小单位,em是相对于父元素的属性而计算的.如2em,则是父级元素的2倍大小。
  • rem是相对大小单位,和根元素的尺寸大小一致,例如2rem,则是根元素尺寸的2倍大小。
    参考详细资料
六,对chrome 审查元素的功能做个简单的截图介绍
chrome审查元素
  • Elements:页面元素,可以进行编辑,保存后实时查看页面效果;
  • Console:此功能是模拟js控制台,直接写代码,查看结果;
  • Sources:查看加载本页面所调用的资源,如js,css,php等;
  • Network: 查看js模拟的http请求;
  • Timeline:查看页面性能,页面渲染速度的;
  • Profile:主要测试加载文件速度参考;
  • Resources:查看加载页面所用的资源,链接的数据库,域名下保存的cookie信息等;
  • styles:可以查看页面样式。
    详细资料1 OR 详细资料2
七,如下代码,设置 p为几 rem,让h1和p的字体大小相等?

<h1>饥人谷</h1> <p>饥人谷</p> <style> html{ font-size: 62.5%; } p{ font-size: ?rem; } h1{ font-size: 60px; } </style>

答:设置为6rem。
计算方法:浏览器默认大小为16px,则html大小=16 x 62.5%=10px。h1=60px。rem 是相对于跟节点大小的倍数。即p=6 x 10px=60px。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 样式有几种引入方式? 外部样式表:引用外部样式(方便重复使用) 内部样式表:在 中写在 标签内 内联样式表:直接写...
    盖被吹空调阅读 258评论 1 0
  • 样式有几种引入方式? link和 @import有什么区别? 答:引入样式的方法有外部样式、内部样式、内联样式。 ...
    浩天天阅读 229评论 1 0
  • 课程任务 1.样式有几种引入方式? link 和 @import有什么区别? 答: 外部样式表:将css的样式代码...
    呦泥酷阅读 215评论 0 0
  • 1.样式有几种引入方式? link和 @import有什么区别? 1.内联式就是把css代码直接写在现有的HTML...
    _Josh阅读 505评论 0 0