css基础—字体那些事

1. 首先讲字的大小样式等

  • 字体大小 font-size: 40px;
  • 文字字体 font-family: "宋体",Arial;

  • 文字样式 font-style:normal;

        -normal:正常字体
    
    -italic，oblique:斜体
  • 字体加粗 font-weight: bold;
  • 每行所占高度（行高） line-height: 50px;

疑问一: 文字字体怎么会同时写两个值？
解答:
是首选和备选的关系，不只可以写两个，还可以写多个。放在第一个位置的是首选，后面的是备选。因为网页中可能存在中英文，中英文的字体样式不同。
font-family：首选，备选1，备选2.....

注意：当网页上存在中文和英文的时候。要首先写英文字体，在写中文字体。因为中文字体库包含英文，英文字体库不包含中文。

疑问二：行高是什么？用来干什么的？
解答：转答案在这里，别人的博文和再看一篇会更懂，也是别人的博客
line-height用来控制文字垂直方向上的位置。

2. 字体相关属性

  • 字体颜色 color:red;
  • 首行缩进 text-indent: 2em;或者 text-indent: 32px;

  • 文本水平方向对齐 text-align:文本对齐

    - 属性值有3个：left，center，right。
    
- 只能靠左，居中，靠右。
    
- 上下移动目前可以使用line-height.

  • text-decoration:文本修饰

    • underline 下划线
    • line-through 删除线
    • overline 上划线
    • none 无
  • 字间距:letter-spacing:10px;
  • 词间距:word-spacing:10px;
  • 字间距+词间距:
    letter-spacing:10px;和word-spacing:10px;共同使用

  • 强制换行：word-break:break-all;
    由于中文会强制换行，但是因为英文和数字不会强制换行。

    英文和数字不会自动换行

    <!--强制换行-->
    
   <!DOCTYPE html>
    
   <html lang="en">
    
   <head>
    
       <meta charset="UTF-8">
    
       <title>Title</title>
    
       <style>
    
           #box{
    
                width: 300px;
    
                height: 300px;
    
                border: 1px solid red;
    
            }
    
           #box1{
    
               width: 300px;
    
               height: 300px;
    
               border: 1px solid red;
    
               word-break:break-all;
    
           }
    
       </style>
    
   </head>
    
   <body>
    
      <div id="box">
    
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
    
      </div>
    
      <div id="box1">
    
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
    
      </div>
    
   </body>
    
   <!--
    
   英文和数字不能强制换行
    
   强制换行
    
   word-break:break-all;

   -->
    
   </html>
  • 强制不换行：white-space：nowrap；
    点击查看强制不换行

注意：词间距的使用

eg:
1.我爱学习
2.我 爱 学习

对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词，给了空格才知道。

查看词间距使用效果

 <!--词间距-->

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

           #box1, #box{

                width:800px;

                height:50px;

                border: 1px solid pink;

                color:red;

                font: 16px "宋体";

                word-spacing: 10px;

            }

        </style>

    </head>

    <body>

    <div id="box">我 爱 学习</div>

    <div id="box1">我 爱 学习</div>

    </body>

    <!--

     word-spacing: 表示词间距;

     使用词间距前：我空格-爱空格-学习

     使用词间距后：我空格-10px-爱空格-10px-学习

     -->

    </html>

词间距和字间距同时使用时，注意实际效果：
eg：我 爱 学 习。设置字间距为20px，词间距为50px。
实际效果为：
我-20px-空格-20px-50px-爱

词间距和字间距共同使用的效果

<!--字+词间距-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box{

            width:800px;

            height:50px;

            border: 1px solid pink;

            color:red;

            font: 16px "宋体";

            letter-spacing: 50px;

        }

        #box1{

            width:800px;

            height:50px;

            border: 1px solid pink;

            color:red;

            font: 16px "宋体";

            word-spacing: 50px;

        }

        #box2{

            width:800px;

            height:50px;

            border: 1px solid pink;

            color:red;

            font: 16px "宋体";

            word-spacing: 50px;

            letter-spacing: 20px;

        }

    </style>

