【後转前要多久】# Day10 CSS - CSS常用属性I (文字、背景)

常用CSS属性

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;

leftrightstardend有何不同呢?
leftright不用多说,就是左边右边。
stardend则是需要看父层属性,
如果父层左到右,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;

widthheight 长度宽度高度

height: 20px;
width: 300px;

auto 如果左右都写auto,会按照父元素的宽度平均分配空间出来
如果只设heightwidth其中一个值,会自动推算、推挤出另一个维度(高度或宽度)出来。

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)」

ASP.NET Core 3 起布置在 Windows IIS 方式改变

最近要升级 windows 服务器的 ASP.NET Core 2.1 专案到 3.1 版本,发现 ...

30天零负担轻松学会制作APP介面及设计【DAY 07】

大家好,我是YIYI,今天要开始用Whimsical画架构图了~ 进入Whimsical 先透过【D...

Day12 Select

Select vs Switch select与switch都是透过case的方式来处理,但两者却大...

[Day5] 学 Bootstrap 是为了走更长远的路 ~ Flex 篇

前言 这几天写下来, 真的深深感受到我参加的是「自我挑战组」, 真的每天都在 自我挑战 跟天窗奋斗o...

Flutter学习Day5 Widget StatelessWidget => StatefulWidget 实作

大家安安 晚上好~~ 今天要把专案里的StatelessWidget 更改成为 StatefulWi...