zoukankan      html  css  js  c++  java
  • 5.文字与图像(文字样式和图像样式)

    一.文字样式
    设置字体    html中 <font face="字体名称">

    css中   font-family:字体名称
    文字大小
    font-size:12px;
    行高 
     一个段落中各行文本的高度  两行文字之间基线的距离       给文字加上下划线   下划线的位置就是文字的基线
    line-height:18px;也可以相对的数值;可以设置在文本元素中,也可设置在容器元素中
    css中可以集中在一条语句中
    font:12px/18px   arial;
    大小  12    ;       行高18    ;   字体名  arial
    文字颜色和背景颜色
    color:blue
    文字加粗、倾斜于大小写
    html中<b>或<strong>两个标记将文字设置为粗体
    css中 font-weight控制文字的粗细
    font-weight:normal   正常   
    font-weight:bold    加粗
     

    颜色值表示方式

            英文名称    十六进制数值(可简写例如#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)控制图像平铺方向

    默认情况下 图像会自动向水平和竖直两个方向平铺。

    5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客repeat  沿水平和竖直两个方向平铺

    5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客no-repeat不平铺,只显示一次

    5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客repeat-x只沿水平方向平铺

    5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客repeat-y只沿竖直方向平铺

    实例:background-repeat:repeat-x;

    (3)同时设置背景图像和背景颜色

    背景图像不覆盖的地方就显示背景颜色

    (4)背景样式属性的简写

    body{

    background:#3399ff  url(bg-grad.gif)  repeat-x;

    }

    3.标题的图像替换  ( 正文和标题不能用相同的字体  不美观 所以有必要将标题替换成好看的图像)

    (1)标题的图像替换

    通常使用图像代替文本的方法来设计标题

    5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客制作图像  5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客  设置背景图像background:(bg.gif) no-repeat     5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客隐藏标题文字 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)滑动门技术 ************************************************************************

                                                 5.文字与图像(文字样式和图像样式) - 骡子 - stupidmule@126 的博客

      两个重叠的背景图像共同组成最终的效果,对于不同的大小的图像,此方法可以自动适应。以后会多次用到

    (3)柔边阴影效果   利用photoshop和fireworks软件
  • 相关阅读:
    一、ThinkPHP的介绍
    一、ThinkPHP的介绍
    perl 爬虫两个技巧
    perl 爬虫两个技巧
    perl 爬取上市公司业绩预告
    perl lwp get uft-8和gbk
    perl lwp get uft-8和gbk
    perl 爬取同花顺数据
    perl 爬取同花顺数据
    php 接口示例
  • 原文地址:https://www.cnblogs.com/dongguolei/p/7902943.html
Copyright © 2011-2022 走看看