div+css (2)

 

一、CSS文字效果

1、 文字的样式：

 <style type="text/css">

h1{"Times New Roman", Times, serif;}

h2{}

</style>

注意：这里的font-family控制字体，是首选，如果没有再是下一个，到浏览器默认。

在body中写入：

<h1>111111111111111111111111</h1>

<h2>111111111111111111111111</h2>

 

2、 文字的大小：

控制语句如上面的字体，属性：font-size。

 

3、 字体颜色

 使用的是color属性。

有以下几种取色方式：

（1）rgb(0%,2%,9%); 百分数依次代表 红 绿 蓝 分量

（2）color:#333333 是16进制的表示方式。

（3）color:blue 是英文单词的表示方式。

 

4、 文字粗细

h1{font-weight:100} 只有数值较大的时候有明显的变化。

 

5、 斜体

Font-style:itlic斜体，normal常规。

 

6、 下划线、顶划线、删除线：

p.one{ text-decoration:underline; }                     /* 下划线 */

p.two{ text-decoration:overline; }               /* 顶划线 */

p.three{ text-decoration:line-through; } /* 删除线 */

p.four{ text-decoration:blink; }       /* 闪烁，只对firefox有效*/

 

7、 英文字母大小写：

p.one{ text-transform:capitalize; }        /* 单词首字大写 */

p.two{ text-transform:uppercase; }             /* 全部大写 */

p.three{ text-transform:lowercase; }    /* 全部小写 */

 

8、 综合应用：模拟谷歌

p{font-size:24px; letter-spacing:2px;}

.a1{color:#0000FF;}

.a2{color:#33CC33;}

.a3{color:#FF9900;}

.a4{color:#CC33CC;}

.a5{color:#99FF66;}

 

在body中写入

<p><span class="a1">我</span><span class="a2">也</span><span class="a3">要</span><span class="a4">谷</span><span class="a5">歌</span>一下哦</p>

 

二、CSS的段落

1、对齐

p{ font-size:12px; }

p.left{ text-align:left; }                 /* 左对齐 */

p.right{ text-align:right; }             /* 右对齐 */

p.center{ text-align:center; }         /* 居中对齐 */

p.justify{ text-align:justify; } /* 两端对齐 */

 

表格中的对齐：

td.top{ vertical-align:top; }                  /* 顶端对齐 */

td.bottom{ vertical-align:bottom; }              /* 底端对齐 */

td.middle{ vertical-align:middle; }         /* 中间对齐 */

 

在引用时：

<table cellpadding="2" cellspacing="0" border="1">

       <tr>

              <td><img src="02.jpg" border="0"></td>

              <td class="top">垂直对齐方式，top</td>

       </tr>

       <tr>

              <td><img src="02.jpg" border="0"></td>

              <td class="bottom">垂直对齐方式，bottom</td>

       </tr>

       <tr>

              <td><img src="02.jpg" border="0"></td>

              <td class="middle">垂直对齐方式，middle</td>

       </tr>      

</table>

      

1、 首字放大

样式代码：

body{

       background-color:black;        /* 背景色 */

}

p{

       font-size:15px;                            /* 文字大小 */

       color:white;                         /* 文字颜色 */

}

p span{

       font-size:60px;                            /* 首字大小 */

       float:left;                              /* 首字下沉 */

       padding-right:5px;                /* 与右边的间隔 */

       font-weight:bold;                  /* 粗体字 */

       "">黑体;                  /* 黑体字 */

       color:yellow;                        /* 字体颜色 */

}

 

 

在body中写入：

<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼·春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p>

       <p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙芋之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说：“此际金凤荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。</p>