zoukankan      html  css  js  c++  java
  • Using CSS in HTML

    Table of Contents

    CSS is intended to be used with HTML (or SVG). There are three ways you can include the CSS in your HTML file:

    • Embed CSS inside the style attribute of HTML elements.
    • Embed CSS inside style HTML elements
    • Link to external CSS files.

    Each of these options will be described below.

    CSS in style Attributes

    The simplest way to include CSS in an HTML page is to embed the CSS inside the style attribute of an HTML element. CSS properties embedded inside a style attribute are only applied to the HTML element into which they are embedded. Here is how that looks:

    <div style="border: 1px solid black;"> Style This! </div>
    

    This example inserts the CSS property border into the style attribute of the div element. The value of theborder property is 1px solid black which sets the border of the div element to a one pixel wide, black border.

    If you need to set more than one CSS property inside the style element, separate the CSS properties with a semicolon, like this:

    <div style="border: 1px solid black; font-size: 18px;"> Style This! </div>
    

      

    This example sets both the border CSS property and the font-size CSS property.

    CSS in style Elements

    Another option of using CSS in HTML is to embed your CSS inside style HTML elements inside your HTML page. If you need to apply the same styles to multiple HTML elements, this is much easier than setting the styles inside each HTML element in their style attribute. Here is a CSS example using the style element:

    <style>
        div {
            border: 1px solid black;
        }
    </style>
        
    <div> Style This! </div>    
    <div> Style This Too! </div>    
    

      

    This example shows a single style element which defines a CSS rule which is applied to all div elements. Thus, the CSS property inside the style element (the border property) is applied to both of the div elements in the example.

    You can define more than one CSS rule inside the same style element. Here is an example:

    <style>
        div {
            border: 1px solid black;
        }
        span {
            border: 1px solid blue;
        }
    

      

    </style>

    This example defines two CSS rules. The first CSS rule applied to all div elements, and the second CSS rule is applied to all span elements.

    You can also embed more than one style element within the same HTML page. Here is an example:

    <style>
        div {
            border: 1px solid black;
        }
    </style>
    
    <style>
        span {
            border: 1px solid blue;
        }
    </style>
    

      

    This example shows the CSS rules from the previous example embedded in their own style element.

    The style elements can be embedded either inside the HTML head element or the body element. Here is an example:

    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
    
        <style>
            span {
                border: 1px solid blue;
            }
        </style>
    
        <div> Style This! </div>
        <span> Style This Too! </span>
    
    </body>
    </html>
    

      

    In this example the CSS rule for div elements is embedded inside its own style element inside the head HTML element, and the CSS rule for span elements is embdded inside its own style element inside the body HTML element.

    CSS in External Files

    If you need to apply the same CSS styling to multiple HTML pages, it is easier to move your CSS rules to a CSS file, and then link to that file from your HTML pages. You can reference an external style sheet in two ways:

    • Via a link element inside the head element.
    • Via an @import instruction inside a style element.

    Both of these mechanisms are explained in the following sections.

    The link Element

    You reference an external CSS file using the link element (inside the head element). Here is an example:

    <!DOCTYPE html>
    <html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="my-css-file.css">
    </head>
    
    <body>
        <div> Style This! </div>
        <span> Style This Too! </span>
    
    </body>
    </html>
    

      

    This example links to the external CSS file named my-css-file.css. This file has to be accessible online, and in this case it has to be located in the same directory as the HTML file. Thus, if the HTML file is located athttp://jenkov.com/my-website/my-html-file.html, then the CSS file should be available athttp://jenkov.com/my-website/my-css-file.css.

    Actually, the href attribute of the link element can contain an absolute or relative URL. For more information about absolute and relative URLs, see HTML and URLs in my HTML4 tutorial.

    If we move the CSS rules from the earlier examples to the my-cess-file.css file, then the contents would look like this:

    div {
        border: 1px solid black;
    }
    span {
        border: 1px solid blue;
    }
    

      

    Notice that the CSS file has no style element. It only has the CSS rules themselves.

    The @import Instruction

    You can also import an external CSS file from inside a style element using the @import instruction. Here is a CSS @import example:

    <style>
        @import url('http://jenkov.com/my-website/my-css-file.css');
    </style>
    

      

    This example will include the CSS file http://jenkov.com/my-website/my-css-file.css into the HTML page which contains that style element.

  • 相关阅读:
    MySQL:数据库优化,看这篇就够了
    不使用synchronized和lock,如何实现一个线程安全的单例
    理解Spring:IOC的原理及手动实现
    终于放弃了单调的swagger-ui了,选择了这款神器—knife4j
    TP5.0.24 验证器内置规则中max 如果输入中文 验证长度错误的问题
    laravel 5.5 api接口开发:JWT安装+实现API token 认证
    homestead 代码与本地代码不同步的解决方法
    laravel 5.5 api接口开发: 安装dingo/api
    php base_decode 函数将base64编码转换图片遇到的问题
    thinkphp 5.0 部署新网空间隐藏index.php入口
  • 原文地址:https://www.cnblogs.com/hephec/p/4564426.html
Copyright © 2011-2022 走看看