本文对css只做基本介绍
具体可参考为w3cschool的学习：http://www.w3school.com.cn/css/index.asp
1.css层叠样式表
CSS（Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言）或者XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
css一共有三种常见的的存在形式：
（1）元素内联
在html的body段中，直接在标签头部属性块引入
eg：
<div style="background-color: green; font-size: 24px; color: red">元素内联</div>（2）页面嵌入
在html页面的head段中，集中引入style块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.head{
background-color: red
}
.middle{
background-color: yellow;
font-size:34px;
width: 300px;
height:300px;
}
</style>
</head>
<body>
<div class="head">欢迎</div>
<div class="middle">你好</div>
</body>
</html>（3）外部引入
将css单独写一个文件，并将整个文件引入html中
css文件：div.css
.head{
background-color: blue;text-align: center;padding: 20px; }html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左部区域</h1>
</div>
<div class="middele">
<h1>页面中间区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
<!-- 样式：表现的形式，字体的大小，颜色、背景颜色、布局 -->
</body>
</html>css就是对html代码的body段中的各种标签进行装饰的语言，如果我们要对某一个标签进行装饰，首先要做的就是：
（1）、定位：找到对应的标签
（2）、样式：通过修改标签对应的属性
2、选择器
选择器就是css用来定位的工具
例如
<body>
<div class="head">欢迎</div>
<div class="middle">你好</div>
<div class="flooter1" id="i4">11111111</div>
<div class="flooter2" >11111111</div>
<input type="text" name="1a">
<p>hello,hello</p>
</body>
1、标签选择器
<style type="text/css"> p{background-color: green}</style>标签选择器会对指定的标签类型进行样式装饰。
2、id选择器：
<style type="text/css">#i4{background-color: pink}</style>3.class选择器：
<style type="text/css">
.head{
background-color: red
}
.middle{
background-color: yellow;
font-size:34px;
width: 300px;
height:300px;
}
</style>4.属性选择器：
<style type="text/css">input[type="text"]{background-color: purple}</style> <style type="text/css">input,h1,h2{background-color: red}</style>
3、css常用样式及属性
width：宽度，可用于像素设定固定宽度，也可用于百分比；
width:200px
width:100%height:高度，一般使用像素设置，或者不设置，让其根据内容的多少自适应；
因为浏览器有宽度，但是高度没有限制，理论上可以无限，因此width可以使用百分比，而height不可以
font字体：
size：设置大小，以px为单位；
weight：粗细，100-800不等，可以自行测试；
family：设置字体
<input type="button" name="bb" value="百度一下，你就知道" style="font-size: 20px; font-family: serif;font-weight: 600">background背景
background-color 背景色
背景色的设置有三种方式：
background-color:red;
background-color:#ff0000;
background-color:rgb(43 23 0);background-image 背景图片
<a href="http://wwww.baidu.com" style="background-image: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2832677122,3463918518&fm=173&app=25&f=JPEG?w=218&h=146&s=76A2A5E50E730E925F2034B303008010);">跳转到百度首页去</a>背景图像的位置是根据background-position属性设置的，如果未设置位置，则图片会被放在元素的左上角
4、border：框体
border:1px solid red;//1像素 实线 红色边框
框体除了solid实线，还有dashed、double等
input标签是自带1px的边框，也可以通过设置0px来让input的默认边框消失
5、margin：外边距
css外边距的属性是顺时针走的，也就是：top、right、bottom、left
设置p元素的4个边距：
p
{
margin:2cm 4cm 3cm 4cm;
}浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有浏览器都支持margin属性
定义和用法
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
eg1:
margin：10px 5px 15px 20px;·上外边距是 10px
·右外边距是 5px
·下外边距是 15px
·左外边距是 20pxeg2：
margin:10px 5px 15px;·上外边距是10px
·左右外边距均为5px
·下外边距为15pxeg3:
margin:10px 20px;·上下外边距为：10px;
·左右外边距为：20px；eg4:
margin：10px·上下左右外边距均为10px；可能的值
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
6、padding：内边距
设置 p 元素的 4 个内边距：
p
{
padding:2cm 4cm 3cm 4cm;
}浏览器支持
所有浏览器都支持 padding 属性。
定义和用法
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;
- 所有 4 个内边距都是 10px
可能的值
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
| inherit | 规定应该从父元素继承内边距。 |