html 文件结构

• <DOCTYPE html> html版本声明语句
  • html 根标签 lang="en" 设置语言
    • head 头部标签 在头部标签内对页面进行设置
      • meta 标签
        • charset="UTF-8" 设置中文编码格式
      • title 设置网页标题
      • link 引入 css 文件(外联样式)
      • style 写 css 样式(内联样式)
    • body 内容标签
      • 所有的 页面结构标签都写在 body 中

行标签和块标签

• 块标签

  • 独占一行
    • 可以设置宽高
      • 不设置高度时 高度由内容撑开
      • 不设置宽度时 宽度继承父元素宽度
    • 可以嵌套行标签和块标签
      • 注意 P标签 不能嵌套块标签
    • 常用块标签
      • div ul ol li p h1~h6

• 行标签

  • 父盒子宽度允许的情况下 在一行之间排列
    • 父盒子宽度不够的情况下 会换行
    • 不能设置宽高
      • 宽高由内容撑开
    • 不可以嵌套块标签
    • 常见行标签
      • span a img

css 书写方式

• 行间样式
  • 直接在标签内部的 style 属性中 写 css 样式
• 内联样式
  • 在 head 的结束标签上 写一个 style 标签
  • 在 style 标签上 写 css 样式
• 外联样式
  • 新建一个 .css 文件
  • 在 .css 文件中 写 css 样式
  • 在 head 中 title 下面 使用 link 标签 引入 .css文件

css 选择器

• .class 选择器
  • 按照标签的 class 名进行筛选
  • 多个标签可以使用 一个 class 名
  • 一个标签也可以使用 多个 class 名

• id 选择器

  • 按照标签的 id 进行筛选
  • id 不能重复！具有唯一性！
• 标签名 标签选择器
  • 直接用标签名进行筛选
• *通配符选择器
  • 直接选择所有标签
• 空格 后代选择器
  • 标签1 标签2
    • 标签2 必须是 标签1 的后代元素

• 指数的子集选择器
  + 标签1>标签2
  + 标签2 必须是 标签1 直属的子元素

• , 群组选择器
  • 标签1,标签2
    • 给标签1和标签2 同时设置 css 样式
• 选择器的优先级
  • ！important > 行间样式 > id > class > 标签选择器 > *(通配符)
  • 当优先级相同的情况下
    • 谁选择器最详细 谁生效
      • 选择器也相同 谁在下面谁生效

css 选择器

盒模型

• margin
  • 外边距 负责两个元素之间的间距
  • 元素之间
    • 上下间距 谁大取谁
    • 左右间距 相加取和
  • margin 不会影响元素的大小
• border
  • 边框
  • 边框大小 会影响元素大小
• padding
  • 内边距 负责内容到容器边框的距离
  • padding 会影响元素大小 能把盒子撑开
• 内容区域

img 和 a标签

• img 用来插入图片
  • img 用来插入图片
    + src 设置图片路径(可以是本地路径也可以是网络路径)
    + alt 设置图片加载失败时 文字提示信息
    + width/height 自带宽高属性 可以设置宽高 不用带 px 单位
• a 链接

  • 用来设置跳转链接 可以跳转新的页面

    • 在 href 属性中直接设置新页面的路径或网址

  • 锚点链接

    • href 属性中设置要跳转的标签的 id

  • target

    • target:"_blank"
      • 设置 网页在新建标签页打开

  • 四个伪类

    • : link 匹配所有未点击过的链接
    • : visited 匹配所有已经点击过的链接
    • : hover 鼠标悬停
    • : active 正在点击(鼠标按下还没有松开)

伪元素

• ::before

  • 在内容前 插入文本

• ::after

  • 在内容后 插入文本

• 注意！！！

  • 伪元素必须有 content:"";
  • 伪元素具有行元素的特性
  • 伪元素可以正常设置 css 样式

常用 css 属性

• width/height

  • 设置元素宽高
  • 值可以是 具体像素单位 也可以是 百分比
  • 设置最大宽高
    • max-width/max-height
  • 设置最小宽高
    • min-width/min-height

• background 设置背景

  • background-color 背景色
  • background-image 背景图片
  • background-repeat 背景图片是否重复
  • 参数 no-repeat 不重复
  • background-size 背景图片大小
    • 第一个参数 设置宽
    • 第二个参数 设置高
  • background-position 设置背景图片位置
    • 第一个参数 设置x
    • 第二个参数 设置y
  • background-position-x 设置背景图片x轴位置
  • background-position-y 设置背景图片y轴位置

• margin/padding 设置外边距/内边距

  • 一个参数时
    • 同时设置四条边
  • 两个参数时
    • 第一个参数 上下间距
    • 第二个参数 左右间距
  • 三个参数时
    • 第一个参数 上间距
    • 第二个参数 左右间距
    • 第三个参数 下间距
  • 四个参数时
    • 上 右 下 左

• 文字设置

  • font-size 字体大小
  • font-weight 粗细
    • 100~1000
    • bold
  • font-family 设置字体
  • font-style 字体样式
    • italic 斜体
  • line+height 行高
  • color 文字颜色
  • text-transform 文字大小写
    • capitalize 首字母大写
    • uppercase 全部字母大写
    • lowercase 全部字母小写
  • text-decoration 修饰线
    • underline 下划线
    • overline 上划线
    • line-turough 删除线
  • text-indent 首行缩进 一般设置为 2 rem

• display

  • none 隐藏盒子 盒子直接消失
  • block 将元素转为块元素
  • inline 将元素转为行元素
  • inline-block 将元素转为行间块元素

• border

  • 参数有 大小(px) 颜色 样式
  • 样式
    • solid 实线
    • dashed 虚线
    • dotted 点状虚线
    • double 双实线
  • border-radius 设置边框圆角
    • 参数可以是具体的 像素单位 也可以是百分比
    • 50% 圆
    • 也可以分开设置四个角
      • 左上 右上 右下 左下

排列方式

• 水平排列
  • 内容区域
    • text-align
      • center 居中
      • left
      • right
  • 自身居中
    • maigin：0 auto;
      只有 块元素 和 行间块元素可以使用
• 垂直排列
  + vertical-align 基准线
  + top 上对齐
  + bottom 下对齐
  + middle 居中对齐
  + sub 上标
  + super 下标
  + baseline 默认值

float 浮动

• none 无浮动

• left 左浮动

• right 右浮动

• 浮动会造成 高度塌陷 所以需要给父容器 清除浮动 造成的高度塌陷

  • 给父容器设置固定的高
  • 给父容器设置 overflow:hidden;
    • overflow:hidden;
      • 超出隐藏
      • 清除浮动
  • 在父元素的末尾 加入一个块标签
    • 在块标签上设置 clear:both;
  • 给子元素设置伪类::after
    • 在::after上设置
      • display:block;
      • clear:both;