zoukankan      html  css  js  c++  java
  • css006 文本格式化

    css006 文本格式化

    文本格式化:字体(font-family)、颜色(color)、字号(font-size)、

    行距(line-height)、粗体(font-weight)、斜体(font-style)、

    背景(background)、间距(word-spacing/letter-spacing)、

    缩进(text-indent)、对齐(text-align)、大小写(text-transform)、

    空白属性(white-space)、装饰(text-direction)

    1、           使用字体:font-family

    2、           使用web字体:?

    @font-face{

     fot-family:”league gothic”;

    src:url(fpnts/league_gothic-webfont.ttf)

     }

    添加@font-face指令,告诉浏览器要使用什么字体,并告诉它要去哪里下载。最好放在样式表的最上方,方便开始就下载相应字体。

    要考虑浏览器版本的兼容性(IE)

    3、           Goole的web字体探秘:?

    4、           如何给字体添加颜色:color

      Color:#f00;

      Color:red;

      Color:rgb(255,0,0);

      Color:rgba(255,0,0,0.5)  (最后面的.5表示透明度。透明度在0到1之间,0-不透明,1-完全透明)

    5、           如何修改字号:font-size

      单位:px/keyword/percentage/em

      px:任意相应的数值+px;

      Keyword:large/small/medium/xx-small/x-small/x-large/xx-large;

      Percentage:相对于默认文本(16px)的百分比;

      em:和percentage用法类似,也是相对于16px的百分比

    6、           如何格式化词语和字母

      斜体化:font-style:italic

      粗体化:font-weight:bolid;

            font-weight:normal;

      大写化:text-transform:uppercase;

            text-transform:lowercase;

            text-transform:capitalize;(首字母大写)

            text-transform:none;(不改变文本大小写)

      小型大写字母:fong-variant:small-caps;

      文本修饰:text-direction:underline;

              text-direction:line-through;

              text-direction:blink;

              text-direction:underline line-through; (可以多个关键字一起使用,达到叠加的效果)

              text-direction:none;

             

    字母间距和字间距:letter-spacing:length;

                       word-spacing:length;

    7、     如何给文本添加阴影:text-shadow(在IE9或更早的版本中无效)

      text-shadow:3px 4px 5px #000;

       (3px为水平偏移量:正在右,负在左;4px为垂直偏移量:正在下,负在上。 5px为模糊度,数值越大越模糊。 最后为阴影的颜色

    8、  如何格式化整个段落:p{……}

        调整行间距:line-height(设置行高)

         可用px/em/percentage表示行间距

         可以用数字直接表示行高,不需要单位,和百分比效果一样

         如:line-height:1.5;表示行高为字号的1.5倍

         行高属性是继承的,但是继承的不是百分比,而是算出来后的行高,所以谨慎使用

    对齐文本:text-align:center;

               text-align:left;

               text-align:right;

               text-align:justify;(两端都对齐)

       首行缩进并去除边距:text-indent和margin

                    text-indent:px/em;   (em值是以当前字母大小问基准)

       控制段落之间的距离:margin-top 和 margin-bottom

         

       如果直接用font来定义文本的各种属性,最后两个属性必须是:font-size(或 font-size/line-height)和font-family 。其他的属性顺序随便。                

                  问题:如果文本的设置没有font-size(或 font-size/line-height)和font-family呢?怎么办?其他的属性还是可以随意顺序吗

        格式化段落的首字母和首行:first-letter 和 first-line

                   如:p first-letter{ color:red; }

    9、   如何给列表定义样式:?

      列表的类型:有序列表(<ol>) 和 无序列表(<ul>)

                list-style-type:circle;(空心圆形)

                list-style-type:squar;(实心方块)

                list-style-type:disc;(实心原点)

               list-style-type:decimal;(十进制)

               list-style-type:decimal-leading-zero;(十进制前面置零)

               list-style-type:upper-alpha; /lower-alpha(大写/小写  字母)

               list-style-type:upper-roman;/lower-roman (大写/小写 罗马字母)

               list-style-type:none; (没有任何装饰)

       ntn-of-type选择器

                如:li{list-style-type:square;}

                     li:nth-of-type(odd){list-style-type:circle;}

                        方块和圆,交替使用

                    list-style-type:none;

      给项目符号和项目序号定位

               list-style-t-position:outside;/inside;

      图形项目符号

                 list-style-image:url(……);

    注:黑色问号是指在看目录时,自己什么东西都想不起来,不知道那个标题是什么东西的。

         红色字体的问号是看完书后还不懂的东西。

  • 相关阅读:
    MySQ随笔2(连接表、分组)
    MySQL随笔
    Python随笔1
    要学习但还没学的知识点2016年8月4号
    jQuery备忘录--私家版
    Chrome 中的彩蛋——T-Rex
    JavaScript多线程初步学习
    实例:jQuery实现标签切换
    实例:用jQuery实现垂直和水平下拉 菜单
    AJAX编程模板
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5100279.html
Copyright © 2011-2022 走看看