字间隔
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:;}

设置链接的样式

<!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>

DIV+CSS初学随记的更多相关文章

  1. 初学DIV+CSS要记住的

    初学DIV+CSS?有六个问题需要您关注一下!作为DIV+CSS初学者,如果在动手写代码之前对网页整体结构由一个清晰认识的话,写起来会事半功倍!但是,写的过程中总是有这样那样的问题,使得我们不得不停下 ...

  2. div+css布局记扎

    实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...

  3. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  4. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  5. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  6. html(第一天，div+css)

    一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 ...

  7. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  8. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

  9. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

随机推荐

  1. WARN [wxpay java sdk] - report fail. reason: report.mch.weixin.qq.com:80 failed to respond

    最近小程序接口 tomcat日志经常出现此类警告 WARN [wxpay java sdk] - report fail. reason: report.mch.weixin.qq.com:80 fa ...

  2. [Swift]LeetCode49. 字母异位词分组 | Group Anagrams

    Given an array of strings, group anagrams together. Example: Input: ["eat", "tea" ...

  3. [Swift]LeetCode323. 无向图中的连通区域的个数 $ Number of Connected Components in an Undirected Graph

    Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of nodes), ...

  4. python之Django学习笔记（一）---搭建Django开发环境和一些基本命令

    1.Django下载 官方下载地址:https://www.djangoproject.com/download/ 2.Django安装 linux/windows安装方法相同,具体有以下俩种 pip ...

  5. 【Spark篇】---SparkSQL中自定义UDF和UDAF，开窗函数的应用

    一.前述 SparkSQL中的UDF相当于是1进1出,UDAF相当于是多进一出,类似于聚合函数. 开窗函数一般分组取topn时常用. 二.UDF和UDAF函数 1.UDF函数 java代码: Spar ...

  6. 【Spark篇】---SparkStream初始与应用

    一.前述 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, Twitter, Zer ...

  7. BBS论坛（十四）

    14.1注册完成跳到上一个页面 (1)front/form.py # front/forms.py __author__ = 'derek' from ..forms import BaseForm ...

  8. wget Mac OS 下安装

    wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理. 下面介绍如何在Mac OS 下安装Wget 下载最新版的 ...

  9. 「造个轮子」——设计 HTTP 请求全局上下文

    前言 本次 Cicada 已经更新到了 v1.0.3. 主要是解决了两个 issue,#9(Boss线程数好像设置有误 ) #8(怎么返回纯字符串内容不要JSON格式?). 所以本次的主要更新为: C ...

  10. 【java提高】---queue集合

    queue集合 什么是Queue集合? 答:Queue用于模拟队列这种数据结构.队列通常是指“先进先出(FIFO)”的容器.队列的头部保存在队列中存放时间最长的元素,尾部保存存放时间最短的元素. 新元 ...