Day 6 (CSS)

1.grid的justify-content水平对齐、align-content垂直对齐

=>因grid没有主轴次轴的问题(二维),flex才有
(档案grid置中)

      .grid-container {
        /* justify水平对齐 */
        justify-content: center;
        /* align垂直对齐 */
        align-content: center;
      }

但,此时会依照text置中,没办法div整个置中

      .grid-container {
        justify-items: center;
        align-items: center; 
      }

2.emmet 好用简写方式

ex: #box>div{$}*28
https://www.wfublog.com/2017/08/emmet-sublime-text.html

3.取得box-shadow的工具

https://html-css-js.com/css/generator/box-shadow/

4.input:focus没有外框不是用border,用outline

      .item form input[type="text"]:focus {
        outline: 0;
      }

5.置中要注意有没有其他元素推到位置

(档案grid28关卡练习+(emmet简写))

    * {
        box-sizing: border-box;
      }

    #box > div 
      {
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

须改40px,因border: 5px => 5px*2占了10px 会被推下去

      #box > div:hover {
        border: 5px solid #faa;
        line-height: 40px;
      }

所以最好用还是

     /* 主轴次轴置中 */
     display: flex;
     justify-content: center;
     align-items: center;

6.text-overflow

这三个属性是绑在一起的,同时出现才可以让多余的文字用"..."代替

      .title {      
         /* 多余的文字藏起来 */
        overflow: hidden;
        /* 不换行 */
        white-space: nowrap;
        /* 变成删节号... */
        text-overflow: ellipsis;
      }

文字换行

   word-wrap:break-word;

7.CSS Color Values

With CSS, colors can be specified in different ways:
https://www.w3schools.com/colors/default.asp

(1) By color names->上课用

(2) As RGB values->常用,16进制

#Red Green Blue
Ex:#ff0000 =>#f00

0 1 2 3 4 5 6 7 8 9 =>10进制
0 1 2 3 4 5 6 7 8 9 A B C D E F =>16进制
FF=16*16=256

RGBA:透明度

(3) As hexadecimal values

(4) As HSL values (CSS3)->色调,饱和,亮度 设计师常用

HSLA:透明度
可以使用calc计算出对应色( + 180)
档案(30_var,calc()练习)

      .demo3 {
        --bee: 60;
        background-color: hsl(var(--bee), 100%, 50%);
        color: hsl(calc(var(--bee) + 180), 100%, 50%);
      }

(5) As HWB values (CSS4)

(6) With the currentcolor keyword

8.渐层工具

https://cssgradient.io/

9.透明度设定

opacity、RGBA、HSLA、transparent

background-color: transparent

10.F12开发检查调整

键盘上下可以调整角度,试试看(115deg)

11.deg 背景-颜色及角度的使用

由上到下(预设),天空蓝占(空格)50%,透明占(空格)50,图片
(档案linear-gradient_练习)

    .banner {
      background-image: linear-gradient
      (115deg, #77bbff 50%, rgba(255, 255, 255, 0) 50%), url(XXX.jpeg);
    }

12.line-height 文字之间的垂直间距

分配空间给文字的上下方
=>只有"单行"才可以拿来做"整体的"垂直置中,否则会换行,举例如下:

      p {
        /* 单行置中 */
        height: 200px;
        text-align: center;
        line-height: 200px;

如果内文超过一行,格式就会错乱

13.text-decoration

wavy是一个style,必须搭配line才能用
https://www.w3schools.com/cssref/pr_text_text-decoration.asp
(Definition and Usage)
缩写位置可以不一样是因为不同性质

     p:nth-of-type(5) {
        /* underline必要,还有别种line可用 */
        text-decoration: wavy underline overline line-through red;
      }