一.文字样式
设置字体 html中 <font face="字体名称">
颜色值表示方式
英文名称 十六进制数值(可简写例如#aabbcc写为#abc) 百分比
背景颜色 background-color:#678;
文字加粗,倾斜
Html <b><strong>
Css font-weight
倾斜 italic 和oblique 两种倾斜字体
Font-style:italic
文字的装饰效果 text-decoration
下划线 text-decoration:underline
顶划线 text-decoration:overline
删除线 text-decoration:line-through
闪烁 text-decoration:blink
文字的水平对齐方式与段首缩进设置
水平对齐 text-align设置 left center right
段首缩进 text-indent 设置成缩进的距离 例如 text-indent:2em
文字布局
可以与盒子模型以及定位属性相结合来实现布局的效果
段落的垂直对齐方式
方框中文字数值方向居中对齐:vertical-align:middle
注意 在表格单元格中 可实现垂直居中对齐
但是 在普通的块级元素例如div中则不起任何作用
(1) div容器的高度固定;
(2) 内部需要居中对齐的内容高度不固定,例如是服务器动态产生的数据;
(3) 不适用表格
Div中的内容垂直居中对齐方法
二Css图像样式
1. 基本设置 边框,内边距,大小等
html中<img> 标记的border属性值
.img{
border:1px gray dashed;
margin:10px 10px 10px 0;
padding:5px;
float:left;
}
2.背景图像
(1)设置背景图像
background-image:url(bg.gif);
(2)控制图像平铺方向
默认情况下 图像会自动向水平和竖直两个方向平铺。
repeat 沿水平和竖直两个方向平铺
no-repeat不平铺,只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿竖直方向平铺
实例:background-repeat:repeat-x;
(3)同时设置背景图像和背景颜色
背景图像不覆盖的地方就显示背景颜色
(4)背景样式属性的简写
body{
background:#3399ff url(bg-grad.gif) repeat-x;
}
3.标题的图像替换 ( 正文和标题不能用相同的字体 不美观 所以有必要将标题替换成好看的图像)
(1)标题的图像替换
通常使用图像代替文本的方法来设计标题
制作图像
设置背景图像background:(bg.gif) no-repeat
隐藏标题文字 display:none FIR方法
(2)标题图像与背景融合 有时标题图像和背景图像融合的不是很好 尤其是背景图像是渐变色时
纯粹的图像处理 fireworks抠图 去掉标题图像的背景色 剩下文字的轮廓透明 的图片
(3)标题的对齐方式
background-position:right left top bottom center 设置标题图片的对齐方式
两个属性值分别用于确定水平位置和竖直位置,只设置一个值 缺省的值为center
(4)phark图像替换方法
将标题的text-indent属性值设置为一个非常大的负值 即此文字实际仍然在网页上,但是不会显示出来。其余部分和 FIR方法相同
(5)改进的图像替换法
钩子方法
<h1><span></span>标题文字</h1>
<span>标签没有实际意义,仅仅作为一个css的钩子,用于设置背景图像,然后通过对span元素进行绝对定位,将 图像覆盖在文字的上面。这样即使关闭了css仍然可以看到文本标题。但是注意标题图像不能使透明的图像。
4.为图像增加投影效果
通过css实现阴影效果
(1)基本方法 制作一个阴影边框的图像,通过调整目标图像的位置和浮动,将阴影图像显示出来。不推荐使用
(2)滑动门技术 ************************************************************************
两个重叠的背景图像共同组成最终的效果,对于不同的大小的图像,此方法可以自动适应。以后会多次用到