篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。
<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
<div style='font-style:normal'></div>
文本倾斜:
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
<div style='font-variant:small-caps'></div>
normal 显示标准字体。
small-caps 显示小型大写字母的字体。
<div style='font-weight:normal'></div>
normal 标准的字符
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
也可以使用数字表示,范围为100~900
<div style='font-size:60px'></div>
smaller 变小
larger 变大
length 固定值
而且还支持百分比
首先说一下边框风格,它的风格比较多,常用的一般是实线为主:
<div style='border-style:none'></div>
hidden 隐藏边框
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D凹槽边框
ridge 3D垄状边框
inset 3D inset边框
outset 3D outset边框
边框也有四面,所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用:
border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
先定义边框的宽度 风格和颜色,然后定义边框的其它属性。
<div style='border-radius:25px;'></div>
2).边框阴影
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义:
边框各个方向的大小和颜色
3).边框图片
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义:
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获?请转发分享给更多的人****
IT共享之家
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/
果你需要在网页上创建标题,或者在网站上改变不同页面上的文本大小,或段落中的某个特定单词突出,可以通过使用html命令更改文本大小来做到这一点。但凡上过html培训学习的人都会很轻轻松学会这个操作,有导师指导,学起来要容易的多。
更改前,先备份
无论什么时候你要更改网页,无论你只是在html中更改文本大小,还是在添加照片或将背景图像更改为新模式时,在更改前始终要记住一点:备份你现有的页面。这将确保如果在更改期间发生错误,并且此错误导致网页丢失,则可以恢复到起始位置,然后再试一次。
若要复制网页,请打开该文件并复制html。然后将页面html的副本粘贴到一个程序中,比如程序员的记事本,这是一个免费的实用程序,供网页设计者/程序员使用,用于CSS、html和其他程序。
在更改的操作中,备份是经常要做的事,这一点非常重要,一般你在html培训学习时,老师都会强调这一点的。
如何在HTML中更改文本大小
首先,找到要更改的一行或多行文本。使用
这个标记
在html中更改文本大小是一个简单的编码问题,你可以学会自己做,你也可以使用各种额外的html技巧。通过参加html培训学习,对html会有更系统更全面的认识,零基础也能轻松学到有用的知识。
了解更多
ont 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写,或将元素的字体设置为系统字体。
font-family写法示例:
<style>
p{
font-family: "幼圆";
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>
效果:
*请认真填写需求信息,我们会在24小时内与您取得联系。