`
yacole
  • 浏览: 241195 次
  • 性别: Icon_minigender_1
  • 来自: 浙江科技学院
社区版块
存档分类
最新评论

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: boldfont-weight: normal。理论上还可以使用bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900,但有些浏览器不认,仍坚持boldnormal

font-style

这个属性决定字体是否是斜体,可能是font-style: italicfont-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 代码
    1. body {   
    2.  font-familyarialhelveticasans-serif;   
    3.  font-size: 0.8em;   
    4. }   
    5. h1 {   
    6.  font-size: 2em;   
    7. }   
    8. h2 {   
    9.  font-size: 1.5em;   
    10. }   
    11. a {   
    12.  text-decorationnone;   
    13. }   
    14. strong {   
    15.  font-styleitalic;   
    16.  text-transformuppercase;   
    17. }   

Text spacing

letter-spacingword-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal

line-height属性设定元素的行高,比如一个段落,没有调准字体的大小。它可以是数字(字体大小的倍数),长度,百分比或normal

text-align设定元素位置,left,right,centerjustify

text-indent属性缩进段落的首行。这在打印时经常设置,但网页里通常用不上。

css 代码
  1. p {   
  2.  letter-spacing: 0.5em;   
  3.  word-spacing: 2em;   
  4.  line-height: 1.5;   
  5.  text-aligncenter;   
  6. }  
分享到:
评论

相关推荐

    CSS入门语法---出自站长网整理

    1. `text-align`:用于设置文本对齐,可选值有`left`、`right`、`center`和`justify`。 2. `text-decoration`:定义文本装饰,如`underline`表示下划线,`none`表示无装饰。 这些只是CSS语法和一些基本概念的简要...

    CSS基础知识总结-新手入门篇

    - **对齐方式**:`text-align`用于设置文本的水平对齐,如`left`、`center`和`right`。 - **字体属性**:包括`font-size`(字体大小)、`font-family`(字体样式)、`font-weight`(字体粗细)、`color`(颜色)、`...

    CSS入门教程.pdf

    在CSS入门阶段,了解以下几个关键概念至关重要: 1. **CSS基本语法**: - CSS选择器:选择器用于匹配HTML或XML文档中的元素,如`h1`、`p`等,或者根据类名、ID等属性进行选择。 - 属性:定义元素的样式属性,如`...

    CSS入门教程

    ### CSS入门教程知识点详解 #### 一、学习CSS前的基础知识 ##### 1. 网页与超文本语言(HTML) - **网页**: 是互联网上由URL(统一资源定位符)标识的信息资源,通常使用HTML(超文本标记语言)编写。 - **超文本...

    css入门-绝对经典

    ### CSS初级教程 1. **应用CSS到HTML中**: - **内联样式**:通过在HTML元素的`style`属性中直接写CSS代码,如`;">文本</p>`。 - **内部样式表**:在HTML文档的`<head>`部分使用`<style>`标签定义样式,这些样式...

    Web-前端html+css从入门到精通 158. textshadow文字阴影.zip

    `text-shadow`属性是一个非常实用的CSS3特性,它允许我们给文本添加一个或多个阴影。基本语法如下: ```css text-shadow: h-offset v-offset blur-radius color; ``` - `h-offset`:水平偏移量,用于指定阴影距离...

    css入门教程,css基础教程

    **CSS入门教程与基础指南** CSS(Cascading Style Sheets)是用于定义HTML或XML(包括SVG、MathML等)文档呈现方式的样式表语言。它允许我们将样式信息与结构内容分离,使得网页布局和设计更为灵活,易于维护。本...

    css基础-梦之都教学

    初学者可以通过观看CSS入门视频教程来快速上手。这些教程通常会从简单的CSS选择器和属性开始,逐步引导学习者创建基本的样式规则。 **3. CSS语法** - **外部引用CSS**:通过`<link>`标签在HTML文件中引入外部CSS...

    DIV+CSS布局入门教程.pdf

    ### DIV+CSS布局入门教程知识点解析 #### 一、页面布局与规划 1. **页面布局的概念**: - 页面布局是指网站各个组成部分在页面上的排列方式,它直接影响着用户体验和信息传递的效果。 2. **术语简介**: - **...

    div+css入门教程.doc

    ### DIV+CSS布局入门知识点详解 #### 一、基础知识概览 **1.1 CSS与HTML简介** 在探讨DIV+CSS布局之前,我们先来简要回顾一下CSS和HTML的基本概念。HTML(HyperText Markup Language),即超文本标记语言,是用于...

Global site tag (gtag.js) - Google Analytics