一、字体属性

属性

描述

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. [Functional Programming] Use Task/Async for Asynchronous Actions

    We refactor a standard node callback style workflow into a composed task-based workflow. Original Co ...

  2. <c:redirect>标签的使用

    <c:redirect>标签的使用代码例子 redirect.jsp <%@ page contentType="text/html" pageEncoding= ...

  3. Ubuntu 设置UFW防火墙

    1:安装 sudo apt-get install ufw 2:启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...

  4. Linux 监测磁盘常用的工具sar iostat vmstat

    Linux 检测内存常用的工具sar iostat vmstat #每秒刷新一次显示2次 sar -d 1 2 iostat -kx 1 2 vmstat -d 1 2 磁盘统计信息解释 tps 每秒 ...

  5. Linux 监测内存常用的工具sar free vmstat

    Linux 检测内存常用的工具sar free vmstat free 内存统计信息解释 total 内存总量used 内存使用的大小free 内存剩余大小shared 共享内存大小buffers 块 ...

  6. 【转发】MVC Log4net

    1.引用log4net库类 2.写配置,我一般是写在web.config <configSections> <section name="log4net" typ ...

  7. iOS开发:icon和启动图尺寸(转)

    转至:http://www.cnblogs.com/shaoting/p/4941634.html 歪果仁的总结: Asset iPhone 6s Plus and iPhone 6 Plus (@3 ...

  8. Codis作者黄东旭细说分布式Redis架构设计和踩过的那些坑们

    转载自:http://www.open-open.com/lib/view/open1436360508098.html

  9. Linux下connect超时处理

    1.前言 最近在写一个测试工具,要求快速的高效率的扫描出各个服务器开放了哪些端口.当时想了一下,ping只能检测ip,判断服务器的网络是连通的,而不能判断是否开放了端口.我们知道端口属于网络的传输层, ...

  10. Centos 7 防火墙

    systemctl是CentOS7的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体.启动一个服务:systemctl start firewalld.service ...