HTML样式- CSS

布满荆棘的人生 2022-06-02 01:29 289阅读 0赞

http://[blog.csdn.net/pipisorry/article/details/78929649][blog.csdn.net_pipisorry_article_details_78929649]

CSS简介

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用”style” 属性
  • 内部样式表 -在HTML文档头部 区域使用

    使用添加到 部分的样式信息对 HTML 进行格式化示例 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. h1 {color:red;}
    6. p {color:blue;}
    7. </style>
    8. </head>
    10. <body>
    11. <h1>This is a heading</h1>
    12. <p>This is a paragraph.</p>
    13. </body>
    15. </html>

    Center

    引用外部字体


    Home
    …

    }


    Note: 注意字体相对路径！注意字体文件后缀名TTF和ttf是大小写敏感的！注意很多英文字体在中文下是不起作用的！有的字体在linux下不起作用，如华康娃娃体，可以尝试其它字体！

    html中引用

    ABCDEFG

    某小皮

    外部样式表

    当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。



    链接到一个外部样式表 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <link rel="stylesheet" type="text/css" href="styles.css">
    5. </head>
    7. <body>
    8. <h1>I am formatted with an external style sheet</h1>
    9. <p>Me too!</p>
    10. </body>
    12. </html>

    Center 1

    外部CSS的一个实例 aaa.css，其中定义了body, h1, p标签的表现形式

    body
    {
    background-color:#d0e4fe;
    }
    h1
    {
    color:orange;
    text-align:center;
    }
    p
    {
    font-family:”Times New Roman”;
    font-size:20px;
    }

    引用外部字体

    css文件中直接加入

    @font-face{
    font-family: COLONNA;
    src:url(../fonts/COLONNA.TTF);
    }

    Note: 注意字体相对路径；注意字体文件后缀名TTF和ttf是大小写敏感的！

    from: http://blog.csdn.net/pipisorry/article/details/78929649

    ref: [更多样式， CSS 教程]

发表评论

表情：
评论列表 （有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读