CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑这三款字体，通常这样写font-family:"黑体", "宋体","Microsoft YaHei"

font-size控制字体大小，我们设置字体大小是设置它的宽度，它的高度一般电脑系统默认字体大小是16px，所以字体大小尽量不要低于16px，1em=16px； font-weight: bold;/*控制字重 一般是100-900 常用lighter(细体) normal（正常）bold加粗 */至于这个font-style，一般默认是normal，也就是正常的，如果说你设置 font-style: italic;斜体话，其实和这个<em></em>的效果是差不多的;文字间的间距用的line-height如果和高度相等话，就是垂直居中了。

通常font字体的简写:font:style weight size/line-heigt font-family  /*要求必须出现的2个是 size与font-family*/
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>css常用样式font字体的多种变换</title>

     <style>

         div{

             font-family: 'Microsoft YaHei';/*微软雅黑*/

             /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */

             /*字体加上双引号或者单引号，当有多个字体的时候，中间逗号分开*/

             color:#f90;

             font-size: 24px;/*控制字体大小*/

             font-weight: bold;/*控制字重 常用lighter(细体) normal（正常）bold加粗 */

             font-style: italic;/*等同于em*/

             line-height: 30px;

         }

         /*font字体的简写:font:style weight size/line-heigt font-family*/

         /*要求必须出现的2个是 size font-family*/

         p{

             font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

             letter-spacing: 1px;/*英文字母间距*/

             word-spacing: 10px;/*英文单词间距*/

         }

         P::first-letter{

             text-transform: capitalize;

         }/*第一个字母::first-letter*/

         p::first-line{

             color:red;

         }/*第一行::first-line*/

     </style>

 </head>

 <body>

     <div>技术为王世界,欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,

         欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,

         欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好 </div>

     <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology,

         I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world,

         I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p>

 </body>

 </html>

关于样式继承问题/*与文字有关样式会被继承下去*/代码展示如下：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         p{

             font-size: 20px;

             font-family: 微软雅黑;

             color:#f00;

             font-weight:bold;

             font-style:italic;

             word-spacing:15px;

         }

     </style>

 </head>

 <body>

     <div>

         <p><span>linux php linux</span></p>

         <p><span>linux linux php linux</span></p>

         <p><span>linux linux php linux</span></p>

         <p><span>linux linux php linux</span></p>

     </div>

 </body>

 </html>

css常用样式font控制字体的多种变换的更多相关文章

  1. CSS常用样式--font

    CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...

  2. css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

  3. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  4. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  5. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  6. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  7. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  8. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  9. css 常用样式命名规则

    大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:mai ...

随机推荐

  1. [洛谷P4617] [COCI2017-2018#5] Planinarenje

    Description \(Mirko\) 和 \(Slavko\) 喜欢一起去远足. \(Mirko\) 偏好攀登山峰,而 \(Slavko\) 偏爱山谷.因此每次他们登上一座山峰后,\(Slavk ...

  2. linux DHCP 服务器

    配置  1:/etc/dhcp.conf 配置文件 2:dhcp.leases 启动 dhcp 服务器 linux dhcp客户端 windows dhcp 客户端

  3. python3操作MySQL的模块pymysql

    本文介绍Python3连接MySQL的第三方库--PyMySQL的基本使用. PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中 ...

  4. mac电脑下使用fcrackzip破解zip压缩文件密码

    fcrackzip简介 fcrackzip是一款专门破解zip类型压缩文件密码的工具,工具小巧方便.破解速度快,能使用字典和指定字符集破解,适用于linux.mac osx 系统 fcrackzip安 ...

  5. EXCEL的VBA（宏）编程

    EXCEL的VBA编程 杨康需要我完成的需求 第一列是名称 第二列是甲方账户 第三列是甲方金额 第四列是乙方账户 第五列是乙方金额 第六列是true或false 第七列备注 需求 开始时数据对齐的,如 ...

  6. springboot开发之使用外部servlet容器及对jsp的支持

    一般而言,springboot是使用自己内嵌的servlet容器,比如tomcat等等,而且默认的模板引擎是thymeleaf,那么如何让springboot使用外部的servlet容器并支持对jsp ...

  7. java获取本地IP地址集合包括虚拟机的ip

    public static ArrayList<String> getLocalIpAddr() { ArrayList<String> ipList = new ArrayL ...

  8. 集合详解之 Map

    集合详解之 Map + 面试题 集合有两个大接口:Collection 和 Map,本文重点来讲解集合中另一个常用的集合类型 Map. 以下是 Map 的继承关系图: Map 简介 Map 常用的实现 ...

  9. JVM性能优化系列-(3) 虚拟机执行子系统

    3. 虚拟机执行子系统 3.1 Java跨平台的基础 Java刚诞生的宣传口号:一次编写,到处运行(Write Once, Run Anywhere),其中字节码是构成平台无关的基石,也是语言无关性的 ...

  10. JSP&Servlet学习笔记----第4章

    HTTP是基于请求/响应的无状态的通信协议. 使服务器记得此次请求与之后请求关系的方式,叫做会话管理. 隐藏域:由浏览器在每次请求时主动告知服务器多次请求间必要的信息.仅适用于一些简单的状态 管理,如 ...