DIV+CSS初学随记

kgbook 发布于2019-04-23 11:51 / 1736人阅读

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

字间隔
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 2019-08-02 16:14 评论0 收藏0
送给CSS初学者的悬停过渡动画三部曲

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

leo108 2019-08-29 18:44 评论0 收藏0
初学jQuery之选择器

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

xcc3641 2019-08-02 16:04 评论0 收藏0
初学jQuery之选择器

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

yankeys 2019-08-23 11:47 评论0 收藏0
CSS清除浮动方法大全

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

FleyX 2019-08-29 17:25 评论0 收藏0