CSS有很多基本属性,都是很基础的东西,这些基础的东西就会让以后的学习轻松不少
边框属性
作用:给元素加上一个边框
分为两种形式
第一种
border-top
border-bottom
border-left
boder-right
三个属性 粗细 线型 颜色
第二种
border :粗细 线型 颜色
透明色:transparent
轮廓
作用:绘制于元素周围的一条线,位于边框外
属性:
outline-width: 20px; 粗细
outline-style: solid; 线型
outline-color: red; 颜色
元素的分类
块级元素:独占一行,对宽高设置有效,如果我们不给宽度的话,撑满整行,如果不给高度,高度会随着内容的变化而变化
行内元素:设置宽高是无效的,不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
行内块元素:不是独占一行,设置宽高有效,并且可以多个标签存在一行。
可以使用 display 来改变元素的分类
盒子模型
盒子模型由内容 内边距 边框 外边距组成
属性:
边框:border
内边距:padding 边框和内容之间的距离
padding 存在一个值 上下左右都是改值
存在两个值 上下一个值 左右一个值
存在三个值 上 左右 下
存在四个值 上右下左
可以单独的去设置 例如 padding-top
外边距:margin 元素和元素之间的距离
背景属性
背景属性分为 :纯色背景(背景颜色) 背景图像
**背景颜色**
background-color : 任意合法的颜色 和 transparent
**背景图像**
background-image : url()
**背景图像平铺**
background-repeat:
1.repeat : 默认值水平垂直方向都平铺
2.repeat-x:水平方向平铺
3.repeat-y:垂直方向平铺
4.no-repeat: 不平铺
**背景图片的尺寸**
background-size: value1 value2 宽度 和 高度 单位 是PX
value% value% 宽度 和 高度 单位 是%
cover : 全覆盖 将背景图等比放大直到背景图完全覆盖到元素的所有区域
contain:包含 将背景图等比放大 ,直到下边或者右边有一个边缘碰到元素为止
**背景图片固定**
background-attachment: fixed;
scroll:滚动 fixed 固定
**背景定位**
改变背景图像在元素中的默认位置
属性 : background-position
x y 水平偏移距离 和垂直偏移距离
单位 : px % top left right bottom
CSS中的 雪碧图、精灵图
作用:将一些小的背景图,合并到大的背景中去,以便实现减少服务器的请求次数。
步骤:
1.我们根据图像的大小创建一个元素
2.将雪碧图作为元素的背景,再通过背景图片定位,实现位置偏移将用户要看到的图像显示在元素中
渐变
1.什么是渐变?
两种或者多种颜色间平滑度过的效果
分类:
1.线型渐变
2.径向渐变
3.重复渐变 加上 repeating
2.渐变的组成
色标:决定了渐变的每种颜色及出现的位置
每个渐变效果都是由多个色标组成(2个以上)
语法:background-image:linear-gradient(方向或者角度,色标。。。。。)
linear-gradient() 线型渐变
angle 方向或者角度
to top 从下往上填充
to left 从右往左
to right 从左往右
to bottom 从上到下
0 == 0deg(度) ==to top
90deg = toright
180deg = to bottom
270deg = to left
color 颜色
/*径向渐变
size at position 径向渐变的位置以及圆心的位置
size : 圆的半径 单位为px
position : x,y 圆心的位置
px % top/left/center/bottom
色标
background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);