讯享网

CSS 基础知识

• 一. CSS引入方式
• • (一) 内部样式表
  • (二) 行内样式表
  • (三) 外部样式表
• 二. CSS简介
• • (一) CSS-美容师
  • (二) 语法规范
  • (三) CSS代码风格
• 三. CSS选择器
• • (一) 基础选择器
  • • 1. 标签选择器
    • 2. 类选择器
    • 3. id选择器
    • 4. 通配符选择器
    • 5. 优先级
  • (二) 复合选择器
  • • 1. 后代选择器
    • 2. 子选择器
    • 3. 并集选择器
    • 4. 伪类选择器
    • • 1) 链接伪类选择器
      • 2) :focus 伪类选择器
  • (三) 新增选择器
  • • 1. 属性选择器
    • 2. 结构伪类选择器
    • 3. 伪元素选择器
• 四. CSS样式属性
• • (一) 字体属性
  • • 1. 字体系列（font-family）
    • 2. 字体大小（font-size）
    • 3. 字体粗细（font-weight）
    • 4. 字体样式（font-style）
    • 5. 字体复合属性
  • (二) 文本属性
  • • 1. 文本颜色
    • 2. 对齐文本
    • 3. 装饰文本
    • 4. 文本缩进
    • 5. 行间距
  • (三) 背景属性
  • • 1. 背景颜色
    • 2. 背景图片
    • 3. 背景平铺
    • 4. 背景图片位置
    • 5. 背景图固定(背景附着)
    • 6. 背景复合写法
  • (四) 圆角边框
  • (五) 盒子模型
  • • 1.边框
    • 2.内边距
    • 3.外边距
    • 4. 清除内外边距
• 五. CSS的元素显示模式
• • (一) 块级元素
  • (二) 行内元素
  • (三) 行内块元素
  • (四) 元素显示模式转换
• 六. CSS阴影
• • (一) 盒子阴影
  • (二) 文字阴影
• 七. CSS浮动
• • (一) 浮动特性
  • (二) 浮动元素经常和标准流父级搭配使用
  • (三) 清除浮动
• 八. CSS定位
• • (一) 为什么需要定位
  • (二) 定位组成
  • • 1. 位模式
    • • 1) 静态定位 static
      • 2) 相对定位 relative
      • 3) 绝对定位 absolute
      • 4) 固定定位 fixed
      • 5) 粘性定位 sticky
    • 2. 边偏移
  • (三) 定位叠放次序 z-index
  • (四) 定位拓展
  • • 1. 定位特殊属性
    • 2. 脱标的盒子不会触发外边距塌陷
    • 3. 绝对定位(固定定位)会完全压住盒子
• 九. 元素的显示与隐藏
• • (一) display 属性
  • (二) visibility 可见性
  • (三) overflow 溢出
• 十. CSS3 的新特性
• • (一) CSS盒子模型
  • (二) CSS其他特性
  • • 1. CSS3 滤镜filter
    • 2. calc 函数
    • 3. 鼠标样式更改
  • (三) CSS新增属性
  • • 1. 过渡
    • 2. 2D转换
    • • 1）2D转换之移动 translate
      • 2）2D转换之旋转 rotate
      • 3）2D转换中心点 transform-origin
      • 4）2D转换之缩放 scale
      • 5）2D转换综合写法
    • 3. 动画
    • • 1）用keyframes 定义动画
      • 2）元素使用动画
      • 3）动画序列
      • 4）动画常用属性
      • 5）动画简写属性
      • 6）速度曲线细节
    • 4. 3D 转换
    • • 1）3D移动 translate3d
      • 2）透视 perspective
      • 3）3D旋转 rotate3d
      • 4）3D呈现 transfrom-style
    • 5. 浏览器私有前缀
• 十二. 网站制作
• • (一) 页面布局整体思路
  • (二) 网站制作流程
  • (三) 项目搭建工作
  • (三) 网站 favicon 图标
  • • 1. 制作favicon图标
    • 2. favicon图标放到网站根目录下
    • 3. HTML页面引入favicon图标
  • (四) 网站TDK三大标签SEO优化
  • • 1. title 网站标题
    • 2. description 网站说明
    • 3. keywords 关键词
• 十三. Web 服务器
• • (一) 本地服务器
  • (二) 远程服务器
  • (三) 将自己的网站上传到远程服务器