有一系列属性可以改变网页文字的大小和形状,概要如下:
font-family
文字使用的字体,比如宋体,Times New Roman,Arial等等
这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用,因为不同的电脑拥有不同的字体。例子font-size: arial,helvetica,pc用户可以使用arial而苹果mac用户可以使用helvetica。
注意:如果字体的名称有许多单词组成,使用双引号组合,比如,font-family: "Times New Romes"。
font-size
字体的大小,要小心使用。比如标题不会和段落一样,它要用大字体,你可以使用h1h2等等。
font-weight
这个属性决定字体是否加粗。在实际运用中通常使用font-weight: bold或font-weight: normal。理论上还可以使用 bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900,但有些浏览器不认,仍坚持 bold和normal。
font-style
这个属性决定字体是否是斜体,可能是font-style: italic或font-style: normal。
text-decoration
这个属性决定是文本否需要下划线。可以是:
text-decoration: overline,加上划线
text-decoration: line-through,加通过文本的线条。
text-decoration:underline,这应该使用在链接上,因为用户习惯认为它代表链接。
text-transform改变文本的情况。
text-transform: capitalize ,让每个字的第一个字母大写。
text-transform: uppercase ,所有大写。
text-transform: lowercase,所有小写。
text-transform: none; ,这个属性不起作用。
body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
Text spacing
letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。
line-height属性设定元素的行高,比如一个段落,没有调准字体的大小。它可以是数字(字体大小的倍数),长度,百分比或normal。
text-align设定元素位置,left,right,center或justify。
text-indent属性缩进段落的首行。这在打印时经常设置,但网页里通常用不上。
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
分享到:
相关推荐
<title>CSS控制文本溢出_网页特效_javascript特效_css特效-ViewCss网页特效网 <meta name="Keywords" content="CSS控制文本溢出_网页特效,javascript特效,css特效,网页特效代码,网站制作" /> ...
Tailwind CSS文本缩进插件 该插件添加了实用程序,可将文本缩进与Tailwind CSS一起使用。 安装 将此插件添加到您的项目中: # Install using pnpm pnpm install --save-dev tailwindcss-text-indent # Install ...
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小 em相对单位 1em表示一个文字大小 2em缩进当前元素2个文字大小距离 5.line-height 行间距(行高)单位 px 无单位表示多少倍行间距 行高=上间距+...
CSS纯文本 CSS纯文本转换建议规范
text-spinners是一款纯CSS纯文本Loading加载指示器特效。该loading加载指示器使用纯文本制作,为内联样式,不同的字体下显示的效果会略有不同。
:artist_palette: tailwindcss-文本填充 TailwindCSS实用程序可覆盖文本内容的前景填充颜色,特别适用于使用完成的表单字段的样式,因为color无法使用。安装yarn add tailwindcss-text-fill 或者,如果您使用npm : ...
css文本显示省略号 如果不适应sass 需要把@extend .text-webkit-box替换为.text-webkit-box里面的内容
//超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决...
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
css-text-rotation:纯CSS动画文本旋转
CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本,属性text-rendering正是一个SVG属性,目前尚没有任何的CSS标准对其进行定义,本文附有示例,感兴趣的朋友可以参考下
#textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em;...CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow
方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...
text-overflow(文本截断) border-radius(圆角边框) opacity(不透明度) box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) ...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
它支持与文本内容相关的大多数CSS属性,与文本对齐相关的属性除外。 以下是一些带有内联CSS样式的示例HTML内容: < body >< p xss=removed> This is a test </ p>< p xss=removed> So is this </ p>< p xss=...