css简单介绍
css（层叠样式表）用于页面布局以及样式
格式
选择器{ 属性名:值; }
例：p{ /* 选择器*/
font-size: 12px; /* 字体大小 */
color: red; /* 字体颜色 */
}
注释
格式：/* 注释内容,可跨行*/
添加css方法
1.行内样式
<p style="font-size:12px;color:red;">行内样式</p>
2.内嵌样式
在head标签内添加
<head>
<style>
p{
font-size:12px;
color:red;
}
</style>
</head>
注
1）每个页面都需要定义
2）适合文件少，样式代码少的情况
3）网站有很多页面，则文件变大，后期维护难度大
3.外部引用样式
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
注
1）页面结构html与样式css完全分离，有利于维护
2）样式改变只需改css文件即可
3）同一页面可以引用多个css文件
样式优先级
1.多重样式可以层叠覆盖
2.样式优先级按照“就近原则”
3.行内样式>内嵌样式>引用样式>浏览器默认样式
css选择器类型
1.标签选择器（标签）：div...
2.类名选择器（.类名）: .logo...
3.id选择器（#id名）：#nav...
4.嵌套选择器（标签名 子集）：p span...
5.全局选择器：*
6.集体选择器（以上五种选择器任意一个,以上五种选择器任意一个）：div,p 表示不同标签拥有的共同样式
7.:nth-child(odd/even)奇偶选择器：li:nth-child(odd) 奇数的li,li:nth-child(even) 偶数的li
混合使用id,class
<p id="one" class="one1 one2 one3">内容</p>
标签id属性有且只有一个值，且页面内不可重复使用，class属性多个使用需要用空格隔开使用。
文本与文字样式
单位
px(像素)，em(自动适应所使用的字体，1em表示1字符，2em表示2字符)，%（百分比）
颜色
颜色名（英文格式），rgb(0,0,0)，rgb(100%,0%,0%)，rgba(0,0,0,0)其中a表示透明度，#ffffff十六进制。
文本
| 属性 | 描述 | 值 |
|---|---|---|
| color | 字体颜色 | 颜色（颜色名，rgb,rgba,十六进制） |
| letter-spacing | 字符间距 | px,em(且可以为负数) |
| line-height | 行高 | px,em,%（一般设置为所在行高用来垂直居中） |
| text-align | 水平对齐方式 | center,left,right,justify(全行排满) |
| text-indent | 首行缩进 | px,em,%(且可以为负数) |
| text-decoration | 装饰线 | none(无),overline(上划线),underline(下划线),line-through(删除线) |
字体
| 属性 | 描述 | 值 |
|---|---|---|
| font | 设置字体所用属性 | italic bold 12px/2em "微软雅黑"(斜体 加粗 字体大小/行高 采用字体) |
| font-size | 字体大小 | px,em,% |
| font-weight | 字体粗细 | bold,normal,700 |
| font-style | 字体样式 | italic(斜体) |
| font-family | 字体 | "微软雅黑" |
背景
| 属性 | 描述 | 值 |
|---|---|---|
| backgorund | 背景 | 颜色 图片 repeat |
| backgorund-color | 背景颜色 | 颜色名,rgb,rgba,十六进制 |
| backgorund-image | 背景图片 | url("image/logo.png") |
| backgorund-repeat | 字体样式 | no-repeat,repeat,repeat-x,repeat-y |
超链接
| 属性 | 描述 |
|---|---|
| a:link | 未被访问的链接样式 |
| a:visited | 被访问过的链接样式(在当前页刷新不会变为未被访问的样式) |
| a:hover | 鼠标移入链接的样式 |
| a:active | 被点击时的链接样式 |
: 表示伪类选择器，a:hover的样式必须放在a:link和a:visited后面且a:active则必须位于a:hover后面，否则不起作用
列表
| 属性 | 描述 | 值 |
|---|---|---|
| list-style | 列表样式 | 标志方式 标志位置 列表标志图片（若有列表标志图片则方式不显示，显示的为标志图片） |
| list-style-image | 列表标志图片 | url(images/1.png) |
| list-style-position | 列表标志位置 | inside(文本内),outside(文本外) |
| list-style-type | 列表标志方式 | disc(实心圆),cricle(空心圆)... |
表格
| 属性 | 描述 | 值 |
|---|---|---|
| width | 表格宽度 | 标志方式 标志位置 列表标志图片（若有列表标志图片则方式不显示，显示的为标志图片） |
| height | 表格高度 | px,em,% |
| border | 表格边框 | 边框宽度 边框样式 边框颜色 |
| border-collapse | 表格边框合并 | collapse(合并) |
布局-盒子模型（元素是什么样）
页面中区域，图片，导航，列表，段落等都可以看成盒子，故页面中的所有元素都可以作为盒子，占据一定空间。
盒子模型组成部分
1.content 内容（width 宽度，height 高度）
2.padding 内边距
3.border 边框
4.margin 外边距
盒子的实际宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)+(margin-left)+(margin-right);
盒子的实际高度=height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)+(margin-top)+(margin-bottom);
overflow属性
当内容超出盒子时所采用的属性。
overflow:hidden; 超出部分隐藏
overflow:scoll; 盒子显示滚动条
overflow:auto; 超出盒子显示滚动条，未超出不显示
边框-border属性
盒子的边框。
| 属性 | 描述 | 值 |
|---|---|---|
| border | 盒子边框 | 边框宽度 边框样式 边框颜色 |
| border-width | 边框宽度 | px,em |
| border-style | 边框样式 | dashed(虚线)，solid(实线) |
| border-color | 边框颜色 | 颜色名，rgb,rgba,十六进制 |
内边距-padding 属性
设置浏览器默认设置(内边距，外边距为零)：
*{
marign: 0;
padding: 0;
}
| 属性 | 描述 |
|---|---|
| padding | 盒子内边距 |
| padding-top | 内边距上边距离 |
| padding-right | 内边距右边距离 |
| padding-bottom | 内边距下边距离 |
| padding-left | 内边距左边距离 |
padding:10px 20px 15px 25px;
表示内边距上边距离为10px,内边距右边距离为20px,内边距下边距离为15px,内边距左边距离为25px
padding:10px 20px 15px;
表示内边距上边距离为10px,内边距右边距离以及左边距离为20px,内边距下边距离为15px
padding: 10px 20px;
表示内边距上边距离以及下边距离为10px,内边距右边距离以及左边距离为20px
外边距-margin 属性
水平居中:
margin:0 auto;
垂直方向外边距会合并，取值大的边距
| 属性 | 描述 |
|---|---|
| margin | 盒子外边距 |
| margin-top | 外边距上边距离 |
| margin-right | 外边距右边距离 |
| margin-bottom | 外边距下边距离 |
| margin-left | 外边距左边距离 |
margin:10px 20px 15px 25px;
表示外边距上边距离为10px,外边距右边距离为20px,外边距下边距离为15px,外边距左边距离为25px
margin:10px 20px 15px;
表示外边距上边距离为10px,外边距右边距离以及左边距离为20px,外边距下边距离为15px
margin: 10px 20px;
表示外边距上边距离以及下边距离为10px,外边距右边距离以及左边距离为20px
注：盒子内用图片表示列表时，需要设置盒子的font-size:0;(原因：浏览器默认图片会有一个文字的浏览器默认空白距离)
html:
<div id="list">
<img src="1.png" alt="1" />
</div>
定位（元素在什么位置）
文档流 flow
通过display属性来进行转换
display:none; /*不显示元素*/
display:inline; /* 转换为行内元素，有间距，从左到右输出一行*/
display:inline-block; /*转换为行内块元素，不独占一行，具有块元素的属性*/
display:block; /*转换为块元素，独占一行，从上到下输出一行*/
浮动定位 float
脱离文档流
float:left;/*左浮动*/
float:right;/*右浮动*/
float:none; /*不浮动*/
clear:left; /*清除左浮动*/
clear:right;/*清除右浮动*/
clear:both;/*清除左右浮动*/
层定位 layer
精准定位到具体位置
position:fixed; /*固定定位,位置相对lui浏览器窗口*/
position:reletive; /*相对定位，位置相对直接父元素，虽然脱离正常文档流，但是原位置还存在*/
position:absolute; /*绝对定位，位置相对于有position属性且值为reletive或absolute的父元素，脱离文档流，原位置不存在（若一层层找不到position属性的父元素，位置是相对于body定位的）*/
z-index:99; /*层显示，值越大越在上层，在设置position属性的时候有效*/
设置position属性后，通过改变top,bottom,left,right值来确定位置。
top:0;
right:0;
bottom:0;
right:0;
