2016-10-13任务五 HTML2作业

2016-10-14  本文已影响0人  饥人谷_小霾

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

1.浏览器缺省设置
2.外部样式表
linke rel="stylesheet" type="text/css" href="index.css">
rel属性定义当前文档与被链接文档之间的关系。stylesheet是属性对应的值,意为文档的外部样式表。
type="text/css"告诉浏览器,这段标签内包含css或text,如果浏览器不识别css,会将代码识别成text.
hrefsrc区别
3.内部样式表

<style type ="text/css">
    p{color: red;}
</style>

内部样式表写在html的<head></head>内。只对所在网页有效。
4.内联样式
<p style="color: #00f; font-size:1rem;">段落内容</p>
位于html元素内部,只对当前元素有效。


link@import有什么区别
不同点:
1.link是xhtml标签,除了加载css外,还可以定义rss等;@import属于css范畴,只能加载css。
2.link引用css时,在页面载入时同时加载;@import需要页面完全载入后加载。
3.link是xhtml标签,没有兼容问题;@import是在css2.1提出的,低版本浏览器不支持。
4.link支持使用javascript控制dom去改变样式;而@import不支持。

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

console.log是做什么用的

   调试代码,在控制台中更改变量。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。和alert()不同,alert()函数会阻断js程序的执行,console.log()尽在控制台打印相关信息。

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

text-align:left 表示文本排列到左边
text-align:center 表示本文居中
text-align:right 表示文本排列到右边
text-align:inherit 表示文本继承父元素text-align属性值进行排列
text-align:justify表示文本排列水平对齐

Paste_Image.png

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

px:像素值(chrome里面最小12px,小于12px没有效果)。
em:相对父元素的倍数大小,若父元素未声明,则追溯到上一级父元素。
ps:(任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。)

rem:相对html根节点(默认16px)倍数大小,若根节点未声明,则使用默认值16px。

Paste_Image.png

该例子中,div子元素2em追溯到上一级2em也就是4倍根节点,40px。2rem,相对于根节点2倍大小,并且根节点声明为10px,所以2em表现为20px。
表述有点糙,下次代码会写的更规范些

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

chrome审查元素

1.元素(elements)点击元素,在工具窗口下边,能显示chrome的html,css和dom对象,同时还能编辑这些元素
2.网络请求(network)了解一个网站的数据交互规则,可以看页面向服务器请求了哪些资源。以前通过network,下过视频
3资源(resources)可以调试js文件
4时间轴(timeline)他网页和程序作了一个具体性能分析,从加载资源到解析js脚本,都可以看到所损耗的时间。
5,解析(profiles)显示网页和网络利用程序的执行时间和内存使用情形。
6资源(resources)能对本地缓存中的数据进行确认和编辑
7css样式表
8事件监听器,9dom断点
10好像还是css样式表的一部分,显示的是盒子模型,相关知识可能下节课会学到

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

font-size: 62.5%,意思是默认16px的62.5%,计算下得知是10px,可推算rem=10px。所以设置p为6rem

代码

代码jsbin

上一篇下一篇

猜你喜欢

热点阅读