zoukankan      html  css  js  c++  java
  • css构造文本

    1.

    1. 文本缩进
    text-indent:值;
    值为数字,最常用的数值单位是px(像素),也可以直接是百分比!
    text-indent:100px;
    text-indent:10%;
    2. 文本对齐
    text-align:对其方式;
    可以的值为:left、center、right
    3. 文本行高
    line-height:值;
    line-height:23px;
    line-height:120%;
    默认:normal
    4. 字间隔(单词)
    word-spacing:10px;
    默认值:normal
    5. 字母间隔
    letter-spacing:5px;
    默认值:normal
    6. 文字下划线
    text-decoration:none;
    值:underline 或者none 等,常用值就这两个
    7. 字体
    font-family:微软雅黑;
    多个字体用逗号隔开
    font-family:"Times New Roman",Georgia,Serif;
    font-family:字体1,字体2;
    8. 字体风格
    font-style:值;
    normal
    italic
    oblique
    9. 字体大小
    font-size:数值;
    数值单位为px
    10. 文本颜色
    color:颜色值;
    颜色值可以为一些简单的英语单词
    color:red;
    实际工作中用的比较多的是颜色代码
    color:#111111;

    11. 文本加粗
    font-weight:值;
    常用值:
    normal
    bold
    12. 关于样式继承
    样式的继承问题!

    <html>
      <head>
        <meta name="generator"
        content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
        <meta charset="utf-8" />
        <title>css构造文本</title>
        <style type="text/css">
    p{
    text-align:center;/*文本对齐*/
    line-height:50px;/*文本行高*/
    word-spacing:40px;/*英文单词的间隔*/
    letter-spacing:10px;/*英文字母或汉字的间隔*/
    text-decoration:underline;/*文字下划线*/
    }
    </style>
      </head>
      <body>
        <h1>行高</h1>
        <p>hello world
        english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
      </body>
    </html>

    <html>
      <head>
        <meta name="generator"
        content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
        <meta charset="utf-8" />
        <title>css构造文本</title>
        <style type="text/css">
    p{
    text-indent:50px;/*文本缩进*/
    text-align:center;/*文本对齐*/
    line-height:50px;/*文本行高*/
    word-spacing:40px;/*英文单词的间隔*/
    letter-spacing:10px;/*英文字母或汉字的间隔*/
    text-decoration:underline;/*文字下划线*/
    font-family:微软雅黑;/*字体*/
    font-style:italic;/*斜体*/
    font-size:30px/*字体大小*/;
    color:red;/*字体颜色*/
    font-weight:bold;/*字体加粗*/
    }
    a{text-decoration:none;
    }
    a:hover 
    {text-decoration:underline;
    }/*鼠标放上去有下划线*/
    body{
    color:green;}/*继承*/
    div p{
    color:yellow;}
    #div1 p {
    font-style:italic;}
    </style>
      </head>
      <body>
        <h1>行高</h1>
        <p>hello world
        english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
        <a href="http://www.baidu.com">百度</a>
        <div>
          <p>还上课大会上的聚会的军事登记九点上课</p>
        </div>
        <div id="div1">
          <p>还上ewehJjjjjjjjjjjjjjjj急急急急急急急急急课大会上的聚会的军事登记九点上课</p>
        </div>
      </body>
    </html>
  • 相关阅读:
    基于YIIFRAMEWORK框架开发学习(一)
    Android学习系列(24)App代码规范之使用CheckStyle
    64为操作系统,64位IIS,运行32位应用程序的问题
    IE下设置网页为 首页,收藏
    部分.net 目录
    强大的ldd
    (原创)初试Robotium
    在solaris上安装iperf
    (原创)LoadRunner 中 调用dll
    (原创)学习NotesList(Robotium自带的例子)
  • 原文地址:https://www.cnblogs.com/Yimi/p/5866820.html
Copyright © 2011-2022 走看看