美文网首页
Html添加Css样式的方式

Html添加Css样式的方式

作者: 寂寞的雪 | 来源:发表于2015-06-28 21:15 被阅读194次

    思考?

    我们如何将自己定义的样式应用到页面呢?(直白一点就是: 怎么把Css样式添加到html文档中)

    添加方式

    1. inline 模式

    直接在需要应用样式的html tag当中的style属性中添加,

    <p style="color: red">I should be red </p>

    2. internal 模式

    在<head>标签内部通过在<style>标签内定义:

    <pre>
    <!DOCTYPE html>
    <html>
    <head>
    <title>css import demo</title>
    <style>
    p {
    color: red;
    }
    </style>
    </head>
    <body>
    <p> This should be red ! </p>
    </body>
    </html>
    </pre>

    3. external模式

    将Css样式定义在单独的文件, 需要该样式的时候,只需要引入该样式文件即可.
    例如:
    3.1 创建名 example.css样式文件

    3.2对example.css文件进行编辑,添加如下内容:

    p { color: red; }

    3.3 在html文件中引入该样式文件;

    <pre>
    <!DOCTYPE html>
    <html>
    <head>
    <title> css import demo</title>
    <link rel="stylesheet" href="example.css">
    </style>
    </head>
    <body>
    <p> This should be red ! </p>
    </body>
    </html>
    </pre>

    相关文章

      网友评论

          本文标题:Html添加Css样式的方式

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