steam想申明库存量,不晓得在哪里去增设,那个出口处是稍稍有点儿深,由此可见毕竟也很单纯,一起来看一看什么样操作方式。操作方式方式01登入steam后,点选街道社区旁的对个人......
2024-02-05 235
上一篇经验介绍了CSS样式的选择器,这一篇介绍CSS的声明,也就是常用的字体属性。
字体属性font
font的英文解释就是字体的意思。
话说,好羡慕老外,用国语写代码,那个爽,我们要是能用中文写代码, 和写作文似的,那该多好!
语法:
font:字体取值
字体的用法用两种,一种是分开来写,一种是符合写法,下面都会给出例子的。
font-family:设置字体属性
family有家族的意思,估计指的是字体家族的意思吧。
语法:font-family:“字体”
看例子:
head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>无标题文档/title>style>.alsp{ font-family:"楷体";}/style>/head>body>div class="alsp">哈喽,我是提莫,女警你做我女朋友吧~~露露太矮了~~//div>/body>
看网页效果。
此刻, 字体已经发生改变了,变成了楷体
font-size:用于设置字号
OK,来看代码喽
style>.alsp{ font-family:"楷体"; font-size:36px}/style>
如图所示,是网页效果图,字体变大了~
font-style:设置字体为斜体
上代码:
style>.alsp{ font-family:"楷体"; font-size:36px; font-style:italic;}/style>
其中,font-style的取值有三种:
1)normal:默认的正常字体
2)italic:斜体显示文字
3)oblique:属于中间状态
再来看网页的效果,此刻字体已经变成了斜体!
最后,再看看符合属性,这个是小编力荐的一种属性。因为这样代码看起来更少,更清晰,而且很适合懒人,
font:字体属性
可以为字体大小、风格等等,各值用空格相连。
style>.alsp{ font:60px bold italic ;}/style>
OK,看网页效果。和分开写的效果是一样的,但是更简洁,不是么
和设置字体很类似,也分为分开设置方法和复合设置方法。
color:用来设置指定元素的颜色,颜色值为一个关键字或者一个16禁制的RGB值。
看代码:
style>.alsp{ color:#F00}/style>
看网页效果,字体已经变红了。
background-color
不但可以设置网页的背景颜色,还可以设置文字的背景颜色。
style>.alsp{ background-color:#F00}/style>
来看看网页效果。背景颜色已经发生了改变。
background-image
设置元素的背景图像
举例:
style>.alsp{ background-image:url(1.png)}/style>
看网页的效果图。
background-repeat
用于设置背景图像是否平铺
background-erpeat:值
值有一下几种取值方式:
no-repeat:不平铺
repeat:平铺整个网页
repeat-x:只在水平方向平铺
repeat:只在垂直方向平铺
看代码:
style>.alsp{ background-image:url(1.png); background-repeat:repeat-x}/style>
网页效果如图所示,在X轴上平铺
background-attachment
设置背景附件属性。就是说,如果你的页面内容很多,需要滚动条滚动,那么背景图片是随着滚动条滚动而滚动呢?还是无论滚动条如何变动,背景图片的位置始终不变。
看代码:
style>.alsp{ background-image:url(1.png); background-repeat:repeat-x; background-attachment:fixed;}/style>
其中,fixed的意思是图片固定。
scroll的意思是随着浏览器滚动条的变动而变动
可以发现,无论滚动条如何滚动,图片的位置都不会变化
background-position
背景位置。
background-position:值
值有3中表示方法:
1)采用数字
x:网页横向位置
y:网页纵向位置
2)百分比
0% 0% ;坐上位置
100% 100%:右下位置
50% 50%:中间位置
等,还有许多,你可以自己尝试一下
3)关键字设置
top left:左上位置
top center:靠上局中位置
top right:右上位置
等,还有许多,你可以自己试试
看代码:
style>.alsp{ background-image:url(1.png);background-attachment:fixed; background-position:center center; background-repeat:no-repeat}/style>
OK,看网页的效果,此刻图片在正中央
background
背景符合属性。
background:取值
例如:
style>.alsp{ background: url(1.png) no-repeat 100% -50%;}/style>
如图所示,向右定位100%,向下定位50%
OK,现在你已经可以做出一个带有你自己特色的网页了,在网页的路上继续加油吧
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
steam想申明库存量,不晓得在哪里去增设,那个出口处是稍稍有点儿深,由此可见毕竟也很单纯,一起来看一看什么样操作方式。操作方式方式01登入steam后,点选街道社区旁的对个人......
2024-02-05 235
操作方式方法01【辅助widget】多种辅助工具相连接两个功能键的可同时按【Shift】加此功能键挑选出1、正方形、圆锥选框辅助工具 【M】 2、终端辅助工具 【V】 3、截叶......
2024-02-05 179
操作方式01文档格式难题qq肖像最合适用jpeg文档格式的相片,若是相片有透明化地下通道,能选用png文档格式上载。 02大小不一难题若是相片极重也可能将引致上载失利,检......
2024-02-05 111