本文将简单回顾一下CSS基本用法
CSS是层叠样式表语言
HTML依赖 CSS依赖HTML
在HTML中使用CSS的三种方式
1.内联定义 在标签内使用对象的style属性
<p style="margin-left: 0.5in;margin-right: 0.5in">这一行内联定义</p>
内联定义举例
<div style="width: 300px;height: 300px;background-color: red;
border-color: chartreuse;border-style: solid">
</div>
2.在head标签中使用style块 样式块方式
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
</style>
请看下面的举例
<p id="p1">你好2022</p>
<div></div>
<div></div>
<div></div>
<span class="c">123</span>
<p class="c">123456</p>
三种选择器
<style type="text/css">
/*
这是CSS的注释
id选择器 #id名
标签选择器 标签名
类选择器 .类名
*/
#p1{
color: red;
}
div{
background-color: darkcyan;
border : 1px solid red;
width: 100px;
height: 100px;
}
.c{
color: deepskyblue;
}
</style>
3.链入外部样式表文件 将样式写到单独css文件中 易维护
<link type="text/css" rel="stylesheet" href="css的路径">
请看下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<a href="https://www.baidu.com">1</a>
</body>
</html>
a{
color: red;
text-decoration: none;
/*删除下划线*/
position: absolute; /*绝对定位*/
left: 100px;
top: 100px;
}