html文件结构

• <DOCTYPE html> html版本声明语句

行标签和块标签

• 块标签
  • 独占一行
  • 可以设置宽高
    • 不设置高度时 高度由内容撑开
    • 不设置宽度时 宽度继承父元素宽度
  • 可以嵌套行标签和块标签
    • 注意：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文件
    <link rel="stylesheet" href="./3_test.css">>

css选择器

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

• id选择器

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

• 子元素选择器
  + 标签1>标签2
  + 标签2必须是 标签1 的子元素

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

盒模型

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

a标签

• img标签 用来插入图片
  • src可能是本地属性也可能是网络路径
  • art 设置图片加载失败时候的文字提示信息
  • 图片自带css属性 不用带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
    • blod
  • 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;