css 有三种形式的写法：
- 直接在标签里写入style样式
- 在<head></head>里写入<style></style>样式
- 直接创建.css 文件通过<link/>引入css文件
<html>
<head>
<title></title>
<link rel="stylesheet" href="css文件名.css"/> <!--把创建的css文件中所有的样式都引用到了本文件-->
<style>
<!--cc为名字，. 代表class-->
.cc{
color:red;
font-size:18px;
}
.ccd{
color:#ddd;
}
</style>
</head>
<body>
<div id="122" style="color:red;font-size:15px;"> 第一种 </div>
<div class="cc ccd"> 第二种 </div> <!--优先级：当同时引用两个样式时class=“cc ccd”，style里越往后优先级越高-->
<div class="bb">第三种</div>
</body>
</html>
选择器 :
- 标签选择器
- 把HTML中‘所有’的a标签应用此样式
a{ color:red; }
2. 把input类中type=“text”的标签都应用这个样式
input[type="text"]{ background-color:black; color:white; }
- ID选择器
例：id 是uu的标签应用这个样式
<div id="uu"> 我是谁我在哪儿 ？.？ </div>
#uu{ background-color:black; color:white; }
- 层级选择器
例:
<div class='c'>
<a>
<div>
<span class='d'></span>
</div>
<span class = 'd'></span>
</a>
</div>
<span class='d'></span>
.c a div .d{ 此样式只应用于c样式的标签下的a标签下的div标签下的标签的d样式 (若省略div则是a标签下的所有d样式都被应用) 若a标签中有id=i8，则此处的css样式中的a可写为#i8 }
- 组合选择器
例 : 如下a样式和p样式可写为组合样式a,p{ }
a{ } p{ } a,p{ a标签或p标签都可以应用这个样式 也可以和层级选择器一起应用 }
<!--background-->
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-image：url("图片路径") |
如果没有指定图片宽度，图片默认会平铺；如果指定的高度大于图片高度，图片也会默认向下平铺 |
| background-repeat | repeat-x;不允许在x轴重复，repeat-y;不允许在y轴重复,no-repeat;不允许重复 |
| background-position：0px 119px; | 如望远镜，随着望远镜的移动看见的景物也不同 |
<!--border-->
线的粗细 实线虚线 线的颜色
<div style="border: 5px dotted #3D3127;"></div> dotted:虚线 solid : 实线
border-left:左边框 border-right：右边框 border-top:上边框 border-bottom：下边框
<!--display-->
参数：
| none | 隐藏标签 |
| block | 把块级标签变为内联标签 |
| inline | 把内联标签变为块级标签 |
<!--cursor-->
参数：
| pointer | 鼠标移动到标签变为小手 |
| move | 鼠标移动到标签变为十字拉拽 |
| url('图片路径') | 鼠标移动到标签变为图片 |
<!--float-->
float: left; right; 在层级标签中一旦子类标签被设置为float，则父标签将不会被撑起来了
解决方法一：
<html>
<head>
<title> </title>
</head>
<body>
<div style='background-color:blue'>
<div style='background-color:red;float:left;20%;'>123</div>
<div style='background-color:green;float:left;50%;'>123</div>
<!----width 的百分比是相对于父标签进行划分的--------->
<div style='background-color:green;float:right;10%;'>123</div>
<div style='clear:both;'>这里可以什么都不写，但是必须有，
相当于把飘起来的标签拉回来了,父标签里的background才会在剩下的20%显现出来 </div>
</div>
</body>
</html>
解决方法二：利用after，before伪类给内容前后插入数据
<html>
<head>
<title> </title>
<style>
.c1{
float:left;
width:20%;
background-color:red;
}
.c2{
float:right;
width:50%;
background-color:green;
}
.clearfix:after{
content:'.';
clear:both;
visibility:hidden; <!-- 把内容‘ . ’隐藏 -->
}
</style>
</head>
<body>
<div class='clearfix' style='background-color:#45e8e7;'>
<div class = 'c1'>342</div>
<div class = 'c2'>33422</div>
</div>
</body>
</html>
<!--position-->
参数：
| fixed | 固定位置 |
定位在窗口的某一位置，fixed-top 离'窗口'顶部距离; fixed-left 离左边距离; fixed-bottom 离下面的距离; fixed-right 离右边的距离 |
| absolute | 绝对位置 | 一次固定在窗口的指定位置和relative合用 |
| relative | 相对位置 | 本身不产生任何效果，和absolute合用 |
小例子:
<html> <head> <title> </title> </head> <body> <div style='height:2000px;background-color:pink'> <div style='position:relative;background-color:#aeafee;height:300px;300px;float:left;'> <div style='position:absolute;bottom:0px;right:0px;'>定位</div> <!-- ‘定位’定位在了blue框里的右下角 --> </div> <div style='position:fixed;bottom:50px;right:50px;'>返回顶部</div><!--'返回顶部'定位在’窗口‘的右下角--> </div> </body> </html>
<!--透明度:opacity-->
透明度可设置范围为：0-1，注：ie浏览器设置透明度用filter:alpha(opacity=sqlN)，其中sqIN设置范围：0-100
小例子：通过fixed固定设置两层div（注： <!-- z-index：层级数，数字越大层越上-->）
<html> <head> <title> </title> <style> .c{ z-index:10; position:fixed; top:0px; left:0px; bottom:0px; right:0px; background-color:black; color:white; } .c1{ z-index:12; position:fixed; top:0px; left:0px; bottom:0px; right:0px; background-color:red; color:white; opacity:0.3; } </style> </head> <body> <div class='c'>ihbk</div> <div class='c1'>sfadsdfds</div> </body> </html>
<!--边距padding-->
padding ： 内边距 // margin：外边距
padding: padding-left:左边距; padding-right:右边距; padding-bottom: 下边距; padding-top: 上边距;
margin: margin-left:左边距; margin-right:右边距; margin-bottom: 下边距; margin-top: 上边距;
padding参数设置的三种方式：
- padding：20px; 把上下左右边距都设置为20px;
- padding:10px 20px; 把上下边距设置为10px; 左右边距设置为20px;
- padding:10px 20px 30px 40px; 把上边距设置为10px; 把左边距设置为20px; 把下边距设置为30px; 把右边距设置为40px;
小例子：
<html> <head> <title> </title> <style> .c{ height:70px; border:1px solid red; } .c1{ height:50px; background-color:pink; margin-top:10px; } </style> </head> <body> <div class='c'> <div class='c1'> ihbk </div> </div> </body> </html>