一、字体属性

属性

描述

font-style

设置字体风格

font-weight

设置字体粗细

font-size

设置字体的尺寸（一般用px表示）

font-family

设置字体系列

font

简写属性，作用是把所有针对字体的属性设置在一个声明中（注意顺序）例如：font:italic bold 16px "楷体";

字体的简写属性顺序：

font:font-style || font-variant || font-weight || font-size/line-height || font-family。

二、文本属性

属性 描述
color 设置文本的颜色，如red
line-height 设置文本的行高
text-align 设置文本的对齐方式，如left、center、right
text-decoration 设置文本装饰，如underline、none、line-through

注意：text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

例如：

<!DOCTYPE>

<html>

<head>

  <meta charset="utf-8" />

  <title>字体、文本属性</title>

  <style type="text/css">

    /*

    div p span{

      font-family: "楷体";

      font-style: italic;  <!--设置字体是斜体-->

      font-size: 16px; <!--设置字体的大小-->

      font-weight: 800; <!--设置字体加粗 100~500正常 600以上加粗 blod 字体加粗 normal 字体正常-->

    }*/

    h1{

      text-align: center;

    }

    /*统一设置字体*/

    div p span{

      font: italic bold 16px "楷体";/*设置字体*/

      color:blue;/*设置文本的颜色*/

      text-decoration: underline;/*设置文字添加下划线*/

      line-height: 30px; /*设置文本的行高*/

    }

  </style>

</head>

<body>

    <div>

       <h1>京东商城--全部商品分类</h1>

       <h2>图书、音像、电子书刊</h2>

       <p>

          <span>电子书刊</span>电子书 网络原创 数字杂志 多媒体图书

       </p>

       <p><span>音像</span>音乐 影视 教育音像</p>

       <p><span>经管励志</span>经济 金融学投资 管理 励志与成功</p>

    </div>

</html>

浏览器运行效果：

CSS（四）：字体和文本属性的更多相关文章

  1. [转载]CSS教程--字体与文本属性

    b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...

  2. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

  3. CSS属性（字体与文本属性）

    1.字体属性 (1)font-family 把要对这个网站要设置的字体都写上,如果这个浏览器支持第一个字体,则会用,如果不支持则会尝试第二个,如果设置的字体系统都不支持则会使用系统默认的字体作为网站的 ...

  4. CSS基础知识之文本属性二三事

    line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-si ...

  5. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  6. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  7. CSS font-size字体大小样式属性

    设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...

  8. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  9. css 01-CSS属性：字体属性和文本属性

    01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...

随机推荐

  1. C#应用视频教程2.2 OPENGL虚拟仿真介绍

    三维在理解了如何绘制2D元素之后,我们尝试绘制3D元素. 其实多个三角形也能够成四面体,多个长方形也能够成六面体,所以绘制3D元素的时候,只要顶点数量匹配就行了   这里我们尤其注意,我把绘制之前的三 ...

  2. 通用的sql语句

    1.插入: INSERT INTO 表名称 VALUES (值1, 值2,....) 我们也可以指定所要插入数据的列: INSERT INTO table_name (列1, 列2,...) VALU ...

  3. spring 发送邮件问题

    public void sendEmail() throws Exception { JavaMailSenderImpl senderImpl = new JavaMailSenderImpl(); ...

  4. js 多选选择删除数据

    按了顶上的删除(多项删除) 单列复选框删除 js语句 <a href="javascript:delOne('${customer.id}')">删除</a> ...

  5. 用PL/pgSQL写postgreSQL的存储过程[转]

    http://blog.chinaunix.net/uid-7591044-id-1742967.html 今天学会了用 PL/pgSQL 写 postgreSQL 的存储过程,网上资料实在少得可怜, ...

  6. public static void main(String args[])什么意思？

    public static void main(String[] args) 这绝对不是凭空想出来的,也不是没有道理的死规定,而是java程序执行的需要. jvm在试图运行一个类之前,先检查该类是否包 ...

  7. Android 添加新的Activity

    1.右键, New一个Class ,文件名如:ParaSetActivity.java 注: Superclass要选择android.app.Activity ,没有直接写入android.app. ...

  8. windows下LIB和DLL的区别与使用

    共有两种库: 一种是LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library. 一种是LIB包含 ...

  9. ItelliJ基于Gradle创建及发布Web项目（二）

    上一篇介绍了IteliJ创建WEB项目的过程,这一篇介绍一下和本地WEB服务器(以Tomcat为例)的关联方法和发布流程. WEB服务器的关联 1. 点击IDE右上角的一个带有三角形标识的按钮,如下图 ...

  10. 老生常谈combobox和combotree模糊查询

    FIRST /** * combobox和combotree模糊查询 * combotree 结果显示两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设置文本的值 */ (fun ...