简单CSS

概念

CSS：层叠样式表，用来美化html页面的内容。

基本语法

CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。
　　选择器{属性1：值；属性2：值；…}
注释：/* */
CSS使用位置：
1.行内样式表 标签上添加style属性,属性中添加一个多个样式。

<p style="color:red;font-size:50px;">这是一段文本</p>

2.内部样式表 head中添加style标签对,标签对中添加 选择器{样式…}

<style type="text/css">
p {
color: blue;
font-size: 40px;
}
</style>

3.外部样式表 外部建立css文件,文件中添加样式,在指定的html页面中引用css文件
style.css：

p {
color: green;
font-size: 30px;
}

test.html：

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定当前文档与被链接文档之间的关系。
stylesheet:文档的外部样式表。

CSS选择器

基础选择器
*通配符:匹配所有元素
#id选择器:根据元素的id属性值,选中一个元素
标签|元素选择器:根据标签名字选择一个或者一组元素
.class选择器:根据class属性的值选择到一个或者一组元素 ,calss属性值可以重复,可以给多个值
群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

*{
	样式
}
#id值{
	样式
}
.class值{
	样式
}
标签{
	样式
}
选择器1，选择器2，选择器3{
	样式
}

组合选择器
后代选择器：用于选择指定标签元素下的后辈元素，以空格分隔。
子元素选择器：用于选择指定标签元素的所有第一代子元素，以大于号分隔。
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔。
伪类选择器
E:hover：当鼠标悬停在元素内容上时候,显示的效果
E:first-child：E元素的第一个子元素的样式
E:last-child：E元素的最后一个子元素的样式
E:nth-child(even)：E元素作为父级的单双数元素的样式，odd：单数 even：双数
E:checked：元素被选中之后的样式

常用样式

背景属性
background：
　　background-color 背景颜色
　　background-images 背景图片（url（“图片位置”））
　　background-repeat 背景图片是否重复（repeat，repeat-x，repeat-y，no-repeat）
　　background-size 背景图片大小相对与当前元素大小的百分比,1个值默认width,2个值 width height
　　background-position 背景图片位置
　　background: 可直接跟属性值
文本
1.color：设置字体颜色
　　英文单词
　　十六进制
　　rgb(,)
　　rgba(,) a是透明度 0~1 0完全透明 1完全不透明
2.text-align：设置文本对齐方式，center（居中），left（左对齐），right（右对齐）
3.text-decoration：规定添加到文本的修饰，属性值：none、underline、overline、line-through。
　　1）underline
　　对文本添加下划线，与HTML的u元素相同。
　　2）overline
　　对文本添加上划线。
　　3）line-through
　　对文本添加中划线，与HTML中的s和 strike 元素相同。
　　4）none
　　关闭原本应用到元素上的所有装饰。
4.text-indent：设置文本首行缩进（可以给px也可以em—字的个数）。
字体
1.font-family：文本字体。
2.font-size：字体大小，默认16px。
3.font-style：字体风格。
　　1）normal：文本正常显示；
　　2）italic：文本斜体显示；
　　3）oblique：文本倾斜显示，oblique是将文字强制倾斜
４.font-weight：字体加粗。100~900,700以上为粗体。
列表
list-style：
　　list-style-type：列表项目标记样式。
　　　　none：无标记
　　list-style-position：列表项目标记位置
　　list-style-image：把图像设置为列表中的项目标记
其它样式
opacity：透明，0(完全透明)~1，整个元素的透明度。
line-height：行高。设置行高与容器的height相同,容器中的内容(文本|行内元素)在容器中垂直居中。
vertical-align：元素与周围同行元素的垂直方向的对其方式 ，块元素无效。
display：
　　block 块元素
　　inline 行内元素
　　inline_block 行内块(既有行内元素的特点,也有块元素的特点，宽度默认由内容撑起,能和其他元素一行显示，可设置宽高)

盒子模型

盒子模型: 内容(宽高)+padding内边距+border变框+margin外边距
我们能看到的元素的大小:内容+padding+border
内边距:
　　内容的背景会默认延伸到内边距上
　　行内元素垂直方向的内边距无效
padding：
　　padding-top(left、bottom、right)：赋值
　　padding:10px; 上下左右内边距都是10px
　　padding:10px 50px; 上下10px,左右50px
　　padding:10px 50px 80px; 上 右 下 左边和右边一样
　　padding:10px 50px 80px 100px; 上 右 下 左
border:
　　边框三要素: 宽度 样式 颜色
border-top(left、bottom、right)：赋值
margin:
　　块元素上下的外边距会合并
　　行内元素上下的外边距无效

浮动

浮动
float：半脱离文档流，元素按照要求方向进行移动，浮动元素遇到其他浮动元素|遇到父级的边界停下来。
　　left
　　right
特点：后面的块元素会占前面浮动元素的位置,但是内容会让出前面浮动元素的位置。
块元素浮动可以和其他浮动元素同行显示,宽度由内容撑起了，行内元素浮动可以设置宽高。
清除浮动
清除浮动:保留浮动的效果,但是想要在文档流中保留浮动元素的位置
1)父元素手动设置高度
2)在父元素中设置overflow:hidden
3)在自己选择器中设置clear
left：我的左边不能有浮动元素
right：我的右边不能有浮动元素
both：我的两边都不能有浮动元素

定位

position: 配合方向值一起使用才有效 left top bottom right。
　　relative：相对定位:相对与自身原位置定位。
　　　　　　不脱离文档流
　　absolute：绝对定位，子父集定位。
　　　　　　如果父级身上有position:relative,相对于父级定位
　　　　　　如果父集身上没有position:relative相对于窗口定位
　　　　　　完全脱离文档流
　　fixed：固定定位，固定与窗体的某个位置。
　　　　　完全脱离文档流

.div{
            /*相对定位*/
           position: relative;
            top:-50px;
        }
.div3{
            /*绝对定位*/
            position: absolute;
            right:0;
            top:0;
        }
.div4{
            /*固定定位*/
            position: fixed;
            top:200px;
            right:0;
  		｝