zoukankan      html  css  js  c++  java
  • 网页中引用css样式

    一,网页中引用css样式

    1)CSS 的三种引入方式
    • 内联样式
    • 行内样式表
    • 外部样式表
      • 链接式
      • 导入式

    二,内嵌方式

    style 标签

     <!doctype html>
    <html>
        <head>
            <meta charset="utf8">
            <style>
                p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <p>这是一个p标签!</p>
        </body>
    </html>
    

    三,行内样式

    <!doctype html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <p style="color: blue;">这是一个p标签!</p>
    </body>
    </html>
    

    四,外联样式表-链接式

    link标签 index.css

    p {
      color: green;
    }
    

    然后在HTML文件中通过link标签引入:

    <!doctype html>
    <html>
        <head>
            <meta charset="utf8">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <p>这是一个p标签!</p>
        </body>
    </html>
    

    五,外联样式表-@import url()方式 导入式(了解)

    index.css

    @import url(other.css)
    

    注意:

    @import url()必须写在文件最开始的位置。
    

    六,链接式与导入式的区别

    1. <link/>标签属于XHTML,@import是属性css2.1
    2. 使用<link/>链接的css文件先加载到网页当中,再进行编译显示
    3. 使用@import导入的css文件,客户端先显示HTML结构,再把CSS文件加载到网页当中
    4. @import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
  • 相关阅读:
    qmake Manual (EN) 1
    {转}linux gcc gdb使用
    qmake 简介
    {转}linux makefile 详细教程
    {转}Linux下C开发之——gcc,gdb的使用
    关于“做一个聊天+信息分享客户端”的设想(SNS?)
    {转}算法的力量
    hdu 2047 简单递推公式
    RONOJ 6 金明的预算方案
    hdu 2446 二分搜索解题报告
  • 原文地址:https://www.cnblogs.com/xiaolang666/p/14686220.html
Copyright © 2011-2022 走看看