css

CSS

在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...

编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}

- class选择器 ******

.名称{
...
}

<标签 class='名称'> </标签>

- 标签选择器
div{
...
}


所有div设置上此样式

- 层级选择器（空格） ******
.c1 .c2 div{

}
div span{
}
- 组合选择器（逗号） ******
#c1,.c2,div{

}

- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
input[type='text']{ width:100px; height:200px; }
.c1[n='alex']{ width:100px; height:200px; }

PS:
- 优先级，标签上style优先，编写顺序，就近原则

2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />

3、注释
/* */

4、边框
- 宽度，样式，颜色 (border: 4px solid red;)
- border-left

5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗

6、float
让标签浪起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>

7、display
display: none; -- 让标签消失
display: inline;--行内元素
display: block; --块级元素
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin


8、padding margin(0,auto)
padding 内边距 padding-top padding-right padding-bottom padding-left 离标签上右下左的距离
如标签有文字内容，不加上padding的话，文字和标签上部没有间隔，
加上padding：50px，文字离标签上部50px。如果之前标签的height为50px，那么现在签高100px。
margin 外边距 margin-top margin-right margin-bottom margin-left 距离浏览器上右下左的距离
margin：0 auto（上下边距0，左右自动，比如标签宽度900px，浏览器980px，此时标签离浏览器左右分别有40px的距离），
也可以写成，也可以写成 margin：0 auto 0 quto（上右下左，顺时针方向）
标签离


9、position 层级标签
position：fixed 标签在当前窗口的位置，标签会随着窗口的拖动实时改变位置。top、right、bottom、left分表加上像素值，标识标签离上右下左的位置
如："position:fixed;right:0;bottom:0;" 标签将始终位置浏览器窗口的右下角。
也可以使用百分比，top、right、bottom、left的百分比都是相对浏览器宽度的百分比
position：absolute 父级（或者父级的父级等）标签有pasition属性，则标签的pasition：absolute表示子标签相对
于父标签的位置
若父级（或者父级的父级等）标签没有pasition属性，则标签的pasition：absolute表示标签相对
body标签的位置
一般使用时搭配relative使用：<div style="position:relative"></div>
<div style="position:absolute"></div>
z-index：只有在标签含有pasition属性才有用，用于设置元素的堆叠顺序。数值越大离用户越近。


10、opacity 设置标签的透明度，范围0-1：0表示完全透明，1表示正常显示，0-1透明度依次减小，如opacity:0.5。

11、overflow 定义溢出内容区的内容处理逻辑
overflow:visible 默认，内容不修剪，按照内容的正常大小显示内容
overflow:hidden 内容被修剪，其余内容不可见
overflow:auto 内容被修剪，但浏览器会以滚动条的形式以便查看内容
12、background-img 背景图片
使用：background-img：url('图片地址');background-repeat:no-repeat;(图片不重复)
background-repeat:repeat(默认为repeat，x、y方向重复)
background-repeat:no-repeat(不重复)
background-repeat：repeat-x（x方向重复）
background-repeat：repeat-y（y方向重复）
background-position-x:像素（x方向移动，正数右移，负数左移）
background-position-y:像素（y方向移动，正数下移，负数上移）
13、hover 鼠标放上后css内容才生效