美文网首页
CSS的简单功能2

CSS的简单功能2

作者: 26d608950683 | 来源:发表于2016-07-12 17:33 被阅读0次

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 继承下来的优先级没有选择器高,所以覆盖不到。


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

相关文章

  • CSS的简单功能2

    1.line-height有什么作用? line-height指行高:文本文字所占用的空间,是本身的倍数。例:p{...

  • CSS的简单功能3

    1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...

  • 只使用一个块级元素绘制各种图形

    本文旨在介绍制作一些常用的图标图形,拓展大家对CSS的认知,不要仅限于在定位子等简单功能上,觉得css简单的人,大...

  • CSS绘制图形

    对CSS了解越多,越觉得CSS能做很多有趣的事情。今天主要整理CSS的绘图功能。 一、绘制一个简单三角形 首先我们...

  • CSS基础知识

    CSS的推荐工具 LESS CSS一种简化、功能更多的 CSS 语言 SASS一种简化、功能更多的 CSS 语言(...

  • 前端Day6

    CSS语法 1.格式: 选择器 { 样式1;样式2;} 2.CSS简单属性 width:宽度,单位px; heig...

  • css 实现矩形四个边角加粗

    1、工具/原料 html css 2、具体实现 html代码 css代码 原理很简单, 只要弄清position:...

  • React Native 基础组件之 StyleSheet

    在 React Native 中,StyleSheet 组件是实现了类似 Web 中 CSS 样式表的功能。简单的...

  • CSS基础入门(第四天)

    一、学习计划: 1.CSS的定义和HTML的关系 2.如何编写CSS 3.CSS语法和简单属性 4.CSS选择器 ...

  • 1 CSS3 基础认知、选择器

    1、CSS3基础认知: (1).CSS3是在CSS2基础上新增了很多强大的功能,其拆分了很多"独立模块",迭代过程...

网友评论

      本文标题:CSS的简单功能2

      本文链接:https://www.haomeiwen.com/subject/wstsjttx.html