当前位置: 首页 > Web前端 > HTML

HTML 2-行高、a标签

时间:2023-04-02 18:28:03 HTML

line-heightline-height设置文本的行高,行高即文本行基线之前的距离,行高减去字体大小就等于行间距从上到下四条线分别是顶线、中线、基线、底线,很像学英语字母时的四线三格,vertical-align属性中有top、middle、baseline、bottom,就是和这四条线相关。注意,基线不是最下面的线,最下面的是底线。行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离。行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离。如下图:line-height:number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。line-height:px固定值 设置固定的行间距。line-height:% 基于当前字体尺寸的百分比行间距。line-height:inherit 规定应该从父元素继承line-height 属性的值。(任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。)line-height等于包裹文字的元素本身的高度时,文字垂直居中。关于CSS属性的兼容性CSS属性的兼容性可在 caniuse 中搜索属性名a标签的href, title, target 属性href属性:创建指向另一个文档的链接,为name时创建文档内的锚点。titel属性:鼠标悬停在链接时显示额外信息。titel与alt的区别:使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明,它只能用在img、area和input元素中,是用来替代图像而不是提供额外说明文字。title属性是提供非本质的额外信息,比如在图像可见时对图像的描述(鼠标放在图片时即会显示)。target属性:规定在何处打开目标 URL。仅在 href 属性存在时使用。target属性值等于_blank时,链接在新窗口中打开:<a href="http://www.youku.com" target="_blank">优酷</a>a标签设置伪类按L-V-H-A顺序,伪类设置在a标签上所有浏览器都支持,设置在其他div元素上只有IE8以上浏览器支持a:link {color:#FF0000;} / 未访问的链接 /a:visited {color:#00FF00;} / 已访问的链接 /a:hover {color:#FF00FF;} / 鼠标划过链接 /a:active {color:#0000FF;} / 已选中的链接 /a标签设置锚点:<a href="#">文字</a> href为#时表示,链接的是当前页面设置锚点用id<p id="ccc">段落</p><a href="#ccc"></a> href为#ccc时,链接的是对应的锚点。display: none , visibility: hidden, opacity:0 的作用和区别display:block/inline/inline-block/none/table-cell/fixdisplay:none; 元素被设置成不显示,实际渲染时该元素脱离文档流,但dom树中该元素仍然存在visibility:hidden; 元素被设置成隐藏,实际渲染时该元素仍然在文档流里面(仍然占空间),dom树中也存在,相当于元素变透明了。 opacity:0;使元素透明度为0就好像消失一样,但是所占据的空间还在,不会改变页面布局a链接的默认样式设置a标签的颜色不会继承父元素的颜色样式,即a标签自带的颜色属性不被父元素颜色属性影响。但a标签字体大小属性受父元素影响。a标签去掉下划线,增加颜色a{ text-decoration: none; //去除a标签默认的下划线样式 color: red; transition:color 0.3s; //a标签的颜色有变化时,使用渐变效果,效果变化时间0.3s}