1.html的回顾
<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:100px; height:100px; background:red;">随便</div>
<!-- 你看不见我，只有程序员能看到我
注释的快捷键 ctrl + /
div 双标签
语义：无意义
CSS的语法
属性名:属性值;
-->
</body>
</html>
2.css的引入方式
<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
<style>
</style>
</head>
<body>
<!-- <div style="width:200px;height:200px;background:green;"></div> -->
<div id="box1" class="cla1" style="width:500px; background:pink;"></div>
<div></div>
<div class="cla1"></div>
<div></div>
<p class="cla1">我是p1</p>
<p>我是p2</p>
<h2 class="cla1">我是H1</h2>
<h2>我是H2</h2>
<!--
1.行间样式的引入
写法：在标签中，写一个style的属性 比如：style="....." 在引号当中，写相应的css样式
缺点：不利于维护，不利于代码重用
优点：优先级最高
2.内部样式表的引入
写法：在head标签里，写一个style的标签，在标签中，通过选择器来控制样式
选择器？
标签名选择器
写法 ：
div {
... css的样式
}
ID选择器
写法：
首先在相应标签中设置一个ID的属性
如： id="id名"
在样式表中，通过
# + id名 {
... css的样式
}
温馨小提示：
id名要以英文字母开头
id名不能重复，是唯一的
class选择器
写法：
首先在相应标签中设置一个class的属性
如：class="class名"
在样式表中，通过
. + class名 {
... css的样式
}
温馨小提示
class名以英文字母开头
优先级
标签名选择器 < class选择器 < id选择器 < 行间样式
优点：加载速度快，不需要去请求服务器
缺点：不利于代码重用
3.外部样式表的引入
写法：在head标签里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器来控制样式
温馨提示.
<link rel="stylesheet" href="css文件的路径">
优点：利于代码重用
缺点：需要加载服务器
-->
</body>
</html>
3.css的基础样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:700px;
height: 500px;
/*background-color: #db7791;*/
/*background-color: rgb(219,119,145);*/
/*background-color: blue;
background-p_w_picpath: url("img/1.jpg");
background-repeat: no-repeat;
background-position: right bottom;*/
background: red url("img/1.jpg") no-repeat;
/*background-p_w_upload: fixed;*/
background-size: 700px 500px;
}
</style>
</head>
<body>
<div></div>
<!--
width 宽
height 高
background 背景
背景色
background-color:颜色值 英文单词 十六进制 rgb
背景图
background-p_w_picpath:url("图片路径")
背景图平铺
background-repeat:no-repeat repeat-x repeat-y
背景图定位
background-position:第一个值(X轴的位置) 第二个值(Y轴的位置);
第一个值: left center right 30px;
第二个值: top center bottom 100px;
复合写法
background: color p_w_picpath position repeat;
背景图滚动
background-p_w_upload:fixed;
背景图尺寸
background-size:第一个值(X轴的比例) 第二个值(Y轴的比例);
温馨小提示：css3的样式 不兼容
-->
</body>
</html>