文本、文字样式

吱吱吱-

已于 2023-02-09 15:01:06 修改

阅读量190

点赞数

文章标签： html css css3

于 2023-02-09 15:00:09 首次发布

本文链接：https://blog.csdn.net/m0_73970213/article/details/128951954

版权

一、文字样式

（一）长度单位

1:像素 px

实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，

如果我们把一个内容放大很多倍，就可以看到了，

在pc端（电脑端），一般情况下1px=1个发光点。

也是我们最常用的长度单位，它是固定单位

2:百分比 %

相对单位，它是相对于其父元素内容区（width/height）宽高

子元素的大小会随着父元素的大小变化而变化，我们管这种大小布局，叫流式布局

3:em

相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize，

如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，

就会继承根标签（html）的默认的字体大小，也就是16px

4:rem

相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size

html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px

5:vw

viewport width 视口的宽度

6:vh

viewport heigth 视口的高度

我们把视口划分为100个，宽度100vw，高度100vh

代码展示如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      /* 流式布局演示 百分比相对单位 */
      .box{
        background-color: red;
        width: 500px;
        height: 600px;
        font-size: 20px;
      }
      /* .box1{
        background-color: aquamarine;
        width: 50%;
        height: 50%;
      } */
      /* .box{
        width: 50%;
        height: 100px;
        background-color: red;
        font-size: 30px;
      } */
      .box1{
        width: 10em;
        height: 10em;
        background-color: #bfa;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
    </div>
  </body>
</html>

运行结果如下

（二）颜色单位

1:在CSS可以直接使用颜色的单词来表示不同的颜色

red,green,yellow等，一些简单的颜色，可以用英文单词

但不是很方便，一则单词太多，二则颜色也不好描述

2:使用RGB值来表示不同的颜色

rgb（red，green，blue）浓度0-255

这个比值不需要记，一般是设计师设计好，或者直接吸取颜色

3:RGBA

rgba(red, green, blue, alpha)

alpha 透明度 0-1之间

0是透明，1是不透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只不过表示的方式不一样

rgb（200，100，80）

0-9abcdef 16个数字

语法：#红色的浓度绿色浓度蓝色的浓度

#7f2eaa

00 表示最小 0

ff 表示最大 255

红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位

#ff0000 可简写#f00

#f0f0f0 不可简写

常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#f

5:HSL值 HSLA值（了解）

HSLA值（色度，饱和度，亮度，透明度）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  <style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, 0.5);
    }
  </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

（三）字体样式

1:color 设置字体颜色,也可以设置其他颜色,例如边框的颜色等

2:font-size 设置字体的大小,注意不同的单位px，em，rem

3:font-family 可以指定文字的字体设计师也会提前设计好

4:@font-face 自定义字体

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style>
      /* 自定义字体 */
      @font-face {
        /* 你给字体起的名字 */
        font-family: "zhiding";
        /* 字体的引入路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
      @font-face {
        font-family: 'zidingyi';
        src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
      }
      .xd {
        color: rgb(132, 188, 226);
        font-size: 5rem;
        /* font-family:'Times New Roman', Times, serif; */
        font-family: "zidingyi";
      }
      #gl{
        font-size: 40px;
        color: rgb(85, 85, 196);
      }
    </style>
  </head>
  <body>
    <p class="xd">西登香炉峰，南见瀑布水。</p>
    <p id="gl">挂流三百丈，喷壑数十里。</p> 
    
  </body>
</html>

效果如下

（四）字体分类

在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
           可以将字体设置为这些大的分类,当设置为大的分类以后，
               浏览器会自动选择指定的字体并应用样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.p1{
				/* 设置字体大小 */
				font-size: 30px;
				/* 设置一个字体 */
				font-family: Arial, Helvetica, sans-serif;
				/* 设置文字斜体 
				font-style  
				  可选值：normal  文字正常显示
				         italic  文字斜体  比较常用
						 oblique  文字斜体
				*/
				font-style:oblique;
			}
		.p2{
			color: red;
			/* 设置文字的加粗 
			font-weight  
			   可选值:
			     normal  文字正常显示  默认值
				 bold/bolder  文字加粗
				 100-900之间的数值   100是最细，900最粗   
			*/
			font-weight:700;
			/* 设置一个小型大写字母 
			font-variant: ;
			   可选值：
			      normal  文字正常显示  默认值
				  small-caps  字母小型大写字母
			*/
			font-variant:small-caps;
		}
		.p3{
			/* font 可以同时设置以上所有的字体相关的样式，颜色不可以
			注意：
			  1、必须有字体大小和字体
			  2、字体必须在倒数第一位，字体大小必须在倒数第二位
			*/
			color: green;
			font: italic bold 40px  sans-serif;
		}
		</style>
	</head>
	<body>
		
		<p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>
		
		<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
		
		<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
	</body>
</html>

一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底