`
Virgo_S
  • 浏览: 1153982 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

4、CSS的Text 文本

    博客分类:
  • CSS
阅读更多
有一系列属性可以改变网页文字的大小和形状,概要如下:

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;
}







分享到:
评论

相关推荐

    网页用css排列文本呈圆型

    一个名为`css`的文件,很可能是CSS样式表,用于定义文本的布局和样式;以及一个`img`文件夹,可能包含用于辅助布局或装饰的图像资源。 首先,让我们深入了解一下如何使用CSS来排列文本呈圆形。在CSS中,我们通常会...

    CSS3文本效果共2页.pdf.zip

    4. **文本填充模式(text-fill-color和text-stroke-color)** 在CSS3中,text-fill-color允许改变文本的填充颜色,而text-stroke-color则用于定义描边颜色,这两个属性可以独立于元素的背景色设置,创造出独特的...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    tailwindcss-text-indent:Tailwind CSS的文本缩进实用程序

    Tailwind CSS文本缩进插件 该插件添加了实用程序,可将文本缩进与Tailwind CSS一起使用。 安装 将此插件添加到您的项目中: # Install using pnpm pnpm install --save-dev tailwindcss-text-indent # Install ...

    css-text 教程

    本文将基于《CSS Text》这一资源进行详细的解读与总结,旨在为读者提供一个全面深入的CSS文本属性学习指南。 #### 二、文本属性概述 《CSS Text》这本书由Eric A. Meyer编写,由O'Reilly Media出版,是一本专注于...

    推荐20款基于 jQuery & CSS 的文本效果插件

    13. TextShadow.js:动态文本阴影,随着文本移动或变化,创造出独特的视觉效果。 14. Jquery.textfill:自动调整文本大小以适应容器,保持清晰可读,适用于大标题。 15. TextSlideShow:文本幻灯片效果,支持过渡...

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...

    第21章 CSS3文本效果

    CSS3扩展了文本装饰,如`text-decoration-line`、`text-decoration-style`和`text-decoration-color`,允许更精细的控制下划线、上划线、删除线等。例如: ```css a { text-decoration-line: underline; text-...

    CSS3文本阴影彩虹阴影特效.rar

    在CSS3中,文本阴影(text-shadow)是一个强大的属性,它可以为文本添加多维度的效果,增强页面的视觉吸引力。在本资源"CSS3文本阴影彩虹阴影特效.rar"中,我们很可能会找到如何创建动态、多彩的文本阴影效果,也...

    纯css3制作Word文本编辑器效果

    在本主题中,我们将深入探讨如何使用纯CSS3来创建一个类似于Microsoft Word的文本编辑器效果。 首先,我们需要理解CSS3中的关键特性,这些特性对于模拟Word编辑器至关重要: 1. **选择器增强**:CSS3引入了更强大...

    第21章 CSS3文本效果.pdf

    4. 文本填充(text-fill-color) 虽然`text-fill-color`属性目前的支持情况并不广泛(仅限于部分基于WebKit的浏览器),但它为文本颜色的填充提供了一种新的方式。基本语法为: ``` p { font-size: 150px; -webkit...

    纯css3精美的文本块排版效果

    4. **图像处理**:可能使用了CSS3的`background-image`,`background-size`,`background-position`等属性,对背景图像进行裁剪、拉伸或定位,以适应文本块的样式。此外,`filter`属性可以用于图像的后期处理,比如...

    CSS3文本阴影效果的应用.pdf

    【CSS3文本阴影效果的应用】 CSS3中的文本阴影效果是一个强大的设计工具,它允许开发者为文本添加多维度的阴影,从而提升网页设计的视觉吸引力。这个功能通过`text-shadow`属性实现,它不仅可以增加文本与背景的...

    炫酷css3文本发光动画特效.rar

    在CSS3中,我们可以使用多种方法来实现文本发光效果,例如`text-shadow`属性。`text-shadow`允许我们为文本添加阴影,通过调整颜色、偏移量和模糊度,可以模拟出类似发光的效果。例如: ```css .text-glow { color...

    Web前端与移动发开之css的文本属性

    4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小 em相对单位 1em表示一个文字大小 2em缩进当前元素2个文字大小距离 5.line-height 行间距(行高)单位 px 无单位表示多少倍行间距 行高=上间距+...

    头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式

    4. 行高:`line-height`属性控制文本行之间的间距,有助于提高可读性,如`line-height: 1.5;`。 5. 颜色:使用`color`属性改变文本颜色,可以使用颜色名称、十六进制、RGB或RGBA值,如`color: #333;`。 二、文本...

    CSS3设计文本阴影.pdf

    CSS3中的`text-shadow`属性就是用来为文本添加阴影效果的,它可以为文字创造出立体感和深度感,使得文本更加引人注目。在CSS2.1中,`text-shadow`就已经被引入,但到了CSS3,该属性得到了进一步的扩展,增加了对不...

    css-plaintext:CSS纯文本转换建议规范

    这篇文档,"css-plaintext:CSS纯文本转换建议规范",旨在为开发者提供关于如何有效地处理和转换CSS纯文本的指导。 首先,理解CSS的基本结构至关重要。CSS由选择器和声明组成,选择器定位HTML元素,而声明则定义元素...

    CSS--文本溢出完美样式

    4. **多行溢出处理**:`text-overflow`默认只处理单行溢出。若需处理多行溢出,可以使用Webkit内核浏览器(如Chrome、Safari)的实验性特性`-webkit-line-clamp`和`-webkit-box-orient`。例如,`-webkit-line-clamp:...

Global site tag (gtag.js) - Google Analytics