一、font:字体连写

使用font属性时,必须按以下语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

/*选择器{font: 字体风格 字体粗细 字体大小/行间距 字体样式;}*/
p{font: font-style font-weight font-size/line-height font-family;}

1.1 font-size:字号大小
字号大小一般用px或者em来设定。
em指相对于当前对象内文本的字体尺寸。

1.2 font-family:字体样式

p{ font-family:"微软雅黑","黑体",sans-serif;}
/*san-serif/serif:无衬线和有衬线字体。很多中文字体都有衬线。*/

在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。
可以使用英文或者Unicode编码来代替。

p{ font-family:"Microsoft Yahei","SimHei",sans-serif;}
p{ font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53,sans-serif;}

为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体。

1.3 font-weight:字体粗细
在HTML中,可以用b或者strong等语义化标签,进行加粗。
在CSS中,可以使用的属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
其中,400等价于normal,700等价于bold

p{font-weight: normal bold bolder lighter 100~900;}

1.4 font-style:字体风格
在HTML中,可以用i或者em(强调,也是斜体)
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。

p{font-style: normal italic oblique;}

二、CSS外观属性

2.1 color:文本颜色

color属性用于定义文本的颜色,其取值方式有如下3种: 1.预定义的颜色值,如red,green,blue等。 2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

2.2 line-height:行间距/行高

line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种, 分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。

2.3 text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。

p{text-align: left|right|center;}

2.4 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%, 允许使用负值, 建议使用em作为设置单位。 一般都是2em

2.5 text-decoration:文本的装饰

通常我们用于给链接修改装饰效果

p{text-decoration: none|underline|overline|line-through;}

CSS字体连写及外观属性的更多相关文章

  1. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  2. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  3. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  4. 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  5. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  6. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  7. CSS字体属性

    CSS字体属性 CSS Fonts(字体)属性拥有定义字体系列.大小.粗细和文字样式(如斜体) 字体系列 <style type="text/css"> div{ fo ...

  8. 3.CSS字体属性

    CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...

  9. CSS字体属性与文本属性

    CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...

随机推荐

  1. ubuntu 中使用makefile组织c++多文件的简陋方法

    现有类定义Sales_item.hpp Sales_item.cpp 主函数my7_31.cpp(代码来源于c++primer 习题解答7_31) 希望使用makefile在Ubuntu中进行编译链接 ...

  2. Docker Mysql部署与使用

    参考链接:Docker 安装 Mysql 详解

  3. 文件系统(01):基于SpringBoot框架,管理Excel和PDF文件类型

    本文源码:GitHub·点这里 || GitEE·点这里 一.文档类型简介 1.Excel文档 Excel一款电子表格软件.直观的界面.出色的计算功能和图表工具,在系统开发中,经常用来把数据转存到Ex ...

  4. axure如何实现提示框3s后自动消失

    本示例基于axure8 实现 1.先做两个元件,一个按钮,一个提示框 2.将弹框“发布成功提示”设置为,页面载入时隐藏,这样预览页面时,该弹框是隐藏状态 3.给按钮添加交互样式,如下: 4.预览,点击 ...

  5. 利用jQuery动态添加input输入框,并且获取他的值

    动态添加 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco ...

  6. Spring Boot入门简介-Maven配置

    一.简介 -- 简化Spring应用开发的一个框架: -- 整个Spring技术栈的一个大整合: -- J2EE开发的一站式解决方案. 二.背景: ① J2EE笨重的开发.繁多的配置.低下的开发效率. ...

  7. java加解密算法--DES

    ECB import sun.misc.BASE64Decoder; import javax.crypto.*; import javax.crypto.spec.DESKeySpec; impor ...

  8. 一口气说出 9种 分布式ID生成方式,面试官有点懵了

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 本文作者:程序员内点事 原文链接:https://mp.weix ...

  9. P4174 [NOI2006]最大获利 (最大权闭合子图)

    P4174 [NOI2006]最大获利 (最大权闭合子图) 题目链接 题意 建\(i\)站台需要\(p_i\)的花费,当\(A_i,B_i\)都建立时获得\(C_i\)的利润,求最大的利润 思路 最大 ...

  10. C# WinForm 使用SMTP协议发送QQ邮箱验证码

    文章来自:https://blog.csdn.net/IT_xiao_guang_guang/article/details/104336604 前言   在程序设计中,发送验证码是常见的一个功能,用 ...