一、HTML CSS JavaScrip的关系
HTML是结构,CSS是样式,JavaScript是行为。一般CSS不会单独存在,在HTML中做修饰成分。
二、CSS
1、csacading style sheet的缩写——层叠样式表
2、CSS的保存方式与HTML相同,都是文件名+.css
三、引入CSS
①行间样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:100px;
height:100px;
background-color:red;">
</div>
</body>
</html>
②页面级css
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> /*告诉浏览器我这里面写的是css代码*/
div {
width:100px;
height:100px;
background-color:blue;"
}
</style>
</head>
<body>
<div></div>
</body>
</html>
③外部css文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css"> -->
</head>
<body>
<div></div>
</body>
</html>
注:
1、href里的填写方式也存在绝对路径和相对路径之说,与引入图片的标签相似。
2、标签的快捷方式:英文+快捷键Tab
3、width:100px;表示宽是100像素
height:100px;表示高是100像素
background-color:blue;表示背景颜色是蓝色
4、像素(px):位图的一幅图像,是由若干个点组成的,每个点就叫做像素,.图像宽度上的点数乘以高度上的点数,就是这个图像的总像素,一幅图像点越多,图像就越大.