CSS入门与实战

CSS入门与实战

汇智网 / hubwiz.com / 2017-6-1

本套课程CSS 入门与实战,由浅入深的讲解CSS/CSS3的知识点,更好理解CSS属性,提升开发工作效率。

¥399.00 ¥199.00
  • 三个月服务期
  • 全新练习环境
  • 一对一远程助教
  • 升级包年会员,立享五折优惠
36
3
初识CSS CSS简介 在HTML中导入样式表 CSS选择符 CSS 属性 - 值对 标签选择符 ID选择符 class选择符 属性选择器 HTML元素的基本显示类型 display属性 块级元素display:block 行内元素display:inline 行内块级显示display:inline-block 行内、块级、行内块级相互转换 CSS3弹性盒子(Flex Box) Flex 布局盒模型 flex盒成员属性 成员增长系数属性:flex-grow 成员收缩系数属性:flex-shrink 成员默认大小属性:flex-basis 盒方向属性:flex-direction 盒换行属性:flex-wrap 纵轴向对齐属性:align-content 纵轴分布属性:align-items 纵轴分布属性:align-self 主轴分布属性:justify-content 成员顺序属性:order 设置元素的位置 流动模型 绝对定位position:absolute 相对定位position:relative 层模型固定定位position:fixed 层模型top/bottom/left/right 层模型z-index 浮动布局float 清除浮动clear 设置元素大小 盒模型的概念 宽高属性:width/height 宽度限值属性:min-width/max-width 高度限值属性:min-height/max-height 边框属性:border/border-top/right/bottom/left 外边距属性:margin/margin-top/right/bottom/left 内边距属性:padding/padding-top/right/bottom/left 计算模式属性:box-sizing 设置交互样式 光标属性:cursor 尺寸调整属性:resize 设置2D元素变换 变换属性: transform 位移变换:translate/translateX//translateY 缩放变换: scale/scaleX/sacleY 旋转变换:rotate 倾斜变换:skew/skewX/skewY 自定义变换:matrix CSS3d元素变换 CSS3d元素变换 perspective 透视属性 perspective-origin透视原点属性 Z轴位移变换translateZ() Z旋转变换rotateZ Z轴缩放scaleZ 3D位移变换translate3d 3D缩放变换scale3d 3D旋转变换rotate3d CSS transition过度和animation动画 transition过渡 CSS3 transition-property CSS3 transition过渡时间 CSS3 transition-timing-function animation动画 animation关键帧 animation基本属性1 animation基本属性2 CSS3 animation-timing-function font字体 font字体属性1 font字体属性2 在线字体格式 在线字体的引用 text文本 text-align对齐 text-transform变换 text-indent缩进 letter-sapcing和word-spacing 为元素设置背景 background-color color的颜色函数 background-image background-repeat background-orign background-position 设置元素整体外观 不透明属性opacity 元素边框outline 溢出属性overflow 阴影属性box-shadow 可视属性visibility 渐变效果 线性渐变linear-gradient 径向渐变radial-gradient 重复线性渐变repeating-linear-gradient 重复径向渐变repeating-radial-gradient 使用滤镜处理图像 滤镜属性filter 模糊滤镜bulr 亮度滤镜brightness 阴影滤镜drop-shadow 灰度滤镜grayscale 色相旋转滤镜hue-rotate 反色滤镜invert 不透明度滤镜opacity 泛黄滤镜sepia 饱和度saturate 对比度contrast 常用的伪类样式 a:link链接伪类选择器 a:visited链接伪类选择器 悬停元素:hover伪类选择器 当前活动元素:active伪类选择器 焦点元素:focus伪类选择器 当前选中的元素:checked伪类 :enabled可用&:disabled禁用元素伪类 结构性伪类选择器 :empty无子元素 :not否定条件 :root根元素 :target目标元素 :first-child第一个子元素 :last-child最后一个子元素 :only-child唯一子元素 :nth-child(n)子元素位置模式 :nth-last-child(n)子元素反向位置模式 :first-of-type类型第一个子元素 :last-of-type同类型最后一个 :only-of-type类型中唯一的元素 :nth-of-type(n)类型位置模式 :nth-last-of-type(n)类型反向位置模式 AT规则 charset设置字集 import导入样式文件 page打印样式 supports media媒体查询 伪元素选择器 E::first-letter E::first-line E::before E::after E::placeholder E::selection 表单相关伪类 E:read-only E:read-write E:optional E:required E:invalid E:valid 常用函数 attr() calc() url()