Web-Day03

Web-Day03

CSS文字

• color：颜色
• font-family：字体
• font-size：大小
  • 相对长度：em，rem，vw，vh，%
  • 绝对长度：px
• font-weight：粗细
  • lighter：细
  • normal：普通
  • bold：加粗
  • bolder：更粗
  • 数值
• font-decoration：文字穿插线
  • none：无
  • underline：下划线
  • line-through：删除线
  • overline：上划线
• font-style：文字样式

CSS文本

• text-align：水平对齐方式
  • left：左对齐
  • center：居中对齐
  • right：右对齐
• vertical-align：垂直对齐方式
  • auto：自动对齐
  • top：顶部对齐
  • middle：中心对齐
  • bottom：底部对齐
  • baseline：基线对齐
  • sub：文本下标对齐
  • super：文本上标对齐
  • length：偏移量
• text-shadow：文字阴影
  • xoffset：x轴偏移量
  • yoffset：y轴偏移量
  • radius：模糊半径
  • color：颜色
• text-transform：文字大小写
  • none：默认
  • capitalize：首字母大写
  • uppercase：大写
  • lowercase：小写
• line-height：文字的行高
• letter-spacing：字间距
• word-spacing：词间距
• text-indent：缩进
• text-overflow：溢出 （overflow:hidden时有效）
  • clip：溢出直接裁剪
  • ellipse：溢出部分用...表示
• white-space：换行处理
  • normal：默认抵达容器边界换行
  • nowrap：强行不换行，直到遇到<br>
• word-break：换行断词模式
  • normal：默认依赖于浏览器
  • keep-all：只在半角空格或连字符处换行
  • break-all：允许在任何位置换行

CSS背景

• background(复合)：color image position repeat
• background-color：背景色
• background-image：背景图
• background-attachment：背景图滚动模式
  • scroll：滚动
  • fixed：固定
• background-position：背景图位置
• background-repeat：平铺模式
  • repeat：全平铺
  • no-repeat： 不平铺
  • repeat-x：横向平铺
  • repeat-y：纵向平铺
• background-size：大小
• background-clip：背景裁剪模式
  • border-box：边框以内
  • no-clip：同上
  • padding-box：内边距以内
  • content-box：内容以内
• background-origin：背景起始位置
  • border：从边框起
  • padding：从内边距起
  • content：从内容起

background-clip和background-origin的区别
background-clip只是直接的裁剪，超出的部分直接剪切掉，而background-origin是让背景图的起点重新设置

多背景设置
以上的所有的属性值都可以使用多个，之间以,隔开

CSS边框

• border(复合)：width style color
• border-width：粗细值
• border-style：线型
  • none：无
  • hidden：隐藏
  • dotted：点
  • dashed：虚线
  • solid：实线
  • double：双实线
  • groove：3D凹槽
  • ridge：3D凸槽
  • inset：3D凹入
  • outset：3D凸出
• border-color：颜色
• border-top|right|left|bottom-width|style|color：分别对不同方向的边框进行不同的设置

CSS表格

• border-collapse：行和单元格边框显示模式
  • separate：分离
  • collapse：合并
• border-spacing：单元格之间的距离
• caption-side：表标题的位置
  • top：位于表格上方
  • bottom：位于表格下方
• empty-cells：单元格无内容时是否显示
  • show：显示
  • hide：隐藏
• table-layout：表格宽度的布局模式
  • auto：自动
  • fixed：固定
    1. 通过col或colgroup设置宽度，表的宽度就是所有列宽度的总和
    2. 第一行所有单元格设置宽度，标的宽度就是第一行单元格宽度的总和
    3. 直接平均分配，忽略实际宽度

CSS列表

• list-style(复合)：type position image
• list-style-type：编号样式
• list-style-position：编号位置
  • outside(默认)：元素之前
  • inside：元素之内
• list-style-image：编号图片

CSS鼠标光标

• cursor

CSS转换

主要用于控制组件的旋转、位移、倾斜、缩放，也可以使用矩阵来进行变形处理

• transform：变形
  • translate(tx, ty)：向x轴方向位移tx，向y轴方向位移ty
  • translateX(tx)
  • translateY(ty)
  • scale(sx, sy)：向x轴方向缩放sx，向y轴方向缩放sy
  • scaleX(sx)
  • scaleY(sy)
  • skew(sx, sy)：向x轴方向倾斜sx，向y轴方向倾斜sy
  • skewX(sx)
  • skewY(sy)
  • rotate(angle)：旋转angle度
• transform-origin：变形的基点

CSS过渡

控制组件的某个属性发生改变时，会进行Transition过度动画——补间动画

• transition：property duration timing-function delay
• transition-propety：属性
  • none：没有属性会获得过渡效果
  • all：所有属性都将获得过渡效果
  • property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
• transition-duration：变化时长
• transition-timing-function：渐变速度
  • linnear：线性匀速
  • ease：缓入缓出
  • ease-in：缓入
  • ease-out：缓出
  • cubic-bezier(x1, y1, x2, y2)：贝塞尔曲线
• transition-delay：延迟时间

CSS动画

Animation动画通过设置@keyframes来设置关键帧来实现动画

linnear：线性匀速

• ease：缓入缓出
• ease-in：缓入
• ease-out：缓出
• cubic-bezier(x1, y1, x2, y2)：贝塞尔曲线
• transition-delay：延迟时间

CSS动画

Animation动画通过设置@keyframes来设置关键帧来实现动画