CSS
1. 在标签上设置style属性：
background-color:#2459a2; height:48px; ...
2. 编写css样式:
- 可以写在标签的style属性里
<div style="background-color:#2459a2;height:48px;">ff</div>
- 写在head里，style标签中写样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:#2459a2;height:
48px;
}
.c1{
background-color:#2459a2;
height:10px;
}
input[type='text']{width:100px;height:200px;}
</style>
</head>
几种选择器：
- id 选择器：（用的少）知道
<style>
#i1{
background-color:#2459a2;height:
48px;
}
</style>
- class 选择器：（用的最多）最推荐
.名称{
}
<标签 class="名称"> <标签 />
- 标签选择器：要会
div {
}
所有的div都此样式
- 层级选择器 要会
.c1 .c2 div {
}
class=c1 下 class=c2下的div
- 组合选择器（逗号）要会
#c1,c2,c3{}
逗号前后都可以用
- 属性选择器 必会
对选择到的标签再通过属性再进行一次筛选
PS:优先级：标签上的style优先，其他的就按照编写的顺序，就近原则
3.css样式文件也可以写在单独文件中
写在css文件中 用link加载 就可以直接使用css里的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commons.css">
</head>
<body>
<div class="c1 c2">de</div>
</body>
</html>
4.css 的注释 / * --------- * /
5. 边框
宽度：样式：颜色
border：4px ;dotted ;red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">adad</div>
<div style="height:38px;width:80%;border:1px solid red;font-size:16px;text-align:center;line-height:48px;font-weight:1000;">1</div>
</body>
</html>
6.用的比较多的属性：必须要会
height , 高度
width, 宽度 像素，百分比也可以
text-align:center, 水平方向居中
line-height, 垂直方向根据标签高度居中
color, 字体颜色
font-size, 字体大小
font-weight 字体加粗
7. float 应用最广的
< float:right> < float:left>
让标签浪起来，块级标签也可以堆叠
父div管不住的时候，在内部最后面加上：< div style=“clear:both;”></ div>
8.display
display:none; 让标签消失 （后面写js会用 比如弹窗 一开始就是隐藏，点开就显示）
display:inline div变span
display:block span变div
display:inline-block; 具有inline,默认自己有多少占多少
具有block,可以设置高度，宽度，padding,margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red;display:inline">aa</div>
<span style="background-color:red;display:block">aa</span>
</body>
</html>
dispay总结：
行内标签：无法设置高度，宽度，padding,margin
块级标签：设置高度，宽度，padding,margin
9.边距
内边距 padding,
外边距 marigin, marigin:0 auto
margin-left 外边距 距离左边的位置
margin-top 外边距 距离顶部的位置
margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。
说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例子 4
padding:10px;
<body style="margin:0 auto;">
<div class="pg-header">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div>
<div style="width:980px;margin:0 auto;">
<div style="float:left;">
logo
</div>
<div style="float:right;">
<div style="height:50px;width:100px;background-color:#dddddd;">购物车</div>
</div>
</div>
</div>
<div style="background-color:red;">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">
logo
</div>
<div style="float:right;">
<div style="height:50px;width:100px;background-color:#dddddd;">购物车</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
<div style="clear:both;"></div>
</div>
</body>
10.position
(1)fixed => 固定在某个位置
(2)relative + absolute:
absolute模块存放的位置是其父模块relative的相对位置
注意：
height: 400px;
width: 800px;
position: fixed;
background-color: white;
left: 50%;
top:50%;
margin-top: -200px;
margin-left: -400px;
border: 2px solid red;
中 left 50% top 50% 是指div的左上角那个点的位置
要想边框居中 加入 margin-top: -200px;margin-left: -400px;调整位置
<div style="position:relative;">
<div style="position:absolute;">
</div>
</div>
11.opcity：0.5 透明度
12.z-index :层级顺序，谁大在谁上
13.overflow
hidden 隐藏图片
auto 当内容增多时，增加滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top:0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color:white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">b</div>
</body>
</html>
14.backgrond
background-image:url(‘image/4.gif’); # 默认,div大，图片重复访
background-repeat: repeat-y;
position抠洞:
background-position-x:
background-position-y:
background-position: 10px 10px 跟上面x y一样
综合小练习 登录框
在用户名 输入框左侧显示一个用户头像的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--综合小练习 综合了今天所有东西-->
<div style="height: 35px;width: 400px;position:relative;">
<input type="text" style="height:35px;width:370px;padding-right: 30px"/>
<span style="background-image:url(1.png);
height:16px;
width: 16px;
display:inline-block;
position: absolute;
right: 0;
top:10px;"></span>
</div>
</body>
</html>