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. [bzoj4011] [洛谷P3244] [HNOI2015] 落忆枫音

    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出 这样一个问题. 「相信吧.不然我们是什么,一团肉吗?要不是有灵魂--我们也 ...

  2. 剑指Offer对答如流系列 - 实现Singleton模式

    目录 面试题2:实现Singleton模式 一.懒汉式写法 二.饿汉式写法 三.枚举 面试题2:实现Singleton模式 题目:设计一个类,我们只能生成该类的一个实例. 由于设计模式在面向对象程序设 ...

  3. Shell命令整理

    Shell命令 一.认识Shell 在Linux系统中,Shell充当着用户与Linux内核的桥梁,俗称壳保护着Linux内核,同时也负责完成用户与内核之间的交互. 当用户需要与内核交互时,将命令传递 ...

  4. 软工造梦厂团队项目（Alpha版本发布2）

    课程 (https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience) 作业要求 https://www.cnblogs.com/h ...

  5. SIFT特征匹配算法介绍

    原文路径:https://www.learnopencv.com/histogram-of-oriented-gradients/ 按语:偶得SIFT特征匹配算法原理介绍,此文章确通俗易懂,分享之! ...

  6. 将Ubuntu下网卡名称enss改为eth0

    将Ubuntu下网卡名称enss改为eth0   sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX=""改为GRUB_CMDLINE ...

  7. SVM(2)-模式识别课堂笔记

    三.非线性支持向量机 问题起源:1.对于一些非线性可分的问题,我们希望能通过一个映射问题将特征映射到新的空间中去(可能是更高维的空间),寄希望于在新的空间中样本能够线性可分:2.我们注意到在线性支持向 ...

  8. 【大白话系列】MySQL 学习总结 之 初步了解 InnoDB 存储引擎的架构设计

    一.存储引擎 上节我们最后说到,SQL 的执行计划是执行器组件调用存储引擎的接口来完成的. 那我们可以理解为:MySQL 这个数据库管理系统是依靠存储引擎与存放数据的磁盘文件进行交互的. 那么 MyS ...

  9. java刷题（1-5）

    第一题:在一个数组中找出三个数相加之和为0,且不重复的集合 import java.lang.reflect.Array; import java.security.PublicKey; import ...

  10. BeetleX.AdminUI介绍

    BeetleX.AdminUI是基于Beetlexjs+Vuejs+Bootstrap相结合的后台管理框架,主要介绍在不使用Webpack的情况下,如何用VS来开发一个单页面的Web后台管理应用.如果 ...