`
ningzhisheng
  • 浏览: 12384 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程4 CSS的Text 文本

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

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

  这个属性决定是文本否需要下划线。可以是:

Example Source Code [www.52css.com]
  text-decoration: overline,加上划线
  text-decoration: line-through,加通过文本的线条。
  text-decoration:underline,这应该使用在链接上,因为用户习惯认为它代表链接。
text-transform改变文本的情况。

Example Source Code [www.52css.com]
text-transform: capitalize ,让每个字的第一个字母大写。
text-transform: uppercase ,所有大写。
text-transform: lowercase,所有小写。
text-transform: none; ,这个属性不起作用。
Example Source Code [www.52css.com]
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属性缩进段落的首行。这在打印时经常设置,但网页里通常用不上。

Example Source Code [www.52css.com]
p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}
分享到:
评论

相关推荐

    CSS教程(CHM格式),含多个css教程

    4. **Div+CSS布局实例教程.chm**:讲解如何使用Div元素配合CSS进行网页布局。 5. **5日精通CSS层叠样式表.chm**:提供一个快速学习CSS的课程框架,适合初学者。 6. **CSS.doc**:可能包含CSS的详细文档或案例分析...

    CSS教程(ppt)

    **CSS教程(PPT)** **一、CSS简介** CSS(Cascading Style Sheets)层叠样式表,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS能够让你独立于内容来控制网页的布局,使网页...

    css-text 教程

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

    极速中文CSS教程(基础部分预览).pdf

    <link rel="stylesheet" type="text/css" href="style.css"> ``` 在上面的例子中,我们将在 HTML 页头部分添加一个 `<链接>` 元素,指向外部样式表文件 "style.css"。 内部 CSS 内部 CSS 将样式定义嵌入到 HTML 文...

    CSS教程(免费版).pdf

    【CSS教程】 CSS,全称Cascading Style Sheets,是一种用于定义网页中元素样式的技术。它让网页设计者能够精确地控制页面布局,包括字体样式、背景色、元素排列方式、尺寸、边框等。CSS的发展始于1997年,由W3C...

    css教程

    CSS教程是一种基础性的教学材料,目的是让初学者快速掌握CSS的使用方法。在学习CSS之前,需要具备一些HTML的基础知识,因为CSS是用来设计和美化HTML页面的。对于初学者而言,不需要使用复杂的软件,例如FrontPage、...

    CSS教程(高清PDF文档)

    ### CSS教程核心知识点详解 #### 一、CSS简介 - **定义**:CSS,全称为Cascading Style Sheets,即层叠样式表,是一种用来增强HTML文档表现力的语言。 - **作用**:CSS用于控制HTML文档中的布局效果,如字体、颜色...

    CSS入门教程.pdf

    - 文本属性:如`color`(颜色)、`text-align`(对齐方式)、`line-height`(行高)等。 - 背景属性:如`background-color`(背景色)、`background-image`(背景图片)和`background-repeat`(图片平铺)等。 - ...

    css实例教程.pdf

    此外,还提到了操作系统,比如Microsoft Windows、Linux和Mac,因为在不同的操作系统上,可以使用不同的文本编辑器来编写CSS代码,例如Windows的记事本、Linux下的Pico编辑器、Mac的SimpleText等。 文档中的内容...

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

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

    25个高级CSS技巧教程

    6. **使用CSS实现的文本凹凸和阴影特效**:利用`text-shadow`属性,可以为文本添加阴影或凹凸效果,使文字更具立体感和视觉冲击力。 7. **使用CSS实现的图标文本链接**:结合CSS的伪元素和图像替换技术,可以将文本...

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

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

    CSS教程 非常好用

    ### CSS教程知识点详解 #### 一、CSS简介 **1.1 什么是CSS?** - **定义**: CSS,全称为 Cascading Style Sheets(层叠样式表),是一种用于控制网页外观和布局的语言。 - **功能**: 主要用于描述文档中结构化内容...

    CSS控制html文本溢出

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

    网页用css排列文本呈圆型

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

    css基础教程(经典)

    4. **文本(Text)** CSS提供了多种文本相关属性来调整字体、大小、颜色、对齐方式、行高、字间距等,例如`font-family`用于设置字体,`text-align`用于调整文本对齐,`line-height`调整行间距。 5. **Margin和...

    div css教程TOP排行榜或新闻列表最标准div css样式表代码写法

    - **描述样式**:设置描述文本的字体、颜色和缩进,可以使用 `text-indent` 创建首行缩进效果。 5. **响应式设计**: 使用媒体查询 (`@media`) 实现响应式布局,确保列表在不同设备和屏幕尺寸下都能良好展示。...

    css3-tutorial, CSS3 Tutorial. 《CSS3 教程》.zip

    8. **文字和字体**:CSS3支持更多的文本样式,如文本阴影(`text-shadow`)、文本溢出处理(`text-overflow`)、文字间距(`word-spacing`)等。同时,通过`@font-face`规则,可以引入自定义字体,丰富网页的视觉...

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

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

    曹鹏CSS视频教程-35.文本缩进.rar

    通过这个文件,你可以观看并学习如何在CSS中设置文本的缩进,包括如何使用`text-indent`属性,以及不同单位(如像素、百分比或em)的应用。 2. `下载说明.txt`:这是一个文本文件,通常会包含关于如何解压、播放...

Global site tag (gtag.js) - Google Analytics