css定义方式

最新推荐文章于 2021-12-09 09:48:48 发布

hoho_12

最新推荐文章于 2021-12-09 09:48:48 发布

阅读量2.8k

点赞数 1

分类专栏： css 网页设计与制作文章标签： css

本文链接：https://blog.youkuaiyun.com/hoho_12/article/details/52105945

版权

网页设计与制作同时被 2 个专栏收录

13 篇文章

订阅专栏

css

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<!--
        	type="text/css"表示这个style标签中的内容是css代码
        -->

		<link type="text/css" href="css/first.css" rel="stylesheet" />

		<style type="text/css">
			div {
				background: #00ff00;
			}
		</style>
		
		<style type="text/css">
			@import url("css/first.css");
		</style>
	</head>

	<!--
    	
    	描述：css层叠样式表
    	用处：用来设置html元素的显示效果。（做美化）
    	
                    如何定义css样式表（定义方式）
    	1. 直接在 html元素的style属性中定义
    	style="width: 100px;height: 200px; background: #FFD596;"
    	
    	2. 在html的<head></head>中使用style标签定义
    	<style type="text/css">
			div {
				background: #00ff00;
			}
		</style>
    	  
    	3.在外部css文件中定义样式表，然后引入到html页面
    	如何引入？
    	推荐使用link
    		在加载html文件的时候，就会把link所引入的css文件拷贝到html中，
    	import会在使用时，才会将所import的css文件拷贝过来。
    	延迟：标签内容显示了，但是没有样式。
    	
    		1.link：相当于将外部css文件中的代码直接拷贝到link所在的位置
    	<link type="text/css" href="css/first.css" rel="stylesheet" />
    		
    		顺序？
    		先读取到的先起作用
    		
    		2.在style标签中使用@import url("路径");
    		<style type="text/css">
				@import url("css/first.css");
			</style>
    	
    	
    	推荐使用？
    		推荐使用外部css文件。
    		1. 复用性强
    		2. 代码阅读性强
    -->

	<body>

		<div style="width: 100px;height: 200px; background: #FFD596;">

		</div>

		<div>
			这是第二个div
		</div>

		<div>
			这是第三个div
		</div>
	</body>

</html>