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)
http://img2.58codes.com/2024/20137684VjWTg3VVbY.png


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;      }

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章