在head标签中设置style属性：
height:48px;<!-- 代表颜色与位置 -->
编写css样式:
1.标签style属性
2.写在head里面，style标签中写样式
- id 选择器
#i1{background-color:red;height:48px;}
- class选择器
.名称{background-color:red;height:48px;}
<标签 class="名称"></标签>
- 标签选择器
div{background-color:red;height:48px;}
当有此标签时，所有div上都设置此样式
- 层级选择器(空格)
.c1 .c2 div{background-color:red;height:48px;}
先找到包含c1样式的标签，在该标签下找到含c2样式的标签，在该标签下找到div标签并设置为此样式
- 组合选择器(逗号)
#c1,.c2,div{background-color:red;height:48px;}
c1,c2,div均为该样式
- 属性选择器
对选择到的属性再进行一次筛选
.c1[n="sun"]{background-color:red;height:48px;}
即对包含c1的标签检查其是否含有n="sun"一项，若有才设置为该属性
ps:
优先级，标签上style优先，其它按编写顺序，越往下越优先(就近原则)
注:css也可以写在单独文件中
<link rel="stylesheet" href="style.css" />
3.注释
/* */
4.边框
dotted表示虚线，solid表示实线
- 宽度，样式，颜色 (border:4px dotted red)
-border-left,border-right,border-top,border-bottom
5.
height 高度 像素
width 宽度 像素 百分比
text-align:center 水平方向居中
line-height 垂直方向根据标签高度决定垂直方向的位置
color 字体颜色
font-size 字体大小
font-weight 字体加粗
6.float
用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
<div style="clear:both"></div>clear:both该属性的值指出了不允许有浮动对象的边。通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。
7.display
display:none; 让标签从无到有
display:inline; 如果是块级标签，则变为行内标签
display:block; 如果是行内标签，则变为块级标签
display:inline-block; 具有inline，默认自己有多少占多少;具有block属性
注: 行内标签:无法设置高度，宽度，padding，margin
CSS补充
position:
a.fixed => 固定在页面的某个位置(bottom:0;right:0为固定在右下角)
b.relative + absolute
<div style="position: relative; width:500px; height:200px;border:1px solid red;margin: 0 auto;">
<div style="position:absolute;left:0;bottom:0;width:50px;height:50px;"></div>
</div>
opcity:0.5(只能为0到1之间) 代表透明度
z-index:层级顺序，谁最大谁第一个显示
overflow:hidden(超出的部分隐藏),auto(超出的部分显示滚动条)
<div style="height:500px;width:500px;overflow:hidden">
<img src="1.jpg" />
</div>
hover 表示当鼠标移动到当前标签上时，以下css属性才生效
.menu:hover{
background-color:blue
}
background-image:url{1.jpg};#默认,div大，图片会重复
background-repeat:no-repeat(repeat-x,repeat-y)决定是否重复，以及在哪个方向上重复
background-position-x:
background-position-y:
