任务6-html3

line-heigth有什么作用?

line-heigth用来控制行与行之间的垂直距离,即行间距。

  • line-heigth有5种方式定义:
1.line-height可以被定义为:body{line-height:normal;}
2.line-height可以被定义为:body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为纯数字, body{line-height:1.2}```
> *[点击深入了解行高](http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html)*
***
# 如何去查CSS属性的兼容性?比如inline-block哪些浏览器支持?
1. 查询css属性请点击-[Can I use](http://caniuse.com/)
2. inline-block浏览器支持情况如下:
![caniuse.png](http://upload-images.jianshu.io/upload_images/2400583-a528f5475e810517.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
# a 标签的href, title, target 是什么? title 和 alt有什么区别?如何新窗口打开链接?
- a标签定义:
  - 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
  - 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。    
- href、title、target?
  - a 元素最重要的属性是 href 属性,它指定链接的目标。 
  - target 属性可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。
  - target 属性规定在何处打开链接文档。
-  title 和 alt有什么区别?
  - > * alt属性:
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
①为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。
②它只能用在img、area和input元素中
③长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
 > * title属性
使用title属性提供非本质的额外信息。title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。
①为设置该属性的元素提供建议性的信息。
①可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。
③值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字。比如Mozilla核心的浏览器只能显示最先的60个字符。

- 如何新窗口打开链接?
``` XXX```
target值应为:_blank.
***
# display: none, visibility: hidden, opacity:0有什么作用?有什么区别?
*参考任磊童鞋的!!!*
- 三者的作用:隐藏元素并不是删除元素,只是隐藏方式不同。
- 三者区别:
  - display:none: 改变布局且隐藏。
  - visibility: hidden:不改变布局且隐藏,不会触发该元素绑定的事件。
  - opacity: 0:不改变布局且隐藏,隐藏方式是改变元素显示的透明度,该元素绑定的事件仍会触发。
***
# 如何去除 a 链接的默认样式?直接在 a 链接父容器添加颜色,能否继承到当前 a 链接上?
- 如何去除a链接默认样式:通过设定text-decoration值为none,即

a{
text-decoration: none;
}```

  • 直接在父容器添加颜色,不能继承到a链接上,需要在样式标签中另外定义a标签的颜色。(我的理解是:定义了父容器的颜色本身应该也改变了a标签的颜色,但由于a标签本身自带属性(未点击为蓝色,点击过为紫色)覆盖了父容器的设定,所以使父容器添加的颜色失效。)

版权声明:本教程版权归本人和饥人谷所有,转载须说明来源!

你可能感兴趣的:(任务6-html3)