继承

我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。
当然还有一部分是不能继承的。

• 例如边框、内外边距。

  层叠

  层叠是CSS的核心机制。
  层叠的工作机制：
• 当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。

层叠规则：

层叠规则一：找到应用给每个元素和属性的声明。

说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，
并标识出所有受到影响的HTML元素。

层叠规则二：按照顺序和权重排序。

按顺序：

• 浏览器依次检查CSS样式的来源，并设定匹配的属性，如果

             匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。
  

权重排序：!important

层叠规则三：按特指度排序。

计算特指度(ICE 公式)
I（id） C（class） E（Element）

1. 选择器中有一个ID，就在I的位置上加1；
2. 选择器中有一个类(class),就在C的位置上加1；
3. 选择器中有一个元素(标签)名，就在E的位置上加1；
4. 得到一个三位数。得到的这个数就是我们的特指度。

例如： I C E
p 0 0 1 特指度=1
p.largetext 0 1 1 特指度=11
p#largetext 1 0 1 特指度=101
body p.largetext 0 1 2 特指度=12
body p#largetext 1 0 2 特指度=102

层叠规则四：顺序决定权重。

说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，
则位置最靠下的胜出。

在特指度相同的情况下，按排列

通俗来理解：一个元素占1，类占10，ID占100，若一个元素上存在多个类，则在元素1权重基础上添加多个类权重10，ID同理。然后按照最终权重进行选择，css采用权重最大元素样式

• html

  <!--<div class="inherit">sdfgddfg
    <p>asdfjkhasdfaskdjfjh</p>
    <a href="#">dfgadsfg</a>
  </div>-->
  <div id="divone" class="mydiv"></div>
  

• css

  @charset "utf-8";
  /* CSS Document */
  div{
       
    width:200px;
    height:200px;
    background:#336;
  }
  .mydiv{
       
    width:200px;
    height:200px;
    background:#9C6;
  }
  #divone{
       
    width:200px;
    height:200px;
    background:#900;
  }
  /*    .inherit{
  height:200px;
    width:200px;
    border:2px solid #C30;
    color:#900;
    font-size:30px;
  }*/
  p{
       
    color:#F06;
  }
  

  字体与文本

  字体相关属性

  color:
• 该属性用于控制字体颜色，该属性值包括字符类型的颜色名、十六进制的颜色值、

  rgb(255,255,255)值。还有CSS3提供的HSL颜色值。
  

font-famliy:

• 设置文字的字体。因为浏览器内嵌字体的支持，该属性可以设置多个显示字体，

        浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字，
        多个属性值之间用逗号(,)隔开。
  

font-size:

• 设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。

  还可以使用关键字。例如：medium,samll,large,samller,larger等
  

绝对字体大小：
使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，它们是绝对单位，设置多大就是多少，不会受到祖先元素的字体大小影响。

相对字体大小：
使用百分比(%),em或者rem,这些单位的值是相对的，该字体的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，比绝对字体大小的设定要复杂点。

font-style:设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。
font-weight:设置字体是否加粗。属性值：lighter,normal,bold,bolder.
font-variant:设置文字的大写字符的格式。属性值：normal,small-caps(小型的大写字母字体)

font: 简写。

• 规则一：必须声明font-size和font-famliy的值
• 规则二：声明顺序
  ① font-weight,font-style,font-variant不分先后
  ② 然后是font-size
  ③ 最后是font-famliy

• html

  <p style="font-size:20px;color:#E94;">___________________字体属性________________________</p>
  <p style="color:#0f0;">color属性值用来控制字体颜色</p>
  <p style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif">
  font-family属性设置字体样式
  </p>
  <p style="font-size:30px;">font-size属性用来设置字体的大小</p>
  <p style="font-style:italic; ">
  font-style属性用来设置字体的风格，属性值：normal(默认值：正常)，italic(斜体)，oblique(倾斜)
  </p>
  <p style="font-weight:bold;">
  font-weight:属性用来设置字体是否加粗。属性值：lighter,normal,bold,bolder.
  </p>
  <p style="font-variant:small-caps">
  font-variant设置文字的大写字符的格式.属性值：normal,small-caps(小型的大写字母字体)
  </p>
  <p style="font:26px  'Times New Roman', Times, serif">
  font: 简写。简写规则：<br/>
   规则一：必须声明font-size和font-famliy的值<br/>
  规则二：声明顺序<br/>
    ①font-weight,font-style,font-variant不分先后<br/>
    ②然后是font-size<br/>
    ③最后是font-famliy<br/>
  </p>
  <p style="font-size:20px;color:#E94043;">___________________字体属性________________________</p>                                <br/>
  <p style="font-size:20px;color:#E94043;">___________________文本属性________________________</p>
  

  文本属性

  text-decoration：该属性用于控制文字是否有修饰线。
  属性值：
• none
• underline(下划线)
• line-through(中划线)
• overline(上划线)
• blink(闪烁)

text-align:设置文本对齐。属性值：center,left,right,justify(两端对齐)。

text-shadow:该属性用于设置的文字是否有阴影效果。

• color:指定该阴影的颜色。
• xoffset:指定阴影在横向上的偏移。
• yoffset:指定阴影在纵向上的偏移。
• radius：A指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。
  • 多重阴影：多加几组数据即可。

    text-shadow:5px 5px 2px red;
    text-shadow:xoffset yoffset radius color;
    

line-height:设置文字的行高，即字体最低端与字体内部顶端之间的距离。
负值的行高可以实现阴影效果。

text-transform:设置文字的大小写。属性值：none,capitalize(首字母大写),
uppercase(全部大写),low ercase(全部小写)

letter-spacing:设置字符之间的间隔。

word-spacing:设置单词之间的间隔。

• html
  ```html

  
  text-decortion:该属性用于控制文字是否有修饰线。属性值：none,underline(下划线),
  line-through(中划线),overline(上划线),blink(闪烁)
  

  
  

  
  text-align:设置文本对齐。属性值：center,left,right,justify(两端对齐)。
  

  
  

  
  text-shadow:该属性用于设置的文字是否有阴影效果。
  color:指定该阴影的颜色。
  xoffset:指定阴影在横向上的偏移。
  yoffset:指定阴影在纵向上的偏移。
  radius：A指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。
  多重阴影：多加几组数据即可。
  sytle="text-shadow:5px 5px 2px #cf0"
  

  
  
  
  设置文字的行高，即字体最低端与字体内部顶端之间的距离。
  
  
  

  
  text-transform:设置文字的大小写。属性值：none,capitalize(首字母大写),
  uppercase(全部大写),lowercase(全部小写)
  

  
  

  letter-spacing:设置字符之间的间隔

sdfasdfsdf

🤩CSS教学往期回顾

1. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
2. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

   💕👉博客专栏

• Golang专栏-包含基础、Gin、Goam等知识
• 云原生专栏-包含k8s、docker等知识
• 从0开始学习云计算-华为HCIP证书
• JUC专栏-带你快速领悟JUC的知识！
• JVM专栏-深入Java虚拟机，理解JVM的原理
• 基于Java研究 数据结构与算法-包含贪心算法、加权图、最短路径算法等知识
• Docker专栏-上手热门容器技术Docker
• SpringBoot专栏-学习SpringBoot快速开发后端
• 项目管理工具的学习-设计技术：Maven、Git、Gradle等相关管理工具
• JavaSE-全面了解Java基础
• JS专栏-使用JS作的一部分实例~
• CSS教学与CSS案例解析