三、文字样式、文本样式、颜色与单位、盒模型

一、文字样式（可继承）

• 继承： 给父元素设置样式后，里边的子元素也可以应用上
• 继承来的样式优先级没有自己本身优先级高

1.文字大小

• 浏览器默认字体大小16px 支持最小字体是12px

   font-size: 30px;
  

2.行高

• 技巧：行高的值和盒子高度一致时，可实现单行文字垂直方向居中

  line-height: 80px;
  

3.文字是否倾斜

font-style: italic;  倾斜
font-style: normal; 不倾斜

4.文字是否加粗

font-weight: bold;  加粗
font-weight: normal;  不加粗

5.字体

• 可以设置多个字体，多个字体中间用逗号隔开，首先使用第一个字体，如果第一个字体电脑上没有，那就使用第二个字体，依次类推。如果设置的字体电脑上都没有，就用电脑上默认自带的字体

font-family: 'Courier New1' , '楷体';

6.复合写法

• font里 字体大小和字体是必须写的，其他的可以省略不写

font: italic bold 30px/60px '楷体';
	  倾斜   加粗   字体大小/行高  字体

二、文本样式 （可继承）

1.文字颜色

• a标签的文字样式必须选中它自己设置才行

 color: blue;

2.首行缩进

• 单位： px 或 em
  • em: 表示当前字体大小的倍数

text-indent: 3em;

3.文字水平对齐方式

• 给父元素设置text-align，可以让父元素里边的内联标签和内联块标签改变水平对齐方式

text-align: justify; 两端对齐
text-align: left; 默认值 居左
text-align: center; 居中
text-align: right;  居右

4.文本装饰

《了解》text-decoration: underline red wavy; //下划线  线条颜色  线条样式
    线条样式（wavy 波浪线  dotted  点状线  dashed 虚线  double 双实线  solid 实线（默认） 《/了解》
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 中划线
text-decoration: none; 取消装饰

5.扩展（了解）

            /* 英文单词能显示几个字母，就显示几个，放不下在换行 */
            word-break: break-all;
            /* 字母与字母之间的空隙 */
            letter-spacing: 20px;
            /* 单词与单词之间的空隙 */
            word-spacing: 50px;

三、颜色与单位

1.颜色

• 英文单词（red blue。。。）

• 十六进制： #六位十六进制数 或 简写 #三位十六进制数

  • #ff0000 前两位表示红色 中间两位表示绿色 后两位表示蓝色
  • #f00 如果两位两位是相同的可以省略一个
  • #fff 纯白 #000 纯黑

• rgb(255,0,0) r表示红色 g表示绿色 b表示蓝色 取值：0-255

  • rgb(0,0,0) 纯黑 rgb(255,255,255) 纯白色

• rgba(255,0,0,0.5) a表示透明度 取值0-1 (0 表示完全透明，1 表示完全不透明)

• transparent 透明

  color: red;
  color: #ff0000; 
  color: rgb(0,0,255); 
  color: rgba(255, 0, 0, 1); 
  color: transparent;
  

2.单位

• 固定单位 px 像素
• em 相对于当前字体大小的倍数
• rem 相对于根标签（html标签）字体大小倍数
• % 百分比 相对于父元素宽高的百分比

四、盒模型

• 每个标签都有自己的盒模型，一个标签在浏览器中所占的位置就叫盒模型
• 盒模型组成： 宽高 + padding + border + margin

1.边框线

（1）第一种写法

border-width: 10px 20px 30px 40px;    边框粗细
border-style: dashed(虚线) dotted(点状线) solid(实线) double(双实线);  边框线条样式
border-color: yellowgreen orange yellow skyblue;  边框颜色

三个样式都可以设置多个值：

• 一个值：四周的边框样式
• 两个值： 上下 左右
• 三个值： 上 左右 下
• 四个值： 上 右 下 左

（2）第二种写法

border-top:10px solid plum ;  上边框
border-right: 10px dashed orange;  右边框
border-bottom: 10px dotted  red; 下边框
border-left: 10px double green; 左边框

值： 边框粗细 边框样式 边框颜色

值为none时，取消某条边框线

（3）第三种写法

border: 20px  solid  #000 ;

值为none时，取消某条边框线

（4）小三角实现

 .box{
            width: 0px;
            height: 0px;
            border-width: 0px 50px 50px;
            border-style: solid;
            border-color: transparent  transparent  orange;
}

2.内边距

• 内容到边框线的距离
• 注意：不能设置负值， 盒子的背景色默认是延伸到内边距上的

（1）第一种写法

padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;

（2）第二种写法

padding: 20px;
padding: 20px 30px;
padding: 20px 30px 40px;
padding: 20px 30px 40px 50px;

多个值：

• 一个值：四周的内边距
• 两个值： 上下 左右
• 三个值： 上 左右 下
• 四个值： 上 右 下 左

3.外边距

• 盒子边框线以外的距离
• 值可以为负

（1）第一种写法

margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px; 

• margin-top 和margin-left 改变的是自己的位置

（2）第二种写法

margin: 50px;
margin: 50px 60px;
margin: 50px 60px 70px;
margin: 50px 60px 70px 80px;

多个值：

• 一个值：四周的外边距

• 两个值： 上下 左右

• 三个值： 上 左右 下

• 四个值： 上 右 下 左

• 注意： 可通过margin 将有固定宽度的块标签水平方向居中

  margin: 0px auto;
  

清除默认样式

  *{
            margin: 0px;
            padding: 0px;
            /* 清除列表前边的装饰 */
            list-style: none;
        }