CSS字体样式

补充 选择器的权重

面题：样式冲突 通过不同的选择器选中同一个元素，进行一样
      的样式 设定
      发生样式冲突时，应用哪一个样式由选择器的权重（优先
      级）决定

     选择器的权重  
       !important    最高优先级     慎用  一般是用来检
       测是否是选择器权重问题
       内联样式                                 1000  
       id选择器                                                100
       类和伪类选择器/属性选择器                   10
       元素选择器                                 1
       通配符、子选择器、相邻选择器等。如*、>、+   0000
       继承的样式      没有优先级
     
    注意：
      1、比较优先级时，需要将所有选择器的优先级进行相加计
         算，最后优先级越高，则优先显示
      2、(并集选择器)分组选择器是单独计算的
      3、 如果优先级计算后相同，此时则优先使用靠下的样式
      4、选择器的累加，不会超过上一级数量级，
          例如：类选择器再高也不会超过id选择器  量变达不
          到质变 
      
        一般来说：
        选择器越具体，优先级越高
        
        !important  慎用   

长度单位

长度单位
 1:像素 px
     实际上是屏幕上的一个个小点，100px，100个小点，这个
     点，正常情况我们是看不到，
     如果我们把一个内容放大很多倍，就可以看到了，
     在pc端（电脑端），一般情况下1px=1个发光点。
     也是我们最常用的长度单位，它是固定单位
 2:百分比 %  
     相对单位，它是相对于其父元素内容区（width/height）
     宽高
     子元素的大小会随着父元素的大小变化而变化，我们管这种
     大小布局，叫流式布局
 3:em
     相对单位，它是相对于其父元素内字体大小而设置的，也就
     是1em=父元素1个font-fize，
     如果父元素没有字体大小，它就会继承祖先元素的字体大小
     ，如果祖先元素没有设置，
     就会继承根标签（html）的默认的字体大小，也就是16px
 4:rem 
     r  （root）
     相对单位，它是只相对于根标签（html）的字体大小而设置
     ，也是1rem=1个html的font-size
     html的默认字体大小是16px，有些浏览器有最小的字体大
     小，一般是10-12px
 5:vw
    viewport width  视口的宽度
    6:vh 
    viewport heigth  视口的高度

    我们把视口划分为100个，宽度100vw，高度100vh

颜色的单位

颜色单位：
  1:在CSS可以直接使用颜色的单词来表示不同的颜色
    red,green,yellow等，一些简单的颜色，可以用英文单词
    但它不是很方便，一则单词太多，二则颜色也不好描述。

  2:使用RGB值来表示不同的颜色
    rgb（red，green，blue）   浓度0-255
    这个比值不需要记，一般是设计师设计好，或者直接吸取
    颜色

 3:RGBA
    rgba(red, green, blue, alpha)
    alpha  透明度  0-1之间  
    0是透明，1是不透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只
   不过表示的方式不一样
    rgb（200，100，80）
    0-9abcdef  16个数字
 语法：#红色的浓度绿色浓度蓝色的浓度
      #7f2eaa
   00 表示最小    0
   ff 表示最大   255
  红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一
 样的，可以省略一位
   #ff0000  可简写#f00
   #f0f0f0  不可简写

常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，
#000 ,#fff

5:HSL值  HSLA值（了解）
     HSLA值（色度，饱和度，亮度，透明度）

字体的样式

1:color   设置字体颜色,也可以设置其他颜色,例如边框的颜色
等
2:font-size  设置字体的大小,注意不同的单位px，em，rem
3:font-family  可以指定文字的字体   设计师也会提前设计好
4:@font-face   自定义字体

<style>
      /* 自定义字体 */
      @font-face {
        /* 你给字体起的名字 */
        font-family: "xiyangyang";
        /* 字体的引入路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
      @font-face {
        font-family: 'meiyangyang';
        src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
      }
      p {
        color: #f00;
        font-size: 5rem;
        /* font-family:'Times New Roman', Times, serif; */
        font-family: "meiyangyang";
      }
    </style>

