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