一系列属性可以改变网页文字的大小和形状,概要如下:
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
字体的大小,要小心使用。比如标题不会和段落一样,它要用大字体,你可以使用h1
h2
等等。
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;
,这个属性不起作用。
css 代码
- 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
属性缩进段落的首行。这在打印时经常设置,但网页里通常用不上。
css 代码
- p {
- letter-spacing: 0.5em;
- word-spacing: 2em;
- line-height: 1.5;
- text-align: center;
- }
分享到:
相关推荐
1. `text-align`:用于设置文本对齐,可选值有`left`、`right`、`center`和`justify`。 2. `text-decoration`:定义文本装饰,如`underline`表示下划线,`none`表示无装饰。 这些只是CSS语法和一些基本概念的简要...
- **对齐方式**:`text-align`用于设置文本的水平对齐,如`left`、`center`和`right`。 - **字体属性**:包括`font-size`(字体大小)、`font-family`(字体样式)、`font-weight`(字体粗细)、`color`(颜色)、`...
在CSS入门阶段,了解以下几个关键概念至关重要: 1. **CSS基本语法**: - CSS选择器:选择器用于匹配HTML或XML文档中的元素,如`h1`、`p`等,或者根据类名、ID等属性进行选择。 - 属性:定义元素的样式属性,如`...
### CSS入门教程知识点详解 #### 一、学习CSS前的基础知识 ##### 1. 网页与超文本语言(HTML) - **网页**: 是互联网上由URL(统一资源定位符)标识的信息资源,通常使用HTML(超文本标记语言)编写。 - **超文本...
### CSS初级教程 1. **应用CSS到HTML中**: - **内联样式**:通过在HTML元素的`style`属性中直接写CSS代码,如`;">文本</p>`。 - **内部样式表**:在HTML文档的`<head>`部分使用`<style>`标签定义样式,这些样式...
`text-shadow`属性是一个非常实用的CSS3特性,它允许我们给文本添加一个或多个阴影。基本语法如下: ```css text-shadow: h-offset v-offset blur-radius color; ``` - `h-offset`:水平偏移量,用于指定阴影距离...
**CSS入门教程与基础指南** CSS(Cascading Style Sheets)是用于定义HTML或XML(包括SVG、MathML等)文档呈现方式的样式表语言。它允许我们将样式信息与结构内容分离,使得网页布局和设计更为灵活,易于维护。本...
初学者可以通过观看CSS入门视频教程来快速上手。这些教程通常会从简单的CSS选择器和属性开始,逐步引导学习者创建基本的样式规则。 **3. CSS语法** - **外部引用CSS**:通过`<link>`标签在HTML文件中引入外部CSS...
### DIV+CSS布局入门教程知识点解析 #### 一、页面布局与规划 1. **页面布局的概念**: - 页面布局是指网站各个组成部分在页面上的排列方式,它直接影响着用户体验和信息传递的效果。 2. **术语简介**: - **...
### DIV+CSS布局入门知识点详解 #### 一、基础知识概览 **1.1 CSS与HTML简介** 在探讨DIV+CSS布局之前,我们先来简要回顾一下CSS和HTML的基本概念。HTML(HyperText Markup Language),即超文本标记语言,是用于...