渐变与文本格式化属性

渐变

1.什么是渐变

不同颜色之间的过度

2.属性

background-image:;

取值

常用:1.linear-gradient()

线性渐变

不常用:2.radial-gradient()

径向渐变

不常用 :3.repeat-linear-gradient()

重复线性渐变

不常用 :4.repeat-radial-gradient()

重复径向渐变

3.线性渐变

background-image:linear-gradient(angle,color,color);

angle取值

to top    0deg

从下往上渐变

to right  90deg

从左到右渐变

to bottom 180deg

从上往下渐变

to left   270deg

从右往左渐变

2.文本格式化属性

1.文本格式化

1.字体样式:加粗 倾斜 

2.文本格式:缩进

2.控制字体

1.字体系列(微软雅黑)

1.属性

font-family:"微软雅黑";

<style>
h3,div,p{

font-family: "华文仿宋";
font-size:2em;
text-align: center;
}
</style>

2.使用服务器端的字体

@font-face{

  font-family:"字体名称";

  src:url(字体的地址);

}

@font-face{
font-family: "最牛逼的字体没有之一";
src:url(simkai.ttf);




}
h3,div,p{

font-family: "最牛逼的字体没有之一";
font-size:35px;
text-align: center;
}

需要在src写入ttf字体提取文字,

首先嵌入ttf字体,然后将字体命名,

再次将所需要改变字体的标记用css声明,使用font-family。

2.字体大小

1.属性

font-size:值;

2.取值

px

pt

em

2em  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

45150
来自专栏练小习的专栏

制作高大上的Canvas粒子动画

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

608100
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

14730
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

14220
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

26500
来自专栏Coco的专栏

神奇的 conic-gradient 圆锥渐变

27240
来自专栏前端知识分享

第97天:CSS3渐变和过渡详解

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

13430
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 语法

上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

9230
来自专栏拂晓风起

Flash Actionscript AS3 渐变透明 mask遮罩

15240
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

13910

扫码关注云+社区

领取腾讯云代金券