zoukankan      html  css  js  c++  java
  • CSS样式表与HTML结合的方法

    从此王子和公主幸福的生活在了一起:)

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    一、外部样式表(常用)

      通过 <link />标签引入样式表:

    <!DOCTYPE html>
    <html>     
        <head>
            <meta charset="UTF-8">
            <title>外联样式</title>
            <link rel="stylesheet" type="text/css" href="style.css" media="all" />
            <!--在link标记中rel和href属性是必须的,type属性和media属性可省略-->
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>
        </body>
    </html>

    注意:1)在link标记中rel和href属性是必须的,type属性和media属性可省略;

         2)样式表中不能包含HTML标记语言,只能有CSS规则和CSS注释,否则导致在该标记后面的CSS样式将无法被识别。

    二、内联样式表

      1、通过 <style></style>标签引入样式表:

    <!DOCTYPE html>
    <html>     
        <head>
            <meta charset="UTF-8">
            <title>内联样式</title>
            <style>
                body{
                    background-color: blue;
                }   
            </style>
        </head>
        <body>
        </body>
    </html>

      2、通过@import指令引入样式表:

    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>@import</title>
            <style>
                /*将@import放置在CSS规则前*/
                @import url(style.css);
                body {
                    background-color: blue;
                }        
            </style>        
        </head>
        <body>
        </body>    
    </html> 

    注意:1)将@import url(style.css);写在<style>标签内;

         2)@import放置在CSS规则之后将不起使用。

    三、行间样式

      写在某个元素自身的样式,使用HTML的style属性实现。

    <!DOCTYPE html>
    <html>     
        <head>
            <meta charset="UTF-8">
            <title>行间样式</title>
        </head>
        <body>
            <div style="background-color: red; 100px;height:100px;" style="background-color: yellow;"></div>
        </body>
    </html>

    注意:行间样式若存在多个style属性,只能识别第一个。

  • 相关阅读:
    Sysbench对Mysql进行基准测试
    yum安装软件时报错libmysqlclient.so.18()(64bit)
    redis启动报错Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝,无法连接。
    cmd 中连接mysql时报'mysql'不是内部或外部命令,也不是可运行的程序或批处理文件
    Mysql远程连接权限
    Git基础教程
    电脑adb命令给智能电视安装APK
    python基础之类
    python基础之函数
    前端之CSS第二部分属性相关
  • 原文地址:https://www.cnblogs.com/xiangxuemei/p/6481065.html
Copyright © 2011-2022 走看看