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

原文地址:https://www.cnblogs.com/ZQUACM-875180305/p/9455219.html