</head>

<body>

<!--只使用字间距-->

<div id="box">我爱学习</div>

<!--只使用词间距-->

<div id="box1">我 爱 学 习</div>

<!--同时使用字间距和词间距-->

<div id="box2">我 爱 学 习</div>

<!--

  box2：字+词间距

  我-20px-空格-20px-50px-爱

-->

</body>

</html>

css基础—字体那些事的更多相关文章

  1. HTML&CSS基础-字体的样式

    HTML&CSS基础-字体的样式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  2. CSS基础-字体

    字体变化设置 改变字体颜色 color 改变字体大小 font-size 改变字体粗细 font-weight 改变字体样式 font-family 改变字间距 letter-spacing 改变字体 ...

  3. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  4. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  5. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  6. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  7. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

随机推荐

  1. win10远程桌面报出现身份验证错误，要求的函数不受支持

    win10远程桌面报出现身份验证错误,要求的函数不受支持 编写人:左丘文 2019-6-6 公司换了一台新笔记本电脑,是win10操作系统,刚想远程连接一下服务器,发现以前很正常的功能,发现不行了.网 ...

  2. 掌握这些 Redis 技巧，百亿数据量不在话下！

    一.Redis封装架构讲解 实际上NewLife.Redis是一个完整的Redis协议功能的实现,但是Redis的核心功能并没有在这里面,而是在NewLife.Core里面. 这里可以打开看一下,Ne ...

  3. 小a的轰炸游戏（差分，前缀和）

    题目传送门 题意: 给出一个n*m的矩形,然后有两个操作. 1操作,对一个给出的菱形,对菱形范围内的东西进行+1. 2操作,对一个上半菱形的区域,进行+1操作. 最后求矩形内各个数的异或和. 思路: ...

  4. man.conf - man的设定资料

    描述 man(1) man(1) 会 读 取 本 档 . man.conf 的 内 容 包 含 了 (a) 如 何 建 立 man 搜 寻 路 径 的 资 讯 , (b) man 所 使 用 的 程 ...

  5. fpga为什么要用nios 开发

    同一个项目可以用NIOS2也可以不用就可以完成,这句话说对也可以说不对,这要看是一个什么样的项目,你那样问的话可就说明有CPU和没CPU下的使用情况你还没有搞清楚,这两者并没有完全分开,简单的说就是有 ...

  6. mongo配置

    cmd下操作 cd /d E:\MongoDB\bin 创建数据库: mongod --dbpath E:\MongoDB\data\db 验证是否成功,登陆localhost:27017 进入E:\ ...

  7. python打包命令

    打包成exe方法 (1)切换到该文件夹 (2)pyinstaller -F py文件 (py文件要英文才行) -F 生成单个可执行文件 -w 去掉控制台窗口 -p 自定义需要加载的类路径 -i 可执行 ...

  8. ARM Cortex-M底层技术(1)—程序在Flash和SRAM的空间分配

    1. keil编译介绍 当使用keil进行单片机的开发时,运行一段程序后,在output输出框会看到如下图的结果. 图1 keil 的output框 其中,Compiler编译器,使用的版本是 V5. ...

  9. java术语（PO/POJO/VO/BO/QO/DAO/DTO）

    一.概念理解 ​ 这些概念用于描述对象的类型:由于java是面向对象的语言:程序的世界就是各个对象之间的"交互":在交互的工程中会存在多个层次,每个层次中所拥有(关注)的内容都是不 ...

  10. DevExpress v18.2版本亮点——Analytics Dashboard篇（一）

    行业领先的.NET界面控件——DevExpress v18.2版本亮点详解,本文将介绍了DevExpress Analytics Dashboard v18.2 的版本亮点,新版30天免费试用!点击下 ...