一、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. 关于2D渲染的一些小想法

    原文地址 概述 . 这个项目最初的目的是为了尝试解析现有的UI编辑器(MyGUI)导出的UI布局信息,通过ImGUI还原UI渲染.但是在开发过程中,我发现可以借此实现一个编辑器,一个我不断的寻找,但始 ...

  2. 尝试在阿里云的Linux服务器器上安装拥有图形界面的Pycharm

    在Linux服务器上跑Python项目发现每次从本地上传文件太过麻烦,于是打算在服务器上安装Pycharm直接写Pycharm代码.   去Pycharm的官网下载Linux版本(支持正版于是我下载了 ...

  3. centos7中搭建ftp服务

    博客搬家: centos7中搭建ftp服务 最近想和同学共享一些文件资源,于是在实验室服务器上搭建个ftp服务,本博客记录一下配置的流程.过程基本是参照别人的方法来做的,博客也是在别人博客基础上修改的 ...

  4. 计算机网络 & 网络编程 期末总结与测评题

      第一部分:网络编程部分的相关知识 Socket套接字定义: 套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作.套接字允许应用程序 ...

  5. (七)mybatis批量操作,分页插件

    首先使用方式很简单: SqlSession sqlSession = sessionFactory.openSession(ExecutorType.BATCH); 批量操作核心:改变执行sql的方式 ...

  6. Java并发之Exchanger类

    应用场景 如果两个线程在运行过程中需要交换彼此的信息,可以使用Exchanger这个类. Exchanger为线程交换信息提供了非常方便的途径,它可以作为两个线程交换对象的同步点,只有当每个线程都在进 ...

  7. 通过 python 处理 email - Email via Python

    Email via Python 1 MIME - Multipurpose Internet Mail Extensions SMTP - Simple Message Transport Prot ...

  8. FFmpeg命令读取RTMP流如何设置超时时间

    子标题:FFmpeg命令录制RTMP流为FLV文件时如何设置超时时间 | FFmpeg命令如何解决录制产生阻塞的问题0x001: 前言 今天在测试程序时遇到两个问题.Q1:ffmpeg录制RTMP流并 ...

  9. 制作一个docker镜像:mysql-8-x64-linux

    因为个人学习需要,为软件系统的虚拟容器化,以下将mysql制作为docker镜像,并记录下详细步骤. 欢迎大家学习交流和转载,同时写作不易,如果各位觉得不错,请点赞支持. 备注:以下代码和文章,欢迎复 ...

  10. ansible hosts配置

    编辑/etc/ansible/hosts 添加本机的public SSH key到目标机器的authorized_keys   #ssh-copy-id 添加本机的私钥到Ansible 运行ansib ...