css基础

css的作用是给网页添加样式

css样式

css与html的结合方式

• 1.内联样式
• 2.外部样式
• 3.内部样式

三种结合方式，内联样式优先级最高，外部样式与内部样式的优先级相等，后面写样式会将前面的样式覆盖，权重高的会将权重低的覆盖

css 选择器

css 选择器类型

1.id选择器

使用#来进行声明：

#div1{
}

2.类选择器

使用"."来进行声明：

.div{
}

3.属性选择器

标签[属性="属性值"]{
}

4.伪类选择器

:hover{
}

5.群组选择器

p,#div1{
}

6.通配符

*{
}

7.包含选择器

父元素  子元素{
}

8.标签选择器

标签名{
}

9.结构选择器

:nth-child(1){
}

选择器权重

1. id权重 100
2. class选择器 10
3. 伪类选择器 10
4. 结构选择器 10
5. 属性选择器 10
6. 标签选择器 1
7. 通配符 0
8. 内联样式 1000
9. 包含选择器 :各个选择器权重之和
10. 群组选择器:与各自的权重相等

css 属性

背景:background

复合属性,有五个参数
参数一:背景颜色
参数二:背景图片的链接地址 url()
参数三:平铺方式  默认repeat,  no-repeat,  repeat-x ,repeat-y
参数四:背景图片水平方向的位置:left/right/center/px/%
参数五:背景图片垂直方向的位置: top/bottom/center/px/%

background-size 用来设置背景图片的大小
取值两个,宽度与高度
取值一个,cover:覆盖 图片大盒子小  ,contain:包含,盒子包含图片,盒子大图片小

字体属性

1.font-fimaly  设置字体
2.设置字体颜色  color
3.设置字体大小  font-size
4.设置字体的粗细  font-weight
5.设置字体倾斜  font-style
6.设置字体的装饰  text-decoration,取值none  underline 下划线   line-throught  删除线
7.首行缩进   text-indent,一般取值2em  默认1em=16px
8.文本对齐方式   text-align, 取值center,默认left

盒子属性

border 边框

border是一个复合属性,使用border的时候,代表四条边框
参数一:样式   参数二:边框宽度    参数三:边框颜色
border:none  去除边框

padding 内边距

取值1个,代表上下左右内边距相同
取值两个,参数一上下  参数二左右
取值三个,参数一上  参数二左右   参数三下
取值四个,参数一上  参数二右  参数三 下 参数四左

margin 外边距

取值1个,代表上下左右内边距相同
取值两个,参数一上下  参数二左右
取值三个,参数一上  参数二左右   参数三下
取值四个,参数一上  参数二右  参数三 下 参数四左

background 指能够平铺的范围:width,padding,border

盒子实际占的宽度 = width+padding-left+padding-right+border-left+ border-right+margin-left+margin-right

尺寸属性

宽度取值%或者像素
高度,取值%或px
当对于块元素来讲:宽度不写,默认与父元素相同,高度不写由内容的高度来决定
对于行内元素,宽度与高度都是由内容决定

line-height:行高    
1.当行高与元素高度相等的时候,单行文本会垂直居中显示
2.设置文本与文本之间行间距

列表属性

list-style:none  去除列表默认的样式

浮动

浮动的作用:能使块元素进行横向排列

float:left/right/none;

高度塌陷出现的时机：
1.没有给父元素高度
2.父元素中所有的子元素发生了浮动,这时候就会出现高度塌陷

解决方法:
1.在父元素上添加一个overflow:hidden
2.在父元素中添加一个空盒子,给空盒子添加一个clear:both

显示属性

display:none;  不占位置的隐藏

display:block;  显示,转为块元素

设置透明度的隐藏:opacity:0;  隐藏,占据位置隐藏[通过设置的透明度]  1:不透明  0:全透明

定位属性

position:relative/absolute/fixed

• 相对定位：相对自己原来本身的位置来进行定位，仍然占据自己原本的位置(不脱离文档流的)
• 绝对定位：相对于具有定位属性的父元素来进行定位的，若是找不到则找body，不占据原本的位置(脱离文档流)
• 固定定位：相对于当前窗口来进行定位的，与父元素无关，与自己本身的位置也无关
• 相对定位与绝对定位是配合使用的，一般情况下，相对定位作为父元素[包含块]，给子元素添加绝对定位在父元素中进行定位

形变与过渡

动画：平移、缩放、旋转动画

平移动态:transform:translateX();   取值为正的时候,向右平移,取值为负向左平移
translateY();  取值为正,向下平移,取值为负向上平移  [带单位]
translate(x,y);  同时向x与y同时移动

缩放动画:  transform:scale() ; 取值[0,1)的时候缩小  大于1的时候放大

旋转动画: transform:rotate() ;单位deg一定要带  取值为正顺时针方向旋转,取值为负逆时针方向旋转

阴影效果

box-shadow: 水平方向的位置  垂直方向的位置  高斯模糊的距离  阴影的宽度   阴影的颜色以及透明度  阴影的样式;

animation动画

参数一:绑在keyframes上名称  	参数二:动画执行的时间
参数三:动画开始之前的延迟  	参数四:动画执行次数
参数五:是否轮流反向执行   		参数六:动画的运动曲线

@keyfremes  name{
	0%{}
	50%{}
	100%{}
}