摘要:属性接受一个正长度值或负长度值。在设置字体大小时,的值会相对于父元素的字体大小改变。因此的默认尺寸是像素。关键字为字体指定了级加粗度。数字等价于,而等价于。与此相反,关键词会导致浏览器将加粗度下移而不是上移。
字间隔
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。
为 word-spacing 设置一个负值,会把它拉近:
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread"> This is a paragraph. The spaces between words will be increased. p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. p>
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
实例
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
设置链接的样式
DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
style>
head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接a>b>p>
<p><b>注释:b>为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后!!p>
<p><b>注释:b>为了使定义生效,a:active 必须位于 a:hover 之后!!p>
body>
html>
表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框:
table, th, td { border: 1px solid blue; }
例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:
a:link img {border-style: outset;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:
margin: top right bottom left
另外,还可以为 margin 设置一个百分比数值:
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
<html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } style> head> <body> <p class="one">一些文本。p> <p class="two">更多的文本。p> body> html>
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1258.html
摘要:最后,将动画函数选为。的表现状态就是起止过程比较缓慢,中间过渡迅速。褪色效果首先,添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长,采用的动画效果。 CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。showImg(https://segmentfa...
摘要:最后,将动画函数选为。的表现状态就是起止过程比较缓慢,中间过渡迅速。褪色效果首先,添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长,采用的动画效果。 CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。showImg(https://segmentfa...
摘要:选择器选择器是什么的选择器是用于定位页面中的元素,其用法最初设计是源于的选择其用法,但是的选择器进行了扩展,远比的选择器更加强大。 选择器 选择器是什么 jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是源于CSS的选择其用法,但是jQuery的选择器进行了扩展,远比CSS的选择器更加强大。 基本选择器 基本选择去具有以下几种:1.ID选择器 2.元素选择器3...
摘要:选择器选择器是什么的选择器是用于定位页面中的元素,其用法最初设计是源于的选择其用法,但是的选择器进行了扩展,远比的选择器更加强大。 选择器 选择器是什么 jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是源于CSS的选择其用法,但是jQuery的选择器进行了扩展,远比CSS的选择器更加强大。 基本选择器 基本选择去具有以下几种:1.ID选择器 2.元素选择器3...
摘要:建议不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。评分父级也一起浮动原理所有代码一起浮动,就变成了一个整体优点没有优点缺点会产生新的浮动问题。 这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类:after和zoom ? 1 2 3 4 5 6 7 8 ...
阅读 3316·2021-11-16 11:45
阅读 4385·2021-09-22 15:38
阅读 2841·2021-09-22 15:26
阅读 3347·2021-09-01 10:48
阅读 826·2019-08-30 15:56
阅读 714·2019-08-29 13:58
阅读 1486·2019-08-28 18:00
阅读 2160·2019-08-27 10:53