课程回顾

  1. CSS： 层叠样式表 用于美化页面
  2. 三种引入方式：
  3. 内联：在元素的style属性里面写样式代码，不能复用
  4. 内部：在head的里面添加style标签，在标签内部写样式代码，可以在本页面复用，不能多页面复用
  5. 外部：在单独的css文件中写样式代码，通过link标签引入页面，可以多页面复用，把样式代码和html代码分离
  6. 优先级：内联最高 内部外部一样 后执行的覆盖先执行的
  7. 选择器
  8. 标签名选择器： div{}
  9. id选择器： #id{}
  10. 类选择器： .class{}
  11. 属性选择器： div[属性名='属性值']{}
  12. 分组选择器： div,#id,.class{}
  13. 伪类选择器： 未访问 a:link 访问过a:visited 悬停：hover 点击时：active
  14. 任意元素选择器： *{}
  15. 子孙后代选择器： div span a{}
  16. 子元素选择器: div>span>a{}
  17. 颜色赋值
  18. 通过单词赋值 red
  19. 6位16进制 #ff0000
  20. 3位16进制 #f00
  21. 3位10进制 rgb(255,0,0)
  22. 4位10进制 rgba(255,0,0,0-1)
  23. 背景图片
  24. background-image 设置背景图片
  25. background-size 设置背景图片尺寸
  26. background-repeat 禁止重复
  27. background-position 背景图片的位置 left right top bottom center , 通过百分比
  28. 盒子模型
  29. 包括： 外边距 边框 内边距 宽高
  30. 宽高： weight/height 可以通过像素或百分比控制， 行内元素不能修改宽高由内容决定
  31. 外边距：元素距上级元素或相邻兄弟元素的距离称为外边距， margin：10px 四个方向全是10 margin-left/right/top/bottom margin:10px 20px； 上下10 左右20 margin：0 auto 居中 margin:10px 20px 30px 40px 上右下左 行内元素上下没有效果 左右相加 块级元素上下相邻取最大值 粘连问题：通过给上级元素添加overflow:hidden解决
  32. 边框： border-left/right/top/bottom: 粗细 样式 颜色 块级元素四个方向边框全部生效，会影响元素所占宽高 行内元素四个方向边框全部生效，但是左右边框影响所占宽度，上下边框不影响高度

盒子模型之内边距

什么是内边距： 元素边框距内容的距离

盒子模型总结：

行内元素需要记住的点： 1. 不能修改宽高 2. 外边距上下没效果 3. 边框上下不影响高度 4. 内边距上下不影响高度

文本相关样式

  1. 文本对齐 text-align: left/right/center
  2. 文本修饰 text-decoration:overline/underline/line-through/none
  3. 行高 line-height
  4. 颜色 color：red;
  5. 文本阴影 text-shadow: 颜色 x偏移 y偏移 阴影浓度(值越小越清晰)

圆角

字体相关样式

    /* 字体大小 */
    font-size: 10px;
    /* 字体加粗 */
    font-weight: bold;
    /* 斜体 */
    font-style: italic;
    /* 字体样式 */
    font-family: "simhei", Arial, Helvetica, sans-serif;

溢出设置 overflow

显示方式 display

  1. block： 块级元素的默认值，独占一行 可以修改宽高
  2. inline： 行内元素的默认值，共占一行
  3. inline-block:行内块 共占一行并且可以修改宽高