zoukankan      html  css  js  c++  java
  • CSS3:文字属性

    文字属性注意的细节:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>HTML5+CSS3</title>
    <style>
        p {
            /*font-family: "unknow font","Microsoft Yahei";*/
            font-family: "Times New Roman","Microsoft Yahei";
        }
    </style>
    </head>
    <body>
    <!--
    1:如果设置的字体不存在,那么系统会使用默认的字体来显示宋体
    2:如果设置的字体不存在,而我们又不想用默认的字体来显示怎么办?
        可以给字体设置备选方案:font-family: "unknow font","Microsoft Yahei";
    3:如果想给中文和英文分别设置单独的字体,怎么办?
        但凡是中文字体,里面都包含了英文;但凡是英文字体,里面都没有包含中文
        也就是说中文字体可以处理英文,而英文字体不能处理中文
        所以英文字体的设置要写在中文字体设置的前面:font-family: "Times New Roman","Microsoft Yahei";
    
    补充:在企业开发中最常见的字体有以下几个:
    中文:宋体 (SimSun)/黑体(SimHei)/微软雅黑 (Microsoft YaHei)
    英文:"Times New Roman"/Arial
    以上字体,在操作系统中默认就有
    因为中文字体其实都有自己的英文名称,所以是不是中文字体主要看能不能处理中文
    -->
    <p>ABC这是一个段落</p>
    </body>
    </html>
    

    文字属性的缩写格式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>HTML5+CSS3</title>
    <style>
        p {
            /*font-style:italic;
            font-weight:bold;
            font-size:10px;
            font-family:"Microsoft YaHei";*/
            font:italic bold 10px "Microsoft YaHei";
        }
    </style>
    </head>
    <body>
    <!--
        p {
            font-style:italic;
            font-weight:bold;
            font-size:10px;
            font-family:"Microsoft YaHei";
        }
        缩写的格式为:
        p {
           font:italic bold 10px "Microsoft YaHei";
        } 
    注意点:
    1:在缩写格式中有的属性值可以省略,如:style , weight属性
    2:在缩写格式中style和weight的位置可以互换
    3:size与family两个属性不能省略且位置不能互换,size属性一定写在family的前面
    -->
    <p>ABC这是一个段落</p>
    </body>
    </html>
    

    文本相关属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>HTML5+CSS3</title>
    <style>
        p {
            text-decoration:underline;
        }
        a {
            text-decoration: none;
        }
        .right {
            text-align: right;
        }
    </style>
    </head>
    <body>
    <!--
    1:文本装饰的属性
        text-decoration:underline;
        该属性的取值如下:
        underline:下划线
        line-through:删除线
        overline:上划线
        none:常见用途就是去掉超链接的下划线
    2:文本水平对齐的属性
        text-align: right;
        取值:
        right:右
        left:左
        center:居中
    3:文本缩进的属性
        text-indent: 2em
        取值:
        2em:em是单位,一个em代表缩进一个文字的宽度
        
    -->
    
    <u>这是带下划线的文字</u>
    <s>这是带删除线文字</s>
    <o>这是带删除线文字</o>
    <p class="right">靠右对齐的文字</p>
    <p>这是段落</p>
    <a href="">超链接</a>
    </body>
    </html>
    

      

     

  • 相关阅读:
    前端基础进阶(四)-让你一分钟就看懂的作用域和作用域链
    前端基础进阶(三)-史上最详细的变量对象详解
    前端基础进阶(二)-知识点解析最精炼最详细
    前端基础进阶(一):内存空间详解-月薪5万
    知道这20个前端正则表达式,能让你做项目时少写1000行甚至一万行,真的
    学习web前端的免费12个学习网站,等你来撩
    一个老牌程序员推荐的JavaScript的书籍,看了真的不后悔!
    零基础的同学看过来,如何系统学习前端
    这是那些大佬程序员常用的学习java网站,这就是别人薪资上万的原因
    Debug outlook add-in (office.js) 小技巧
  • 原文地址:https://www.cnblogs.com/ginvip/p/7891024.html
Copyright © 2011-2022 走看看