<style>
			.p1{
				/* 设置一个文字大小 */
				font-size: 30px;
				/* 设置一个字体 */
				font-family: Arial, Helvetica, sans-serif;
				/* 设置文字斜体 
				font-style  
				  可选值：normal  文字正常显示
				         italic  文字斜体  比较常用
						 oblique  文字斜体
				*/
				font-style:oblique;
			}
		.p2{
			color: red;
			/* 设置文字的加粗 
			font-weight  
			   可选值:
			     normal  文字正常显示  默认值
				 bold/bolder  文字加粗
				 100-900之间的数值   100是最细，900最粗   
			*/
			font-weight:700;
			/* 设置一个小型大写字母 
			font-variant: ;
			   可选值：
			      normal  文字正常显示  默认值
				  small-caps  字母小型大写字母
			*/
			font-variant:small-caps;
		}
		.p3{
			/* font 可以同时设置以上所有的字体相关的样式，颜色不可以
			注意：
			  1、必须有字体大小和字体
			  2、字体必须在倒数第一位，字体大小必须在倒数第二位
			*/
			color: green;
			font: italic bold 40px  sans-serif;
		}
		</style>

字体的分类

在网页中将字体分成5大类：
      serif  ['serif]（衬线字体）
      sans-serif（非衬线字体）
      monospace （等宽字体）
      cursive ['kə:siv]（草书字体）
      fantasy  ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器
会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体,
用来兜底

<p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>

文本样式

行间距

     1、行高（line height）
        文字占有的实际高度 
        行高=上间距+字体的大小+下间距
        其中，字体是垂直居中显示，上间距=下间距
        line-height  设置行高
           可选值：
             1、直接放一个大小，例如：40px
             2、还可以放倍数，是当前字体大小的倍数
             3、可以放百分比
     2、单行文本在父元素中垂直居中
        只要设置父元素的行高和高度一致即可
     3、font中也可以指定行高
        font:字体大小/行高  字体类型;

文本样式

1: text-transform 可以用来设置文本的大小写  
        可选值：
        none       默认值，文本正常显示
        lowercase  文本以小写字母显示
        uppercase  文本以大写字母显示
        capitalize  首字母大写
2: text-decoration  [dɛkə'reɪʃ(ə)n] 可以
用来设置文本的修饰
         可选值：
        none        默认值，文本正常显示
        overline    上划线
        underline   下划线
        line-through 删除线 
3: letter-spacing可以指定字符间距 
4: word-spacing可以设置单词之间的距离
5: text-align用于设置文本的对齐方式 
         可选值：
         left        默认值  文本靠左显示
         right       文本靠右显示
         center      文本居中显示
         justify     两端对齐      

6: text-indent 设置首行缩进
               可选值：
               常用长度单位： px，em ，rem 

7: white-space: ; 设置网页如何处理空白
8: text-overflow 文本溢出包含元素时发生的事情 
     设置单行文本的省略号固定写法 
        设置一个固定的宽度
        width: 200px;
        设置换不换行
        white-space:nowrap;
         裁剪多余 
        overflow: hidden;
        设置溢出内容以省略号的形式出现 
        text-overflow: ellipsis;
9: text-shadow:;  设置文本的阴影
     4个参数：
     （1）阴影的水平位移距离   正值向右偏移，负值向左偏移
          必选
     （2）阴影的垂直位移距离   正值向下偏移，负值向上偏移
          必选
     （3）阴影的模糊半径       可选    默认0px
     （4）阴影的颜色  一般用rgba颜色  可选，默认是字体
          的颜色
     
  text-shadow:10px 10px 10px rgba(255, 0, 0, .4);

10: box-shadow ： 盒阴影
     4个参数：
      (1)、阴影的水平位移距离   正值向右偏移，负值向左
            偏移   必选
     （2）、阴影的垂直位移距离   正值向下偏移，负值向上
            偏移   必选
     （3）、阴影的模糊半径       可选    默认0px
     （4）、阴影的颜色  一般用rgba颜色  可选  默认是黑色
    div:hover{
        box-shadow: 0px 0px 30px ;
    }

11:vertical-align  
         作用：1、设置图文对齐方式
              2、解决图片三像素的问题
        可选值：
          baseline   基线对齐  以英文x最底下为对齐标准
          bottom     底部对齐
          top        顶部对齐
          middle     居中对齐   


面题：什么是图片三像素的问题，如何解决这个问题
    1、vertical-align 设置非baseline默认值即可
    2、可以设置其父元素的font-size为0,注意如果父元素里
       有文字，需要重新设置字体大小
    3、可以讲图片转成块元素
    4、将元素脱离文档流，例如可以设置浮动，设置弹性盒子，
       设置绝对定位 
12:display  设置元素的相互转换
          可选值：
         none                     隐藏元素
         block             将元素专成块元素
         inline          将元素转成行内元素
         inline-block  将元素转成行内块元素

        注意：元素之间的相互转换，可以用，但还是标签的本
             来分类为主