首页 前端知识 CSS之文字样式

CSS之文字样式

2024-05-13 11:05:30 前端知识 前端哥 910 88 我要收藏

CSS文字样式

  • 一、font-size 字号
  • 二、font-weight 加粗
  • 三、font-style 倾斜
  • 四、line-height 行高
  • 五、color 字体颜色
  • 六、text-indent 缩进
  • 七、text-align 对齐方式
  • 八、font-family 字体族
  • 九、text-decoration 下划线
  • 十、font 复合属性

在这里插入图片描述

CSS字体属性定义字体,颜色、大小,加粗,文字等的样式

在这里插入图片描述

一、font-size 字号

能否管理文字的大小,在网页设计中是非常重要的。但是,你不能 通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

二、font-weight 加粗

在这里插入图片描述

font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 700;

三、font-style 倾斜

font-style的作用不是为了设置倾斜字体,相反是为了清除倾斜效果

  • normal:正常
  • italic:倾斜
font-style: normal;
font-style: italic;

四、line-height 行高

在这里插入图片描述

注意实际开发时需要测量真实行高,从一行文字最顶端到下一行文件最顶端就是行高
在这里插入图片描述

  • 方法:
    • 直接设置像素值px
    • 数字(当前字体大小的倍数)
line-height: 30px;  
line-height: 3;

五、color 字体颜色

字体颜色的设置方法有四种,最常用的是后面两种

在这里插入图片描述

color: red;
color: rgb(255,0,0);
color: rgba(255,0,0,.5);
color: #2c505f;

六、text-indent 缩进

  • 方法:
    • 直接写像素值px
    • em值 (常用):指的是当前字号大小,1em代表缩进一个字号大小
text-indent: 20px;
text-indent: 2em;

在这里插入图片描述

七、text-align 对齐方式

text-align:可以让文字在水平的方向对齐,对齐的方式有三种。

在这里插入图片描述

注意如果要让文字居中对齐,只能是一行文字,存在换行的情况居中对齐失效。

text-align: left;  
text-align: center;  
text-align: right;  

text-align不仅可以让一行文字居中对齐,还可以让图片居中对齐。但是要注意图片居中必须要在div盒子里,因为居中的本质是让div盒子内容居中

<style>
  div{
       width: 500px;
       height: 500px;
       border: 1px solid saddlebrown;
    }
  img{
      text-align: center;
    }
    </style>
<div>
    <img src="/img/主帅.jpg">  
</div>

八、font-family 字体族

  • 注意
  • 字体可以用中文或英文表示;
  • 如果字体名称包含空格则必须加上引号;
  • 如果有多个字体则用逗号隔开。
font-family: 楷体;  
font-family: Calibri;  
font-family: "Arial Unicode MS";  
font-family: 楷体,宋体; 

拓展:font-family属性值可以书写多个字体名,各个字体名用逗号隔开,最后设置一个字体族名(网页开发建议使用无衬线字体self-serif)执行顺序是从左向右依次查找。

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,楷体, sans-serif;

在这里插入图片描述

九、text-decoration 下划线

text-decoration的主要作用就是去掉超链接的下划线

在这里插入图片描述

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

十、font 复合属性

作用:font一般用在网页文字的公共样式

  • 方法:【font:是否倾斜 是否加粗 字号/行高 字体】必须按此格式和顺序编写,并且字号和字体值不可省略,否则不生效。
    在这里插入图片描述
*{
    font: normal 700 30px/2 楷体;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8559.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!