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. error while loading shared libraries: libevent-2.1.so.6 的解决办法

    执行 memcached 启动命令时,报错,提示:error while loading shared libraries: libevent-2.1.so.6: cannot open shared ...

  2. 大叔 EF 来分析 EntityFrameworks.Data.Core 1

    Common 1SQL命令拦截器主要实现EF的读写分离 SqlCommandInterceptor 继承父类DbCommandInterceptor 2SQL锁选项SqlLock 3忽略大小写,作为C ...

  3. Bate冲刺博客（3次）

    Bate冲刺博客 课程介绍 课程 (https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience) 作业要求 https://www ...

  4. RainbowPlan-Alpha版本发布2

    博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https:// ...

  5. Python的小括号( )、中括号[ ]和大括号{}分别代表什么？

    python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也叫做花括号{ },分别用来代表不同的python基本内置数据类型. 1.python中的小括号( ):代表tuple元组 ...

  6. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  7. 图像GIST特征和LMGIST包的python实现(有github)

    1什么是Gist特征        (1) 一种宏观意义的场景特征描述        (2) 只识别"大街上有一些行人"这个场景,无需知道图像中在那些位置有多少人,或者有其他什么对 ...

  8. HTTPS详解二：SSL / TLS 工作原理和详细握手过程

    HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...

  9. CAD制图系列之椭圆画法标注

    今天我将做一个极轴是92,150的椭圆画法和标注方法 1.打开2014版本CAD制图,快捷键EL,回车: 2.自己随便定一个点 3.输入第一个值,也就是短轴--横轴(输入实际长度,不需要除以二)并且鼠 ...

  10. 开源虚拟机Bochs安装以及踩坑

    因为想要写一个简单的操作系统,所以需要安装虚拟机来模拟出硬件,VMware不适合这个场景,因为会使用硬件级别的虚拟化,而bochs这个开源虚拟机,是用软件虚拟了所有的硬件,所以调试可以做到非常细的粒度 ...