css的应用

边框设置：

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 透明度