CSS字体样式与样式效果
CSS字体样式
通过CSS样式表,可以自定义字体。下载想要的字体库,然后在工程里创建一个存放字体库文件的目录,把下载好的字体库文件存放进去,之后就可以引用这目录里面的字体库了,使用@font-face来自定义字体库,例如我下载了一个×××字体,然后在工程中创建了一个font目录,把字体库文件放入进去:
提示:如果是做实验、练习的话可以去下载一些各种各样的字体库来使用,但是如果是在个人网站或者其他公开的网站上,如果没有获得某个非免费字体的授权就不要使用这些字体,以免造成侵权的行为。
代码示例:
运行结果:
font-weight:bold 设置字体为粗体,font-weight有很多属性,不过比较常用的就是bold粗体,代码示例:
运行结果:
text-shadow 设置字体的阴影部分,格式为:npx npx npx color,
text-align设置字体的布局,常用的属性有center(居中)、left(向左对齐)、right(向右对齐),代码示例:
运行结果:
text-decoration 设置字体横线相关,可以设置字体的下划线、上划线、中划线还有去掉横线等等,例如可以去掉超级链接的下划线,代码示例:
运行结果:
思维导图:
样式效果:
2D转换:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
其中rotate属性是用来定义2D旋转的,属性参数里面填写的是旋转的角度。
图片旋转代码示例:
运行结果:
scale(x,y) 设置2D缩放,scale(x) 则仅通过设置x轴的值来定义缩放转换,代码示例:
运行结果:
skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换,单位是角度deg,代码示例:
运行结果:
思维导图:
其他的属性使用方式参考:
过渡属性:
transition 属性是一个用于设置过渡效果的属性,可以设置2D转换的过渡、宽高变化的过渡、背景或字体颜色的过渡。
这个属性要配合hover使用,当鼠标移动到改该定义的元素时就会出现过渡效果,2D缩放过渡效果代码示例:
运行结果:
宽度和背景颜色过渡,代码示例:
其实逻辑很简单,就是先在标签样式里先定义好初始的样式效果和要过渡的属性和时间,然后在标签的hover状态样式里定义鼠标移动上去后的样式效果,过渡其实就是把这个改变样式效果的过程变缓慢了。
运行结果:
2D旋转过渡代码示例:
运行结果:
以上只是介绍到transition属性规定完成过渡效果需要多少秒或毫秒的操作,剩下还有几个效果可以参考以下语法,或访问w3cshool网站查询更多的用法。
网址:http://www.w3school.com.cn/c***ef/pr_transition.asp
div层的制作:
先介绍几个属性:
position属性,用于规定元素的定位类型。
position属性的absolute值用于生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
其实简单来说就是通过绝对定位,元素可以放置到页面上的任意位置,例如div,我给div设置了绝对定位就可以任意的通过"left", "top", "right" 以及 "bottom" 属性设置它在网页中的位置。
代码示例:
运行结果:
z-index属性,定义div层的序号,例如:z-index属性值为2的层,那么这个层就在z-index属性值为1的层上面。
代码示例:
运行结果:
结合以上介绍的知识点,我们可以做一个简单的例题,例如:当我们有时候登录某个网站的账户时,会发现当登录的输入框弹出来的时候除了登录的输入框之外就不能点击网页的其他地方了,这其实就是使用了div层的效果,把网页都给盖住了。而且有些登录的输入框当我们把鼠标移动上去后还会有旋转放大之类的效果,这是使用到了过渡样式。现在我们做一个类似于这样子的网页。
代码示例:
运行结果:
转载于:https://blog.51cto.com/zero01/1977503
CSS字体样式与样式效果相关推荐
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性 在CSS中如何通过color属性来修改文字颜色 英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...
- 4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
- CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格 文本样式 颜色 color rgb(颜色) R ...
- CSS —— 字体和文本样式
字体样式 字体大小 属性名: font-size 取值:数字+px 注意点: 谷歌浏览器默认文字大小是16px 单位需要设置,否则无效 字体粗细 属性名 :font-width 取值: 关键字 正常 ...
- CSS基础选择器、字体和文本样式
一.CSS简介 美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
- css字体倾斜角度_css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)...
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观.那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实 ...
- html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇 字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
- html字体样式描边,使用CSS给文字添加描边效果
CSS如何实现文字描边效果?下面本篇文章就来给大家介绍一下使用CSS给文字添加描边效果的方法,希望对大家有所帮助. 想要使用CSS给文字添加描边效果,主要有两种方法:使用text-shadow属性或t ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
最新文章
- 【VLC-Android】LibVLC API简介(相当于VLC的MediaPlayer)
- silverlight 调用默认打印机
- 操作系统 --- 线程与进程的比较
- 【练习---日志文件的恢复】-----多元化成员中,单个成员丢失
- 鼠标图标怎么自定义_酷鱼魔鼠——给鼠标添加酷炫的特效
- html表单提交不判断,请问jquery有方法可以判断一个表单提交之后结果是成功或不成功吗?...
- 苹果高管:M1芯片iPad Air是为内容创作者和学生等设计
- android studio自定义类,为AndroidStudio设置自定义类注释
- 【Vue】—解决页面图片加载抖动的问题
- STL常用函数总结-vector
- android 输入法 监听,android 监听 输入法
- 为什么dubbo使用ZkClient作为zookeeper的客户端
- WINDOWS PHONE死于自己不兼容
- Java中迭代Map的方法
- JAVA一般项目开发流程
- 常见3DMAX插件导出模型丢失贴图问题
- 经验模态分解 及其衍生算法
- Web前端满屋花案例框架
- 云原生架构下的 API 网关实践:Kong (三)
- LeetCode - 1175 - 质数排列(prime-arrangements)