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. Qt Installer Framework翻译(7-4)

    组件脚本 对于每个组件,您可以指定一个脚本,来准备要由安装程序执行的操作.脚本格式必须与QJSEngine兼容. 构造 脚本必须包含安装程序在加载脚本时创建的Component对象. 因此,脚本必须至 ...

  2. 龙芯 3B1500 Fedora28 安装笔记

    版权声明:原创文章,未经博主允许不得转载 龙芯 3A4000 已经发布,十年前的 3B1500 早就落伍了.但我还是打算把它作为寒假刷 ACM 题的主力机 并将此当作年后收到 4000 的预习. 龙芯 ...

  3. .NET Core微服务一：Consul服务中心

    本文的项目代码,在文章结尾处可以下载. 防爬虫,本文的网址是:https://www.cnblogs.com/shousiji/p/12253295.html 本文使用的环境:Windows10 64 ...

  4. CSS-15-定位

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. PTA 6-14 用单向链表完成多项式运算（35分）

    输入两个多项式,计算它们的加.减及乘法, 将计算结果输出到屏幕上. 1) 输入:从键盘分两行分别输入两个多项式数据,每个多项式输入格式如下: n a1 m1 a2 m2 a3 m3 . .. ai m ...

  6. 【WPF学习】第二十九章 元素绑定——将元素绑定到一起

    数据banding的最简单情形是,源对象时WPF元素而且源属性是依赖性属性.前面章节解释过,依赖项属性具有内置的更改通知支持.因此,当在源对象中改变依赖项属性的值时,会立即更新目标对象中的绑定属性.这 ...

  7. iNeuOS工业互联平台，iNeuKernel（物联网核心组件）远程控制标准化设计与实现。发布v2.3版本。

    目       录 1.      概述... 2 2.      平台演示... 2 3.      控制端与iNeuKernel的交互协议... 3 4.      设备驱动实现控制业务... 4 ...

  8. Visual Studio 常见问题

    VS 2013相关问题 VS 2013 Ultimate Update 5 下载地址: 英文版: vs2013.5_ult_enu.iso SHA-1:918EA4A911858D32C9771480 ...

  9. ORB-SLAM2 初体验 —— 配置安装

    转载请注明出处,谢谢 原创作者:MingruiYU 原创链接:https://www.cnblogs.com/MingruiYu/p/12286752.html ORB-SLAM2作为目前应用最广泛的 ...

  10. 使用小书匠及markdown here编辑博客和微信公众号

    1. 使用小书匠连接Evernote并发布笔记到博客园 1.1 小书匠初探 我平时的信息收集的主要方法是采用Pocket+Evernote. 简单来说: 如果访问到非常有用,而且是必须要立刻记录的内容 ...