zoukankan      html  css  js  c++  java
  • css和css和html的四种结合方式

    原文地址

    使用html标签的style属性

    每个html标签上面都有一个属性:style,把css和html结合在一起

    示例:设置字体背景颜色为红色,字体颜色为黄色。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>结合方式一</title>
    	</head>
    	<body>
    		<div style="background-color: red;color: yellow;">hjwblog.com</div>
    	</body>
    </html>
    

    使用html的style标签

    此标签写在<head>标签里面。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>结合方式二</title>
    		<style type="text/css">
    			div
    			{
    				background-color: blue;
    				color: yellow;
    			}
    		</style>
    	</head>
    	<body>
    		<div>hjwblog.com</div>
    	</body>
    </html>
    

    在style标签里面@import

    先创建一个css文件,这里是mycss.css,在css文件夹下面。

    /*
     * 这是注释
     */
    
    div{
    	background-color: yellow;
    	color: blue;
    }
    

    然后html这样写

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>结合方式三</title>
    		<style type="text/css">
    			@import url("css/mycss.css");
    		</style>
    	</head>
    	<body>
    		<div>hjwblog.com</div>
    	</body>
    </html>
    
    

    使用<link>标签

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>结合方式四</title>
    		<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    	</head>
    	<body>
    		<div>hjwblog.com</div>
    	</body>
    </html>
    
    

    注意

    第三种方式在有些浏览器不能正常显示,一般用第四种方式。

  • 相关阅读:
    Map集合的四种遍历方式
    测试框架:使用SONAR分析代码质量
    什么是蓝绿发布
    linux命令(mac)
    TestNG.xml大全
    Mac端git新增项目
    JavascriptExecutor的UI自动化实战
    git命令及Maven命令
    UI自动化常用代码
    USACO 1.3 Ski Course Design
  • 原文地址:https://www.cnblogs.com/hjw1/p/8971031.html
Copyright © 2011-2022 走看看