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. 【转】sql server数据收集和监控

    转自:https://www.cnblogs.com/zhijianliutang/p/4476403.html 相关系列: https://www.cnblogs.com/zhijianliutan ...

  2. java基础笔记（11）

    css 样式的设置主要有选择器+声明{}:声明里又分为属性和值: 注释代码:/*注释语句*/ 内联式:写在元素开始的标签里:例:<p style = "color:red;font-s ...

  3. 遍历文件夹下的csv，把数据读进一张表

    import pandas as pd import os if __name__ == '__main__': Path = 'c:\checklog' dfs = [] for dir_path, ...

  4. HDU1181 题解（Floyd最短路）

    题面: 变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  5. mysql5.7单机多实例安装

    基于之前的mysql5.7单实例安装 修改/etc/my.cnf文件如下(这里配置4个实例,可自行修改数目) # # 多实例配置文件,可以mysqld_multi --example 查看例子 # [ ...

  6. go & log

    更多日志库 https://github.com/golang/glog github.com/astaxie/beego/logs ... 这里有一个讨论 Golang的log包哪个好用? 参考 G ...

  7. React -- 3/100 】组件通讯

    通讯 | props | prop-types 组件通讯 Props: 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props /* class */ .parent-box ...

  8. 设计模式开闭原则--java

    静态工厂模式 + 反射控制入参范围 public interface IPrinter { void print(); } public class CanonPrinter implements I ...

  9. Django之modles 多对多创建第三张表

    一.第一种:纯自动创建第三张表 纯自动 class Book(models.Model): title = models.CharField(max_length=32) price = models ...

  10. 10年前文章_iscsi initiator 设置

    发现和查找 target, iscsiadm -m discovery -t sendtargets -p 192.168.1.1:3260 登录 iscsiadmin -m node -l 退出登录 ...