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>
  • 相关阅读:
    Spring Boot 定时+多线程执行
    Spring Boot + Vue Element实现Excel文件上传、解析、下载(含完整实现过程)
    立个flag,2020年比2019年产出提升10倍
    《Google工作法》读书笔记
    学习Go语言(二)快速入门
    学习Go语言(一)环境安装及HelloWorld
    WPF 自定义控件缩放
    上、下位机软件通信时,结构体的内存对齐问题
    C 语言能不能在头文件定义全局变量?
    注释格式
  • 原文地址:https://www.cnblogs.com/Yimi/p/5866820.html
Copyright © 2011-2022 走看看