自学——一个月入门前端③

今天的css主要的内容包括有文本的各类知识和层叠与继承，级联层，层联层的相关知识。

文本

衡量大小

font-size

px表示绝对的单位，任何情况下，文本的像素值都是一样的。

em表示相对于当前字体的大小。

rem相对于根元素的字体大小

%相对于父元素的百分比

vw相对于视窗宽度的百分比

vh相对于视窗高度的百分比

font-style

表示打开或者关闭文本。normal，italic，olique

font-weight（文本的粗细）

normal,bold lighter bolder.100-900加上数值控制。

text-transform

转换的字体，值包括none，uppercase，lowercase，capitalize（所有单词的首字母大写），full-width（全角），

text-decoration

文本装饰。none，啥都没有，underline下划线overline上划线，line-through穿过文本的线

font-family

也就是字体的种类，我们可以规定不同的种类，例如font-family: arial。但是有很多的浏览器支持的字体数量不一样，所以可以多写几个，保证有一个是可以的。（逗号隔开）

text-shadow

4px 4px 5px red;最多需要四个值。略过去

text-align

文本布局，来控制文本如何和所在的内容盒子对齐。left左对齐文本，right右对齐文本，center居中文本，justify使文本展开，改变单词之间的差距。使得所有文本行宽度相同。

line-height

行高，设置文本每行之间的高，

letter-spacing word-spacing

字面意思，字母距离和单词距离

text-indent

可以定义一个块元素首行文本内容之前的缩进量。

---

---

层叠与继承

css表示的是cascading style sheet，第一个词表示的就是层叠，所以层叠的表现很关键。

简单来说就是会从前向后加载，后面的会覆盖前面的。

所以需要有优先级，越具体的优先级会越高。

继承，表示给父类设定之后，子类就会继承。例如p中有span，那么color都是一样的，如果再重写了一次span的color就会覆盖父类的color。但是有些属性是不继承的，例如width为50%，所有的后代不会是父元素的宽度的50%。

举例：

<ul class="main">
    <li>Item One</li>
    <li>Item Two
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>Item Three
        <ul class="special">
            <li>3.1
                <ul>
                    <li>3.1.1</li>
                    <li>3.1.2</li>
                </ul>
            </li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

.main {
    color: rebeccapurple;
    border: 2px solid #ccc;
    padding: 1em;
}

.special {
    color: black;
    font-weight: bold;
}

那么像width，margin，padding，border是不会被继承的。

控制继承

inherit表示该元素会使得子元素的属性和父元素一样，实际上就是开启继承。

initial将应用用于选定元素的属性值设置为该属性的初始值。

unset设置为自然之，如果是自然继承就是inherit，否则是initial

例如：

body {
    color: green;
}
          
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

重设所有的属性值

css的简写属性all可以同时将所有属性的继承值都设置一下

.fix-this {
    all: unset;
}

理解层叠

资源顺序，后面的会覆盖前面的规则。

优先级，后面应用的规则优先级低于前面的规则，还是会应用优先级高的。（ID > class > element 优先级的高低，分别是百十个）举例：

/* 1. specificity: 1-0-1 */
#outer a {
    background-color: red;
}
        
/* 2. specificity: 2-0-1 */
#outer #inner a {
    background-color: blue;
}

/* 3. specificity: 1-0-4 */
#outer div ul li a {
    color: yellow;
}

/* 4. specificity: 1-1-3 */
#outer div ul .nav a {
    color: white;
}

/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

背景颜色会应用blue，color是white，border是第五个。

内联样式的优先级别最高可以看作千位。

（还有一个!important会覆盖所有的优先级计算，不建议使用）

---

级联层的顺序

总之在级联层中的声明的顺序决定了优先级的顺序。也就是加载的顺序和重叠的顺序不同。好像是在叠层。！！！（后声明的优先级更高）

改变声明的顺序之后会改变谁在上层谁在下层。

还有不同的地方，一半后面的层的优先级会比前面的高，但是先声明！important的属性要比后定义的要高

---

test your skills : The Cascade

task1:

using controlling inheritance to change this example?

   #outer div ul .nav a {
      background-color: powderblue;
      padding: 5px;
      display: inline-block;
      margin-bottom: 10px;
    }

    div div li a {
      color: rebeccapurple;
    }             

