color
字体颜色color: red;
color: #AA2;
font-size
字体大小font-size: 16px;
font-size: large;
font-family
字型font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align
文字对齐可以对齐的不只有文字,而是元素内的东西都可以做对齐
预设靠左
text-align: left;
text-align: right;
text-align: end;
left
、right
跟stard
、end
有何不同呢?
left
、right
不用多说,就是左边右边。
而stard
、end
则是需要看父层属性,
如果父层左到右,end
子层就是右到左
text-indent
首行缩排px
可用 16px 乘上 2(字元数) = 32px
pc
字元数
text-indent: 32px;
text-indent: 2pc;
text-decoration
文字装饰underline
底线
line-through
中线、删除线
text-decoration: underline;
text-decoration: line-through;
text-decoration: none;
line-height
行距行间距离计算方法是字体大小(font size)预设16 乘上倍数(1.5) = 24px
文字会在行距内上下置中
单行文字可透过设定行高与父元素相同达到垂直置中效果
line-height: normal;
line-height: 24px;
line-height: 1.5;
normal
数值取决於浏览器,通常为1.2
letter-spacing
字距、文字间距、字间距离letter-spacing: 2px;
background
背景、背景图片、背景颜色background-color: green;
background: greenyellow;
background: green url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Imgur_logo.svg/1200px-Imgur_logo.svg.png");
background-size: cover;
background
是缩写,包含了以下属性:
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
可同时设背景颜色及放背景图片
background-image
CSS背景放图片在<div>
图片背景中可以再放文字或表单,比起<img>
元素有更多应用空间。
img可拖曳、背景图不可被滑鼠拖拉。
网页元素大小比图片还大时,预设会自动重复图片
可搭配去背png图片
HTML
<div class="box"></div>
CSS
.box{
width: 500px;
height: 500px;
background-image: url("https://picsum.photos/200/200");
}
background-repeat
图片重复、图片不重复、X轴上重复、Y轴上重复
(背景图片渐层时常用)
background-repeat: repeat
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-color
可与背景图片一起使用(图片会在上层、颜色在下层),
当渐层的背景图长度不够、文字内容却多到需要向下延伸时,可定色到渐层图的最底部颜色
background-color: #005599;
width
、height
长度宽度高度height: 20px;
width: 300px;
auto
如果左右都写auto
,会按照父元素的宽度平均分配空间出来
如果只设height
或width
其中一个值,会自动推算、推挤出另一个维度(高度或宽度)出来。
cursor
游标设定游标移上物件时显示的图示,
让使用者觉得是可点击、可互动的效果
cursor: pointer;
cursor: wait;
border-radius
外框圆弧效果border-radius: 50%;
border-radius: 100px 0 100px 0;
border-radius
依序分别是左上、右上、右下、左下
圆弧後可再增加border线条制造外框效果
linear-gradient
渐层效果预设渐层上到下(to bottom)
background: linear-gradient(black, yellow);
background: linear-gradient(to top, black, green);
background: linear-gradient(to right, black, green);
background: linear-gradient(to bottom, black, green);
background: linear-gradient(to left, black, green);
box-shadow
阴影效果box-shadow
依序为: x轴、y轴、渲染扩散、颜色
box-shadow: 15px 10px;
box-shadow: 15px 10px pink;
box-shadow: 15px 10px 6px pink;
box-shadow: 0px 0px 20px pink;
<<: 海棠小姐借我一根头发, 轻轻的拉~拉~拉~ - 盘中 call 讯
>>: Swift纯Code之旅 Day15. 「页面传值?代理? Delegate?Protocol?(1)」
最近要升级 windows 服务器的 ASP.NET Core 2.1 专案到 3.1 版本,发现 ...
大家好,我是YIYI,今天要开始用Whimsical画架构图了~ 进入Whimsical 先透过【D...
Select vs Switch select与switch都是透过case的方式来处理,但两者却大...
前言 这几天写下来, 真的深深感受到我参加的是「自我挑战组」, 真的每天都在 自我挑战 跟天窗奋斗o...
大家安安 晚上好~~ 今天要把专案里的StatelessWidget 更改成为 StatefulWi...