`
yacole
  • 浏览: 238286 次
  • 性别: 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和CSS3思维导图(xmind版)

    CSS 是编程入门人员的必修课,运用CSS样式可以让页面变得美观。 CSS语法由三部分构成:选择器、属性和值: selector {property: value} CSS3 是最新的 CSS 标准。 css3比css多了一些样式设置而已。 css3是向前...

    CSS3 文本效果

    #textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em;...CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    sublime:一些最佳Sublime Text程序包,主题和好东西的集合

    入门如果您尚未安装文本编辑器,请安装文本编辑器-Sublime Text的基本程序包管理器特定语言HTML / CSS必需品 -HTML5代码段/语法生成HTML5 Boilerplate的代码段 -CSS3语法,自动完成HTML预处理器/模板化 - 语法和摘要...

    share-selected-text:在Twitter,缓冲区等中共享选定的文本。 受到medium.com的启发

    在Twitter,缓冲区和其他一些人上共享选定的文本。 受到启发 我为制作了这个小型javascript库,现有的库无法满足我的需求,因此我创建了一个库。 ShareSelectedText.js当前支持以下社交媒体和服务: 推特 缓冲 ...

    text-to-speech-python:IBM Watson Text to Speech 服务的示例 Python 应用程序

    文本到语音 Python 入门应用程序 服务使用 IBM 的语音合成功能将英语或西班牙语文本转换为音频信号。 音频以最小的延迟流回客户端。 可以通过 REST 接口访问该服务。 试一试! 单击下面的按钮进入 IBM DevOps ...

    CSS入门。(仅供参考)

    文档出处部分Coogle和《原创》,如有雷同纯属巧合 《仅供参考》 首先说明以下内容是本人自己整理(仅供参考!...4) , CSS主要设置于HTML页面中的文本内容(字体,大小,对齐方式等) 5),CSS可以使

    TuiCss:基于文本的用户界面CSS库

    基于文本的用户界面CSS库 关于 TuiCss是一个库,旨在像旧的MS-DOS应用程序一样使用基于ASCII表的接口来创建Web应用程序。 这种界面非常合适,因为使用了超对比色,并且减少了视图中组件的使用效果。 该项目的基础是...

    HTML + CSS零基础经典教程系列

    超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。 HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。 层叠样式表(英文全称:Cascading Style Sheets)...

    text-mod:TIBCO Spotfire环境的文本卡产品是一个扩展,用于以高效且美观的方式可视化文本数据,通常与其他数据可视化一起使用

    入门 访问该项目的以获取文本卡mod的用户指南。 要在本地运行(和修改)Text Card mod,请按照以下步骤操作: 先决条件 这些说明假定您已安装 (包括npm)。 如何开始(使用开发服务器) 在下载/克隆的文本卡mod...

    JavaScript-Projects::smiling_face_with_sunglasses:简单的入门JavaScript项目在这里

    :smiling_face_with_sunglasses:自学JavaScript笔记 格式化字符串-> fstring const myName = 'Vusal'; `My name is ${myName}!`; Output: My Name is Vusal! 十六进制颜色生成器 ...Changes 'hex-color-text' val

    java面试题以及技巧

    │ │ └─SCJP 1_4 认证的初级教程.files │ │ bg-gold.gif │ │ c(1).gif │ │ c.gif │ │ Desktop_.ini │ │ dwcss.js │ │ dwlogo-small.gif │ │ emailfriend2.js │ │ forumwindow.js │ │ grabtitle...

    HTML入门基础教程

     HTML 表示超文本标记语言(Hyper Text Markup Language)。  HTML 文件是一个包含标记的文本文件。  这些标记保速浏览器怎样显示这个页面。  HTML 文件必须有htm 或者html 扩展名。  HTML 文件...

    html入门到放弃笔记

    超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 :超文本的表现形式 普通文本 a : a 超文本 a : <a></a> ...

    java面试题目与技巧1

    │ │ └─SCJP 1_4 认证的初级教程.files │ │ bg-gold.gif │ │ c(1).gif │ │ c.gif │ │ Desktop_.ini │ │ dwcss.js │ │ dwlogo-small.gif │ │ emailfriend2.js │ │ forumwindow.js │ │ grabtitle...

    java面试题及技巧4

    │ │ └─SCJP 1_4 认证的初级教程.files │ │ bg-gold.gif │ │ c(1).gif │ │ c.gif │ │ Desktop_.ini │ │ dwcss.js │ │ dwlogo-small.gif │ │ emailfriend2.js │ │ forumwindow.js │ │ grabtitle...

    java面试题及技巧3

    │ │ └─SCJP 1_4 认证的初级教程.files │ │ bg-gold.gif │ │ c(1).gif │ │ c.gif │ │ Desktop_.ini │ │ dwcss.js │ │ dwlogo-small.gif │ │ emailfriend2.js │ │ forumwindow.js │ │ grabtitle...

    java面试题以及技巧6

    │ │ └─SCJP 1_4 认证的初级教程.files │ │ bg-gold.gif │ │ c(1).gif │ │ c.gif │ │ Desktop_.ini │ │ dwcss.js │ │ dwlogo-small.gif │ │ emailfriend2.js │ │ forumwindow.js │ │ grabtitle...

    textman:八进制字符识别应用程序,可从使用FastAPI,Tailwindcss和Pytesseract构建的图像中提取文本

    从图像中提取文本 入门 创建virtualenv # create env conda create --name textman # activate it conda activate textman 安装依赖 pip install -r requirements.text 运行应用 uvicorn app:app --reload ...

Global site tag (gtag.js) - Google Analytics