有一系列属性可以改变网页文字的大小和形状,概要如下:
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;
}
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教程17 CSS的优先级特性Specificity
2010-07-22 12:00 754如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 691伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 728At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 840使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 762操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 967背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 668一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 614请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 470Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 677前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 723如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 633CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 627margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1094css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 735HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 689CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
4. **Div+CSS布局实例教程.chm**:讲解如何使用Div元素配合CSS进行网页布局。 5. **5日精通CSS层叠样式表.chm**:提供一个快速学习CSS的课程框架,适合初学者。 6. **CSS.doc**:可能包含CSS的详细文档或案例分析...
**CSS教程(PPT)** **一、CSS简介** CSS(Cascading Style Sheets)层叠样式表,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS能够让你独立于内容来控制网页的布局,使网页...
本文将基于《CSS Text》这一资源进行详细的解读与总结,旨在为读者提供一个全面深入的CSS文本属性学习指南。 #### 二、文本属性概述 《CSS Text》这本书由Eric A. Meyer编写,由O'Reilly Media出版,是一本专注于...
<link rel="stylesheet" type="text/css" href="style.css"> ``` 在上面的例子中,我们将在 HTML 页头部分添加一个 `<链接>` 元素,指向外部样式表文件 "style.css"。 内部 CSS 内部 CSS 将样式定义嵌入到 HTML 文...
【CSS教程】 CSS,全称Cascading Style Sheets,是一种用于定义网页中元素样式的技术。它让网页设计者能够精确地控制页面布局,包括字体样式、背景色、元素排列方式、尺寸、边框等。CSS的发展始于1997年,由W3C...
CSS教程是一种基础性的教学材料,目的是让初学者快速掌握CSS的使用方法。在学习CSS之前,需要具备一些HTML的基础知识,因为CSS是用来设计和美化HTML页面的。对于初学者而言,不需要使用复杂的软件,例如FrontPage、...
### CSS教程核心知识点详解 #### 一、CSS简介 - **定义**:CSS,全称为Cascading Style Sheets,即层叠样式表,是一种用来增强HTML文档表现力的语言。 - **作用**:CSS用于控制HTML文档中的布局效果,如字体、颜色...
- 文本属性:如`color`(颜色)、`text-align`(对齐方式)、`line-height`(行高)等。 - 背景属性:如`background-color`(背景色)、`background-image`(背景图片)和`background-repeat`(图片平铺)等。 - ...
此外,还提到了操作系统,比如Microsoft Windows、Linux和Mac,因为在不同的操作系统上,可以使用不同的文本编辑器来编写CSS代码,例如Windows的记事本、Linux下的Pico编辑器、Mac的SimpleText等。 文档中的内容...
在本主题中,我们将深入探讨如何使用纯CSS3来创建一个类似于Microsoft Word的文本编辑器效果。 首先,我们需要理解CSS3中的关键特性,这些特性对于模拟Word编辑器至关重要: 1. **选择器增强**:CSS3引入了更强大...
6. **使用CSS实现的文本凹凸和阴影特效**:利用`text-shadow`属性,可以为文本添加阴影或凹凸效果,使文字更具立体感和视觉冲击力。 7. **使用CSS实现的图标文本链接**:结合CSS的伪元素和图像替换技术,可以将文本...
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
### CSS教程知识点详解 #### 一、CSS简介 **1.1 什么是CSS?** - **定义**: CSS,全称为 Cascading Style Sheets(层叠样式表),是一种用于控制网页外观和布局的语言。 - **功能**: 主要用于描述文档中结构化内容...
CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...
一个名为`css`的文件,很可能是CSS样式表,用于定义文本的布局和样式;以及一个`img`文件夹,可能包含用于辅助布局或装饰的图像资源。 首先,让我们深入了解一下如何使用CSS来排列文本呈圆形。在CSS中,我们通常会...
4. **文本(Text)** CSS提供了多种文本相关属性来调整字体、大小、颜色、对齐方式、行高、字间距等,例如`font-family`用于设置字体,`text-align`用于调整文本对齐,`line-height`调整行间距。 5. **Margin和...
- **描述样式**:设置描述文本的字体、颜色和缩进,可以使用 `text-indent` 创建首行缩进效果。 5. **响应式设计**: 使用媒体查询 (`@media`) 实现响应式布局,确保列表在不同设备和屏幕尺寸下都能良好展示。...
8. **文字和字体**:CSS3支持更多的文本样式,如文本阴影(`text-shadow`)、文本溢出处理(`text-overflow`)、文字间距(`word-spacing`)等。同时,通过`@font-face`规则,可以引入自定义字体,丰富网页的视觉...
4. **图像处理**:可能使用了CSS3的`background-image`,`background-size`,`background-position`等属性,对背景图像进行裁剪、拉伸或定位,以适应文本块的样式。此外,`filter`属性可以用于图像的后期处理,比如...
通过这个文件,你可以观看并学习如何在CSS中设置文本的缩进,包括如何使用`text-indent`属性,以及不同单位(如像素、百分比或em)的应用。 2. `下载说明.txt`:这是一个文本文件,通常会包含关于如何解压、播放...