HTML+CSS day03

学习目标：

HTML+CSS day03

• 基本选择器
• 字体与文本属性
• CSS单位
• 盒模型-边框、padding
• margin

---

学习内容：

1.基本选择器

• 类型选择器：
  标签名作为选择器
• id选择器： #id名{}
  id名是唯一的
  1.用于给外围结构起的id名
  2.js通过id名获取元素
  标识符：自主起的名字
  ------规范：字母、数字、连字符（-/_）组成，必须字母开头
• 类选择器（class选择器）: .class名{}
  选择页面中类名相同的标签
  一个p标签或者div可以有多个class名，用空格隔开
  eg: <div class="box1 box2"></div>
• 通配符选择器： *{}
  选择所有的标签进行css样式修改，去除所有标签的外内边距
  eg: *{ margin: 0; padding: 0; }

选择器的优先级

id选择器>类选择器（class）>类型选择器（标签）>通配符选择器
只覆盖相同属性
优先级一样时，靠后的CSS样式优先级高

2.CSS字体属性

• 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-6-30

---