资讯专栏INFORMATION COLUMN

DIV+CSS初学随记

kgbook / 1625人阅读

摘要:属性接受一个正长度值或负长度值。在设置字体大小时,的值会相对于父元素的字体大小改变。因此的默认尺寸是像素。关键字为字体指定了级加粗度。数字等价于,而等价于。与此相反,关键词会导致浏览器将加粗度下移而不是上移。

字间隔
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初学者的悬停过渡动画三部曲

    摘要:最后,将动画函数选为。的表现状态就是起止过程比较缓慢,中间过渡迅速。褪色效果首先,添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长,采用的动画效果。 CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。showImg(https://segmentfa...

    jsliang 评论0 收藏0
  • 送给CSS初学者的悬停过渡动画三部曲

    摘要:最后,将动画函数选为。的表现状态就是起止过程比较缓慢,中间过渡迅速。褪色效果首先,添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长,采用的动画效果。 CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。showImg(https://segmentfa...

    leo108 评论0 收藏0
  • 初学jQuery之选择器

    摘要:选择器选择器是什么的选择器是用于定位页面中的元素,其用法最初设计是源于的选择其用法,但是的选择器进行了扩展,远比的选择器更加强大。 选择器 选择器是什么 jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是源于CSS的选择其用法,但是jQuery的选择器进行了扩展,远比CSS的选择器更加强大。 基本选择器 基本选择去具有以下几种:1.ID选择器 2.元素选择器3...

    xcc3641 评论0 收藏0
  • 初学jQuery之选择器

    摘要:选择器选择器是什么的选择器是用于定位页面中的元素,其用法最初设计是源于的选择其用法,但是的选择器进行了扩展,远比的选择器更加强大。 选择器 选择器是什么 jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是源于CSS的选择其用法,但是jQuery的选择器进行了扩展,远比CSS的选择器更加强大。 基本选择器 基本选择去具有以下几种:1.ID选择器 2.元素选择器3...

    yankeys 评论0 收藏0
  • CSS清除浮动方法大全

    摘要:建议不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。评分父级也一起浮动原理所有代码一起浮动,就变成了一个整体优点没有优点缺点会产生新的浮动问题。 这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类:after和zoom ? 1 2 3 4 5 6 7 8 ...

    FleyX 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<