仓酷云

标题: DIV教程之css网页结构中笔墨排版的属性和用法 [打印本页]

作者: 分手快乐 时间: 2015-1-15 23:33
标题: DIV教程之css网页结构中笔墨排版的属性和用法
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
网页制造poluoluo文章简介：明天总结下，css网页结构中笔墨排版的相干属性和用法。
前段工夫，进修了几个年夜的网站的图文混排的办法。明天总结下，css网页结构中笔墨排版的相干属性和用法。包含：设定字体、色彩、巨细、段失白，首字下沉、首行缩进、中笔墨的截断、流动宽度词内折行（word-wrap和word-break）等。

1、设定笔墨字体、色彩、巨细等利用font等。

font-style设定斜体，好比font-style:italic;
　　font-weight设定笔墨粗细，好比font-weight:bold;
　　font-size设定笔墨巨细，好比font-size:12px;（大概9pt，分歧单元显现成绩参考CSS手册）
　　line-height设定行距，好比line-height:150%;
　　color设定笔墨色彩（注重不是font-color），好比color:red;
　　font-family设定字体，好比font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;（这是通用的写法）
下面是经常使用的属性，更多参考css手册。

2、段落排版：利用margin、padding和text-align。

中文段落利用<p>标签（也能够是其他容器），摆布（相称于缩进）、段前段后的空缺，都能够用margin或padding。好比：
p{
margin:18px6px6px18px;/*分离是上、右、下、左，十二点入手下手的顺时针偏向*/
margin:18px6px;/*暗示高低为18，摆布为6*/
margin:1px2px3px;/*暗示上为1px，下为6px,摆布为2px*/
}

笔墨的对齐体例用text-align，好比：
p{
text-align:center;/*居中对齐*/
text-align:justify/*两头对齐*/
}

对齐体例另有left、right。
有良多老手对margin、padding不是很熟习，看上面图片的暗示。

3、竖排笔墨：利用writing-mode。

writing-mode属性有两个值lr-tb和tb-rl，前者是默许的左-右、上-下，后者是上-下、右-左。好比:
p{
writing-mode:tb-rl;
}

能够分离direction排版。

4、项目标记的成绩：利用list-style

在CSS里项目标记有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（年夜写罗马数字）、lower-alpha（小写英笔墨母）、upper-alpha（年夜写英笔墨母）、none（无）。好比设定一个列表（ul或ol）的项目标记为方块，如：
li{
list-style:square;
}

别的list-style另有一些值，好比能够接纳一些小图片作为项目标记，在list-style下间接写url(“图片地点”)就能够了。但不倡始如许的体例。倡议您设置图片为li的背景。

5、首字下沉效果

伪工具:first-letter共同font-size、float能够制造首字下沉效果。好比：
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}

6、文本缩进：利用text-indent
text-indent可使得容器内首行缩进必定单元。好比中文段落一样平常每段前空两个汉字。能够这么写：
p{
text-indent:2em;/*em是绝对单元，2em即如今一个字巨细的两倍*/
}

7、流动宽度汉字截断：利用text-overflow（显现省略号效果）

用背景言语能够对从数据库里的字段内容做截断处置，好比说截12个汉字（以后用省略号）。可是偶然还必要html标签的过滤等，而用CSS来把持则没有这个成绩。好比对列表使用以下款式：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

8、流动宽度汉字（词）折行：利用word-break

举个例子，好比说要在一个流动宽度容器内里显现良多地名（假定以空格分开），为了不地名两头断开（即一个字在下面而另外一个字折断到下一行往了）。则可使用word-break。好比：
<divstyle="width:210px;height:200px;background:#ccc;word-break:keep-all">
北京上海上海上北京上海北京上海上海上海北京上海上海北京上海上海北京上海北京上海北京上海北京上海北京上海北京上海上海北京上海上海
</div>
</p>
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

作者: 小妖女 时间: 2015-1-17 23:13
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 山那边是海 时间: 2015-1-24 12:43
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 因胸联盟 时间: 2015-2-1 16:16
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 金色的骷髅 时间: 2015-2-7 09:51
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 老尸 时间: 2015-2-21 19:11
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 小女巫 时间: 2015-3-6 21:50
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 爱飞 时间: 2015-3-13 22:09
可以使用 CSS 检查工具进行设计。

作者: 不帅 时间: 2015-3-20 21:19
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

欢迎光临仓酷云 (http://ckuyun.com/)