CSS的简单功能2

1.line-height有什么作用?

line-height指行高:文本文字所占用的空间,是本身的倍数。
例:
p{
line-height:2
}
指文本上下端的距离是文字高度的2倍。
<li>具体来说,行高指的是文本行的基线间的距离。而基线(Base line),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下 端沿,同时还有文字的顶线(Top line)、中线(Middle line)和底线(Bottom line),用以确定文字行的位置,如下图所示。

文字的基线
行距与行高

---**

2.Can i use的用处

"Caniuse"是一个可以快速查询浏览器兼容性的网站。


Caniuse首页

例如,查询“inline-block”有哪些浏览器可以兼容。


inline-block兼容性查询

---**

3.a 标签的href, title, target 是什么? title 和 alt有什么区别?如何新窗口打开链接?

href:
<a href=""></a>
<a> 标签的 href 属性用于指定超链接目标的 URL,链接地址输入“#”则表示本页面。

<li>href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了<a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。
<li>href的使用方法分为下列几种方式:

一、绝对跳转
<a href="http://www.baidu.com/">百度</a>

二、相对跳转
有如下方式,需要了解(以下的例子中,分别以你的例子和带.html尾缀进行演示):

  1. 本目录的使用(与本文件在相同的文件夹下):
    <a href="123456">
    <a href="123456.html">
  2. 本目录下的子文件夹(设文件夹名为newdoc)的使用:
    <a href="newdoc/123456">
    <a href="newdoc/123456.html">
  3. 本目录下的子文件夹下的子文件夹(设文件夹名为newdoc2)的使用(如果更多层,则依此类推):
    <a href="newdoc/newdoc2/123456">
    <a href="newdoc/newdoc2/123456.html">
  4. 本目录上一层父目录的使用:
    <a href="../123456">
    <a href="../123456.html">
  5. 本目录上两层父目录的使用(如果更多层,则依此类推):
    <a href="../../123456">
    <a href="../../123456.html">
  6. 本目录上一层父目录下一个名为new文件夹下的使用(也就是和本文件所在的文件夹在相同目录下的那个new文件夹):
    <a href="../new/123456">
    <a href="../new/123456.html">
    三、锚点
    1、同页面跳转:
    <a href="#a">点击我就会跳到第一段</a>
    <a id="a">我是第一段</a>
    在""中添加“#”,指的是本页面。
    2、不同页面跳转:
    a.html的内容:
    <a href="b.html#q1">问题一?</a>
    b.html的内容
    <a id="q1">问题一的解答</a>
    注意:
    1.确定在同一个页面打开 如果
    <a href="#q1">问题一?</a>
    <a href="#q2">问题二?</a>
    如果要打开一个新页面,要加 target="_blank"
    如下:
    <a href="#q1" target="_blank" >问题一?</a>
    <a href="#q2" target="_blank" >问题二?</a>
    2.只要是跳到同一个地方,锚点名称必须是一样的。
    3.添加锚点,起始位置和结束位置必须都是用<a></a>标记来写的,前面是用href="#锚点名",后面是id="锚点名";

title:
使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。
<li>例:
<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>
如果希望注释多行显示,可以使用
作为换行符。
<li>例:
<a href="http://www.baidu.cn" title = "百度的 中文站点">百度网站</a>

还有一个属性“alt",这个属性的作用是图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,说明图片是什么,在SEO方面对于这个属性应用的较多。

target:

target 属性规定在何处打开链接文档:
<a href="www.baidu.com" traget=_blank>百度</a>

不同属性值所代表的功能

4.display: none , visibility: hidden, opacity:0有什么作用?有什么区别?

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

<li>display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

<li>visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

<li>例:
<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>``</body>
</html>

效果图

<li>opacity:0值得是页面透明度, “0”即完全透明。

小结;
1.opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件。2.visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件。
3.display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。


5.如何去除 a 链接的默认样式?直接在 a 链接父容器添加颜色,能否继承到当前 a 链接上?

text-decoration:none;去除下划线
color: 更改默认颜色
伪类选择器:
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} /
已访问的链接 /
a:hover {color: #FF00FF} /
当有鼠标悬停在链接上 /
a:active {color: #0000FF} /
被选择的链接 */
<li>无法继承,因为浏览器本身对 a 标签有默认样式,是直接对 a 标签指定的,从父级 div 继承下来的优先级没有选择器高,所以覆盖不到。


本教程归本人和饥人谷所有,转载需说明来源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,753评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,668评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,090评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,010评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,054评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,806评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,484评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,380评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,873评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,838评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,499评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3 374
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2 356

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,673评论 18 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,558评论 32 459
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,167评论 0 11
  • 感赏儿子早上快速起床,收拾东西上学,自觉地把手机放在家里。 感赏儿子中午即使下着大雨,也还是按时感到物理班上课,上...
    玲03阅读 107评论 0 2