可能没搞太懂具体的需求，首先整个的优先级是第一个大于了后一个，所以先执行上边的，后执行下边的。但是不管谁先，都会加上一个蓝色边框，所以可以直接把这个backgrouncolor给删掉即可。或者新加一个background-color是white覆盖掉原来的蓝色。当然优先级会更高。

     #outer #inner ul .nav a{
      background-color: white;
     }

再看了一下他需要使用继承相关的，那确实想不出来有啥好办法。继承是后者覆盖前者，有优先级高的优先。这个都指向了a优先级有差别，先做优先级高的，再做优先级低的。p里面的span默认会和p一样， span特殊规定之后才会和a不同。哦哦，有一个，就是继承的关系，如果有继承那么使用，否则用原来的unset。

    #outer div ul .nav a {
      background-color: powderblue;
      padding: 5px;
      display: inline-block;
      margin-bottom: 10px;
    }

    div div li a {
      color: rebeccapurple;

    }     
     #outer #inner ul .nav a{
      background-color: initial;/* 或者unset */
     }

task2:

     @layer yellow, purple, green;

      @layer yellow {
        #outer div ul .nav a {
          padding: 5px;
          display: inline-block;
          margin-bottom: 10px;
        }
      }
      @layer purple {
        div div li a {
          color: rebeccapurple;
        }
      }
      @layer green {
        a {
          color: lightgreen;
        }
      }               
    

要求是不能修改lightgreen的定义，而是需要使用级联层。

首先这个里面没有important所以按照的顺序是从后向前，想要让green的优先级在perple只后即可。 @layer green, yellow, purple;

---

层叠层

你可以使用@layer 规则来创建层，如果一个@layer 规则之后接着的是一个标识符和一个快样式，那么这个标识符即使这个层的命名。

如果这个名称的层以及存在，会加入到之前的层。

如果这个层没有指定名称，那么这个样式会被加入到一个新的匿名层中。

下面的例子帮助理解这个层 命名关系。

/* 文件：layers1.css */

/* 未分层的样式 */
body {
  color: #333;
}

/* 创建第一个层：`layout` */
@layer layout {
  main {
    display: grid;
  }
}

/* 创建第二个层：一个未命名的匿名层 */
@layer {
  body {
    margin: 0;
  }
}

/* 创建第三和第四个层：`theme` 和 `utilities` */
@layer theme，layout，utilities；
/* 向已经存在的 `layout` 层添加样式 */
@layer layout {
  main {
    color: #000;
  }
}

/* 创建第五个层：一个未命名的匿名层 */
@layer {
  body {
    margin: 1vw;
  }
}

层的声明也很有关系，如果我们没有提前声明层，那么层就会按照先后的关系进行覆盖，如果有先去声明的话，就会按照声明的先后关系进行覆盖。

---

层创建和媒体查询

    @media (min-width: 100em) {
      @layer site;
    }
    
    @layer page {
      h1 {
        text-decoration: overline; 
        color: red;
      }
    }

    @layer site {
      h1 {
        text-decoration: underline; 
        color: green;
      }
}

如果这个media的条件不满足，那么始终这个site会覆盖page，但是当这个条件满足之后，site成了先定义的，那么就会被page 给覆盖掉。

媒体的含义就是这个宽度最小是100em，也就是说，宽屏的情况下我们才会进入这个声明，如果小过了这个范围，那么就不会声明。

使用特性查询

@supports (property: value) {
  将要应用的 CSS 规则
}
@supports (row-gap: 10px) {
    .box {
        border: 4px solid red;
        color: red;
    }
}
   @supports not (row-gap: 10px) {
    .box {
        border: 4px solid red;
        color: red;
    }

}
@supports not (row-gap: 10px) {
    .box {
        border: 4px solid red;
        color: red;
    }
} 
@supports (property1: value) or (property2: value) {
  将要应用的 CSS 规则
}

---

使用@import将样式表导入具名层和匿名层

@import url(“styles.css”) layer(components)

将定义好的样式表导入到不同的层中。

导入到了components,components中的dialog层，和一个未命名层。

@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();

将多个css文件导入到单个层。

@import url(comments.css) layer(social);
@import url(sm-icons.css) layer(social);

使用媒体查询和特性查询根据特定条件导入样式并创建层。

@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
  (width < 32rem);
@import url("ruby-wide.css") layer(international) supports(display: ruby) and
  (width >= 32rem);