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. python+pandas+jupyter notebook 的 hello word

  2. 学习 lind UML 资源 十月 第二弹

    step one 来分析一下  UML 资源 管理

  3. window和 linux 在一起 ios和 android在一起 net和js在一起

    step 1: Windows 10 的 Linux Bash 支持「并不是使用虚拟机/模拟器」实现的,而是嵌入一个完整的 Ubuntu Linux 环境.技术上是实时将 Linux 的系统调用转换为 ...

  4. AVR单片机教程——矩阵键盘

    本文隶属于AVR单片机教程系列.   开发板上有4个按键,我们可以把每一个按键连接到一个单片机引脚上,来实现按键状态的检测.但是常见的键盘有104键,是每一个键分别连接到一个引脚上的吗?我没有考证过, ...

  5. 深入理解Java 中SPI 制

    深入理解Java 中SPI 制 概述 SPI(Service Provider Interface),是JDK内置的一种服务提供发现机制,可以用来启用框架扩展和替换组件,主要是被框架的开发人员使用,比 ...

  6. Web自动化测试项目（四）测试报告

    测试报告生成 使用HTMLTestRunner 生成测试报告 本文使用的 HTMLTestRunner 来源于github: https://github.com/githublitao/HTMLTe ...

  7. idea 2019.3 破解激活码

    idea激活码(亲测 idea 2019.3可用)有效期到2021年3月: QYYBAC9D3J-eyJsaWNlbnNlSWQiOiJRWVlCQUM5RDNKIiwibGljZW5zZWVOYW1 ...

  8. Ubuntu 入门笔记（1）

    在阿里云上申请了一个云服务器,开始学习Linux.我选择的是Ubuntu 14.04 ,在登录时就绕了我好长时间,输入用户名是有显示的,但是输入密码就没有反应了,查找了之后才发现原来这是Ubuntu ...

  9. python学习Day7--字符串操作

    [主要内容] 1. 补充基础数据类型的相关知识点 1. str. join() 把列表变成字符串 2. 列表不能再循环的时候删除. 因为索引会跟着改变 3. 字典也不能直接循环删除. 把要删除的内容记 ...

  10. 第一节——词向量与ELmo(转）

    最近在家听贪心学院的NLP直播课.都是比较基础的内容.放到博客上作为NLP 课程的简单的梳理. 本节课程主要讲解的是词向量和Elmo.核心是Elmo,词向量是基础知识点. Elmo 是2018年提出的 ...