边框设置:
border-width 设置边框的宽度
border-style 设置边框的样式
border-color 设置边框的颜色
border 设置所有的边框,border:10px solid black 宽度 样式 颜色
border-top -bottom -left -right 设置上下左右的边框
border-radius 设置圆角边框
border-radius:20px/15px 设定四个圆角,圆心距离边框的左右边距离20px,距离上下边框15px
背景设置:
background-image 设置背景图片 background-image:url();
background-repeat 设置背景重复方式
background-attachment 设置背景是否随着滚轮移动,fixed不随着滚轮移动而移动
background-color 设置背景颜色
background-size 设置背景图像的尺寸
css基本选择器:
根据类选择元素:.tmp{} <p1 class="tmp"> </p>
根据ID选择元素: #id1{} <p1 id="id1"> </p>
根据属性选择元素: [ href ] {} <a href="123.html"> </a>
: 选择器动作: a:hover{} <a> </a>
css 文本位置:
Text-align 对齐文本 center居中 left左对齐
direction 文本方向 ltr ( left to right)
letter-spacing 指定字母间距
Word-spacing 指定单词间距
line-height 指定行高
text-indent 首行缩进
text-decoration 设置文本装饰 underline 下划线 overline 上划线 line-through 中划线
text-transform 设置文本大小写转换(仅仅英文) capitalize 首字母大写 uppercase 全部字母大写 lowercase 全部字母小写
font-family 设置字体
font-size 设置字体大小
font-style 设置字体样式
text-shadow 设置阴影 text-shadow:10px 10px 1px red; 水平偏移 垂直偏移 模糊程度 颜色
css 过渡:
transition-delay 变形延时
transition-duration 颜色变化延时
transition-property 直接变化的元素
transition-timing-function:ease(sfs)slow fast slow
ease-in (sf)
ease-out (fs)
ease-in-out (sfs)
transform:ratate (30deg) 顺时针旋转30度
scale (1.5) 放大1.5倍
transform-origin:设置变换锚点
css动画:
animation-iteration-count:动画的循环次数
animation-delay
animation-duration
定义hover可以设置动画的起始等等变化
盒子模型
内容、填充、边框、边界
padding-top -left -right -bottom
padding:上右下左
background-clip:content-box 只在中间填充
margin-外边距
opacity 透明度