HTML+CSS day04

学习目标：

HTML+CSS day04

• 背景
• 复杂选择器
• CSS三大特性
• 元素的分类

---

学习内容：

1.背景

• background-color:设置背景色
  默认值：transparent(透明)
• background-image:设置背景图像 none去除背景
  与img的区别：
  1.img属于html, 背景图像属于css
  2.img表示的是重要的信息， 背景图像只是用于装饰效果
  3.内容不能写在img上，内容是可以写在背景图像上的
  插入背景图像：background-images:url(图像的路径)
  默认的从左上角铺满整个盒子
• background-repeat:平铺方式
  1.repeat:默认平铺
  2.repeat-x:x方向平铺
  3.repeat-y:y方向上平铺
  4.no-repeat:不平铺
• background-position:x方向 y方向；:改变图像位置
  第一种方向关键字：
  1.x方向：left center right
  2.y方向：top center bottom
  注：若只给一个方向，则另一个默认值为center
  第二种百分比：0% 0%（左上角）
  第三种具体的像素length: 图片左上角距离边框的像素
• 复合写法：
  background: background-color background-image background-repeat background-position;

2.复杂选择器

• font-size:设置字号 ，默认是16号字
• font-weight:设置加粗

1. bold/700
2. normal(默认值），可以给b、strong、h标签去除加粗

• font-style:设置倾斜

1. italic(倾斜)
2. normal(默认值)，可以给em、i标签去除倾斜

• font-family:设置字体
  1.中文字体都要加引号
  2.一个单词的英文字体不需要加引号，多个单词的英文字体需要加引号
  3.支持设置多种字体，中间用,隔开，从左到右加载，如果能解析的话，就不回家在后边的字体
  4.中文字体和英文字体同时出现，英文字体放在前面
• line-height:行高（文字的高+上下的边距）
  1.单行文本垂直居中：line-height的值与height的值一样
• 复合写法： font属性简写在一个声明中设置所有字体属性
  顺序：font:font-style|font-weight|font-size/line-height|font-family
  注：1.简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写（在写的时候|即是空格）
  2.顺序不能改变，这种简写方法只有在同时指定font-size和font-family属性时才起作用(这两个不能省)

3.文本属性

• text-align: 控制文本的水平对齐方式
  left （默认） center right justify(两端边距)
• text-dacoration: 规定添加到文本的装饰效果
  1.overline(上线)
  2.underline(下线)
  3.line-through(贯穿线)
  4.none（默认）去掉del标签上的贯穿线
• text-indent: 规定文本块首行的缩进
• color: 设置字体的颜色
  颜色表示形式：
  1.英文单词：red,yellow,pink…
  2.十六进制：三原色（红，绿，蓝）

4.CSS单位

px: 像素，绝对长度单位
em:相对长度单位
1.如果自身有font-size，em以自身的font-size来说
2.如果自身没有font-size,父元素上有，em以父元素上的font-size来说
百分比%： 相对于父元素width/height
rem:相对字体长度单位，根元素（html）的font-size计算

5.盒模型—边框、padding、margin

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个矩形都有元素的内容、内边距（padding）、边框(border)和外边距(margin)组成

边框

• border-width:设置边框的大小
• border-style:设置边框线的类型
  1.solid:实线
  2.dashed:虚线
  3.double:双线
  4.dotted:点状线
  5.none:去除边框
• border-color:设置边框颜色
• 复合写法：
  border:border-width border-style border-color;(属性之间用空格隔开)
• 单方向设置复合写法：
  border-top/border-right/border-left/border-bottom:border-width border-style border-color;

盒模型-内边距padding

• padding:用于控制内容到边界的距离
• 单方向设置：
  padding-top/padding-right/padding-bottom/padding-left
• 复合写法：
  padding:（顺时针）
  一个值：代表上右下左
  两个值：第一个值代表上下 ，第二个值代表右左
  三个值：第一个值代表上 ，第二个值代表右左 ，第三个值代表下
  四个值：代表上右下左
• 注意：
  加padding值会将盒子所占区域变大，解决？
  1.width/height需要减，前提必须设置了宽高
  2.box-sizing:border-box;
  背景色是从padding开始铺的

盒模型-外边距margin

• margin:围绕在元素边框周围空白区域范围的属性
• 单方向设置与复合写法参考padding

学习时间：

2022-7-1

---