CSS字体样式与样式效果
2017-10-30 17:03
330 查看
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/cssref/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层的效果,把网页都给盖住了。而且有些登录的输入框当我们把鼠标移动上去后还会有旋转放大之类的效果,这是使用到了过渡样式。现在我们做一个类似于这样子的网页。
代码示例:
运行结果:
通过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/cssref/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层的效果,把网页都给盖住了。而且有些登录的输入框当我们把鼠标移动上去后还会有旋转放大之类的效果,这是使用到了过渡样式。现在我们做一个类似于这样子的网页。
代码示例:
运行结果:
相关文章推荐
- JavaEE——css字体样式效果
- JavaEE——css字体样式效果
- CSS层样式 图片效果
- 关于bootstrap".container"容器默认的before与after样式效果作用
- -jQuery图片九宫格样式鼠标悬停图片滑动切换效果
- Shape样式、Selector触摸反馈效果工具
- Android开发之自定义Spinner样式的效果实现(源代码实现)
- jquery简介之改变样式和动画效果
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
- Web开发中对元素样式使用过滤器以增强其可视化效果
- html5中点击按钮,改变按钮状态效果样式
- CSS特殊样式(六) box-shadow实现纸张的曲线投影效果
- 用RadioButton实现选项卡效果并设置样式
- 好看的移动端H5应用效果及样式借鉴
- JavaScript DOM中 改变样式属性,实现动画效果 2
- WPF用样式实现TextBox的虚拟提示效果
- CSS3样式linear-gradient的使用(切角效果)
- 改变linux shell的输出效果[字体颜色,样式等]
- listview实现分页效果(底部正在加载样式)
- Qt样式与特殊效果窗口