前端速成：双月Java之旅（week2）_day4

最新推荐文章于 2024-10-17 18:27:08 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 18:27:08 发布

阅读量159

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125835757

版权

本文介绍了CSS的三种引入方式：外部样式、内部样式和行内样式，并通过实例展示了它们的用法。外部样式通过link标签引用外部CSS文件，内部样式在HTML的style标签内定义，行内样式直接在元素内设置。接着讨论了CSS浮动属性，包括left和right，以及如何利用float实现流式布局。同时提到了clear属性用于清除浮动，防止内容被覆盖。

摘要由CSDN通过智能技术生成

CSS的引入方式有外部样式、内部样式和行内样式。

外部样式是在HTML文件的同级目录下创建一个CSS文件，然后在HTML中直接调用外部CSS文件，即通过link标签引入一个外部的CSS文件。格式为<link rel="stylesheet" href="文件.CSS"/>。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="style1.css" /> />
	</head>
	<body>
		<div0>张三</div0>
		<div1>李四</div1>
		<div2>王五</div2>

	</body>
</html>

div0{
    font-size: 10px;
    color: blue;
}
div1{
	font-size: 20px;
	color: red;
}
div2{
	font-size: 30px;
	color: green;
}

内部样式则是在HTML文件内部通过<style>标签调用内部CSS样式，直接在HTML内对CSS进行修改。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
    		div0{
    			font-size: 10px;
    			color: blue;
    		}
    		div1{
    			font-size: 20px;
    			color: red;
    		}
    		div2{
    			font-size: 30px;
    			color: green;
    		}
		</style>
	</head>
	<body>
		<div0>张三</div0>
		<div1>李四</div1>
		<div2>王五</div2>
	</body>
</html>

行内样式则是在每一行对需要修饰的内容进行具体操作，可以通过修改<div>标签中的style属性实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div0 style="font-size: 10px;color: blue;">张三</div0>
		<div1 style="font-size: 20px;color: red;">李四</div1>
		<div2 style="font-size: 30px;color: green;">王五</div2>

	</body>
</html>

后面学的是CSS浮动。即在<div>标签内的style属性中使用float属性，常用有left和right属性，可以根据页面宽度自动调节行内容。流式布局具有自动换行的功能，float属性可以很方便的适应页面。但是浮动的元素会脱离正常的文档流，在正常的文档流中不占空间，可能会覆盖文档内容。clear属性可以用来清除浮动，clear：both两边都不允许浮动，clear：left，不允许向左边浮动，clear：right，不允许向右边浮动。