1.利用方位名词top bottom 来改变背景图片位置
background-position: left top; 默认的是左上角
background-position: bottom right; 方位名词没有顺序,谁写在前面都可以
background-position: center center; 第一个是水平第二个是垂直
background-position: left;如果方位名词只写一个,另一个默认为center
2.精确单位
第一值一定是x坐标 第二值一定是y坐标
3.background-attachment:scroll | fixed
参数:scroll:背景图片是随对象内容滚动
fixed:背景图像固定
4.背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
5.背景半透明
background-color:rgba(0,0,0,0.5);
最后一个参数是alpha透明度,取值范围是0-1之间
背景透明是指盒子背景半透明,盒子里面的内容不受影响
可以给文字和边框透明 都用rgba的格式来写
6.背景图片缩放,大小设置
background-size:100px; 尽量改变一个值,可以写百分数
background-size: cover; 等比例缩放,填满容器,剪裁超出部分。
background-size: contain; 图片进行等比例缩放,如果图片高度或宽度
有一个和盒子一样大,就不在缩放了。
7.多背景
设置多背景,每个背景图(url())用逗号隔开。为了避免背景色将背景图
盖上,背景色一般定义在最后一组。
background:url() no-repeat scroll,url() no-repeat scroll pink;
8.凹凸文字效果
text-shadow:水平距离 垂直距离 模糊距离 阴影颜色;
凸起文字:往上,往左是白色,往下往右是黑色
text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;
凹下文字:与凸起相反,(在网页中坐标往上是负,往左是负)
text-shadow:1px 1px 1px #fff,-1px -1px 1px #000;
9.css三大特性
层叠性:就近原则
继承性:子元素继承父元素的样式(text-,font-,line-,color属性)
继承后的权重为(0,0,0,0)
10.盒子模型
(1)盒子边框:border: border-width || border-style || border-color
注意设置的时候要设置边框样式通常用 solid 为单实线(默认值为none 没有边框)
border:0; 没有边框
边框综合设置:border:四边宽度 四边样式 四边颜色;
border-collapse:collapse; 表示合并边框
(2)圆角边框
border-radius:左上角 右上角 右下角 左下角;
boeder-radius: 50%; 圆
border-radius:100px 0px; 两个参数是对角线的方式
11.内边距
内容距离盒子的距离
padding: 20px; 上下左右都是
padding;10px 20px 30px; 上10 左右 20 下 30
padding: 10px 30px; 上下10px 左右30px
四个值:顺时针 上右下左