美文网首页
文本样式

文本样式

作者: 秋殇灬 | 来源:发表于2018-08-08 18:26 被阅读0次
    <em>  语气强调     
    <strong>    内容强调    ,
    <small> ,   字体缩小
    <big> ,字体变大   
    <cite>  加书名号用cite括起来,  
    <q>  行内引用     
    <blackquote>长引用,块级引用,独占一行,  
    <sup> 创建上标    
    <sub> 创建下标     
    <del>表示删除内容(划掉)   
    <pre>  保留文本格式   不会忽略空格     
    <code>    表示代码的标签    
    <ins>  插入标签
    

    <em>和<strong>

    • em即“emphasize”。<em>表示强调,<strong>表示更强烈的强调。

    • <em>默认样式是斜体,<strong>默认样式*

    • <em>用来局部强调,<strong>则是全局强调。从视觉上考虑,<em>的强调是有顺序的,阅读到某处时,才会注意到。<strong>的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了<em>和<strong>的默认样式。

    可以直接将样式写到标签内部的style属性中,这种样式不用填写选择器,直接编写声明即可

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css</title>
    </head>
    <body>
        <p style="color: red;font-size: 40px;">窗前明月光</p>
        <p style="color: green;font-size: 40px;">疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
    </html>
    
    image.png

    但是这样做肯定是不行的

    <2>style标签 内部样式表
    下面是把所有p标签的颜色和字体变成style标签里的颜色和字体
    一、按钮
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
    p{
    color: red;
    font-size: 40px;
    }
    </style>

    </head>
    <body>
        <p>窗前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
    </html>
    

    运行结果

    image.png
    • link 外部样式表
      可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。
      一、按钮练习
    <!DOCTYPE html>
    <html>
    <head>
    <title>按钮练习</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .cc{
            display: block;
            width: 161px;
            height: 44px;
            background-image: url(amazon-sprite_.png)
            /*background-repeat: no-repeat;*/
        }
        .cc:active{
            display: block;
            width: 43px;
            height: 31px;
            background-image: url(amazon-sprite_.png);
            /*background-repeat: no-repeat;*/
            background-position: -58px -338px;
         /*.cc:active{
            background-image: url(timg3.jpg);
            background-position: -400px 0px;
        }*/
    
    </style>
    </head>
    <body>
    <a href="#" class="cc"></a>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:文本样式

          本文链接:https://www.haomeiwen.com/subject/ttwxbftx.html