常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏
文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
字体:1.font-family/*字体类型*/2.font-size/*字体大小*/3.font-style/*字体样式*/4.font-weight/*字体粗细*/

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

/*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/ 其次word-break: break-all;/*文本折行 自动换行，中文的会自动换行，单词ok，字母的不会，默认文本添加overflow: auto;word-break: break-all;*/

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <title>11种常用css样式之文本字体学习</title>
  7.      <style type="text/css">
  8.          div.box1{
  9.          /*字体*/
  10.          font-family:"Microsoft Yahei";/*字体类型 添加引号有无均正常展示，建议添加*/
  11.          font-size:24px;/*字体大小*/
  12.          font-style:italic;/*字体外观,斜体等同em*/
  13.          font-weight:900;/*字体粗细 默认100-900，常用bold粗体等同值900 normal正常 lighter细体*/
  14.          font:30px/1em "黑体";
  15.          }
  16.          /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/
  17.          font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  18.          /*文本*/
  19.          div.box2{
  20.          letter-spacing:1px;/*字间距*/
  21.          word-spacing: -5px;/*词/字符间距*/
  22.          text-decoration: line-through;
  23.          /*下划线 underline overline line-through*/
  24.          text-align:justify;/*对齐 left right center justify*/
  25.          text-indent: 100px;/*缩进*/
  26.          /* height: 40px;
  27.          background-color: #ccc; */
  28.          /*块级元素高度与行高一致，文本垂直居中展示*/
  29.          line-height: 40px;
  30.          color: rebeccapurple;/*颜色 16进制 rgb 单词*/
  31.          /*恶意输入字母，系统不换行，出现滚动条， word-break: break-all*/
  32.          overflow: auto;
  33.          word-break: break-all;/*文本折行*/
  34.          }
  35.      </style>
  36.  </head>
  37.  <body>
  38.      <div class="box1">
  39.          愿星空不问赶路人，时光不负有心人“你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌”
  40.      </div>
  41.      <div class="box">
  42.  文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
  43.      </div>
  44.      <div class="box2">
  45.          https://www.cnblogs.com/dhnblog/May the starry sky not ask passers-by, time is worthy of the people who care about you "Your pressure comes from: you ca n’t discipline yourself, just pretend to work hard; the status quo can't keep up with your inner desires; so you are anxious and panic"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  46.      </div>
  47.  </body>
  48.  </html>

11种常用css样式之开篇文本字体学习的更多相关文章

  1. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  2. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  5. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  6. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  8. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  9. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

随机推荐

  1. 深入NodeJS模块os - 与操作系统“打交道”

    读了 os 模块的文档,研究了几个有意思的问题:

  2. 将一条路由约束到一组指定的值 约束路由 URL路由

  3. 使用Razor表达式 举数组和集合 精通ASP-NET-MVC-5-弗瑞曼

  4. Ubuntu学习之路1

    最近重装了系统,对自己很久的win7 say goodBye.学习了自制U盘系统盘,重装了win8,然后在win8上倒腾,发现还是不错的.于是又在win8上装回了win7上的VMware,捣鼓了一下U ...

  5. HGE引擎改进——2014/1/27

    2014/1/27 更新 hge库: 1.增加回调函数procResizeFunc(),这个函数会在窗口大小改变时调用,不是必要函数 2.修复LOG信息显示为乱码的错误 项目主页:https://co ...

  6. python的数据类型之列表list

    列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现.例如: stus = ["zhangsan","lisi","wangwu ...

  7. C#服务端的GET、POST请求

    一.HttpClient方式,程序集 System.Net.Http.dll GET: HttpClient httpClient = new HttpClient(); string result ...

  8. 分享一下我在mysql5.6+mysql8数据库安装过程中的一些坑！

    Mysql5.6安装 下载好安装包后,在bin目录下用cmd打开,输入mysqld install [服务名]新建个服务 在windows+r输入services.msc即可查看服务 怎样使用mysq ...

  9. laravel路由与控制器(资源路由restful)

    目前我们大致了解了laravel下,在开始一个Http程序需要先定义路由.之前的例子中,我们的业务逻辑都是在路由里实现,这对于简单的网站或web应用没什么问题,当我们需要扩大规模,程序变得复杂,分层的 ...

  10. redis5.0 Cluster集群搭建

    安装redis sudo apt update sudo apt install build-essential tcl cd ~ mkdir document/ cd document/ curl ...