CSS入门

CSS样式表基础教程

最新推荐文章于 2024-12-20 17:43:02 发布

不是很喜欢打码的小手

最新推荐文章于 2024-12-20 17:43:02 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_42230478/article/details/80941228

HTML 决定页面的骨架

CSS 层叠样式表美化页面提高代码的复用性

CSS的简单语法：在一个style标签中，去编写CSS内容，最好将style标签写在这个head标签中

<style>
    选择器｛
        属性名称：属性的值；
        属性名称2：属性的值；
	...
    ｝
</style>

CSS选择器：帮助我们找到我们要修饰的标签或元素

元素选择：

 元素的名称｛
     属性名称：属性的值；
     属性名称2：属性的值；
 ｝

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		span{
			color:blue;
		}
	</style>
</head>
<body>
	<span>你好啊 </span>
</body>
</html>

ID选择器：

以#开头
#ID的名称｛
        属性名称：属性的值；
        属性名称2：属性的值；
｝

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		#div1{
			color:blue;
		}
		#div2{
			color:red;
		}
	</style>
</head>
<body>
	<div id="div1">苹果</div>
	<div id="div2">草莓</div>
	<div>桃子</div>
	<div>白菜</div>
	<div>茄子</div>
</body>
</html>

类选择器：

以.开头
.类的名称｛
        属性名称：属性的值；
        属性名称2：属性的值；
｝

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
		.shuiguo{
			color:blue;
		}
		.shucai{
			color:red;
		}
	</style>
</head>
<body>
	<div class="shuiguo">苹果</div>
	<div >草莓</div>
	<div>桃子</div>
	<div class="shucai">白菜</div>
	<div>茄子</div>
</body>
</html>

CSS的引入方式：

外部样式：通过link标签引入一个外部的CSS文件

内部样式：直接在style标签内编写CSS代码

行内样式：直接在标签中添加一个style属性，编写CSS样式

外部样式演示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="04Demo.css" />
</head>
<body>
	<div class="shuiguo">苹果</div>
	<div class="shuiguo">草莓</div>
	<div class="shuiguo">桃子</div>
	<div class="shucai">白菜</div>
	<div class="shucai">茄子</div>
</body>
</html>

同级目录的04Demo.css文件

@charset "UTF-8";
.shuiguo{
	color:blue;
		}
.shucai{
	color:red;
}

浮动：float属性 left、right

清除浮动：clear left、both、right

CSS入门

HTML 决定页面的骨架

CSS 层叠样式表 美化页面提高代码的复用性

外部样式演示

CSS 层叠样式表美化页面提高代码的复用性