css1

css：层叠样式表
一 .简单样式
font-size:10px ：表示设置字体大小为12px(设置字体大小)
width:10px :表示宽度为10px
height:10px :表示高度为10px
background-color: red表示背景颜色为红色

字体系列：
font-famaly:“宋体”,“微软雅黑”：表示将字体首先设置为宋体，若没有，则再默认设置为微软雅黑（最好使用英文）
font-size:10px 将字体设置为10px
font-weight:bold:表示将字体加粗 bolder:更粗 lighter:表示细一点的也可以直接使用数字（实际开发中更喜欢使用数字，默认的nomal是400，700bold）
font-style:nomal italic表示文字样式是正常的还是斜体
（
上面三个可以复合使用：font:italic 700 16px “微软雅黑” 里面的顺序一定不能乱（font-style font-weight font-size font-famaly不能颠倒顺序）
）
文本系列：
color:red：表示字体颜色为红色
text-align:center 表示让水平居中（还有left,right属性）文本文字居中显示（对齐文本）
text-decoration:none underline none line-through 装饰文本，表示文本下面的一条线的位置
text-indent: 20px表示首行往右缩进20px距离 文本的第一行缩进（一般使用em作为单位，一个em表示一个文字大小）
line-heighe:26px 表示每行文字之间的距离，行与行之间的距离为26px(行间距 = 上间距 + 文本高度 + 下间距，设置的行间距是上间距和下间距，文本高度一般是不变的一般是16px)

调整图片的位置一般是使用图片的父级标签例如

这个时候你要调整p的位置即可，不能调img的位置
选择器分类：
1.基础选择器
例如：p{
font-size:10px //表示将p选择器里面的字体全部设置成大小为10px
}
p:表示选择器，将所有的p选择器里面的内容设置同样的大小都为10px
2.类选择器
使用.作为标识符
例如：

• 
  
• zut
• 
  
• RB
• 
  

表示将字体调为红色
样式#定义 结构id调用 只能调用一次 别人切勿使用
4.通配符选择器
使用*来定义，表示选取所有的元素，表示所有的元素都是用该样式
*{
color：red
}
表示所有的样式全部是红色
css的引入方式：
1.内部样式表使用

day2
1.后代选择器
选择父标签下的子标签，例如
ol li {
color:red;
}
这是将ol里面的li标签内容设置为红色，即 li 标签是ol 的后代
也可以是类里面的后代（可以是任意的基础选择器）
例如
.nav li a{
color :red;
}
2.子选择器
选择最近一级的孩子，必须是亲儿子
例如

我是亲儿子

我是孙子

使用格式
.nav>a{
color:red
}
这个时候只有”我是亲儿子“才会变成红色，”我是孙子不会变成红色“
3.复合选择器-并集选择器
div,p{
color:red;
}
表示div和p里面的元素都改为红色，两个标签里的元素都改为红色
并集选择器使用，分割
4.伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，使用：来表示
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
例如
a:link{
color:red;
}
表示未被选择的a链接的颜色是红色
a:visited{
color:orange;
}
表示访问过的a链接是橘色
a:hover{
color:red;
}
表示鼠标一经过a链接的颜色就变为红色，选择鼠标经过的链接
a:active{
color:red;
}
表示鼠标点击下去别松开，活动的链接颜色为红色（这四个一般顺序不能颠倒LVHA）

:class类名也可以直接设置某个元素的样式伪类

:focus伪类选择器
input:focus{
background-color:red
}
表示谁获得光标谁的背景颜色就是红色（聚焦）

块级元素：

• 1. 
     特点
     1.自己独占一行
     2.高度 宽度 外边距以及内边距都可以控制
     3.宽度默认是容器（父级宽度）的100%
     4.是一个容器及盒子，里面可以放行内或者块级元素
     注意：文字类元素不能放块级元素例如

     标签里面不能放块级元素

行内元素：
(最典型也称为内联元素)
特点：
1.相邻元素在一行，一行可以显示多个
2.高宽直接设置是无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素
注意：链接里面不能再放链接，特殊情况链接里面可以放块级元素，但是给转换一下块级元素最为安全

行内块元素
同时具有块级元素和行内元素特点
特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白嫌隙，一行可以显示多个（行内元素特点）
2.默认高度就是它本身的内容高度（行内元素特点）
3.高度，行高，外边距以及内边距都可以控制（块级元素特点）

转换为块级元素：
display:block

例如
a{
weight:150px;
height:50px;
background-color:red；
display:block;
}
本身a是一个行内元素，宽和高都不显示，加上display:block;就变为块级元素了
块级元素本身默认是占一行的

转换为行内元素
display:inline

转换为行内块
display:inline-block

文字垂直居中
让文字的高度等于盒子的高度就可以实现文字在当前盒子内垂直居中
例如
style{
div{
height:50px;
width:50px;
line-height:50px;
}
}

          <div>
       hahaha	
</div>

css的背景
background-color:red 表示将背景设置为红色，默认是透明的transparent(透明)
background-image:none | url（img/haha.png） 设置背景图片
background-repeat:repear | no-repeat | repeat-X | repeat-Y 设置图片背景是否平铺
background-position: x y 可以是百分数也可以是方位名词 position: top center bottom left right x是水平 y是垂直方位名词无影响x y 如果省略其中一个值，则第二个值是默认居中的（自己写最好别漏，写全较好，按照前是x 后是 y）
background-attachment： scroll(随着内容滚动而滚动) | fix 背景图像固定，不会随着屏幕中的内容滚动而滚动，视察滚动效果
（背景复合写法）background:背景图片 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景颜色半透明
background:rgba(0,0,0,0.3) 最后一个参数alpha透明度在0~1之间