前端CSS基础4（像素，颜色，字体属性大小复合属性）
- CSS代码编写位置
- CSS像素
- CSS颜色
- CSS常用字体属性和大小
- 字体的复合属性
CSS代码编写位置
- 在HTML文件的头部使用
<head>
<style>
/* 在这里编写CSS代码 */
</style>
</head>
2. 在外部引入的样式表文件（.css文件）中：
<link rel="stylesheet" href="styles.css">
3. 在HTML元素的style属性中：
<p style="color: blue; font-size: 16px;">Hello, World!</p>
4. 在内联样式中：
<div style="background-color: #f0f0f0;">
<!-- 内容 -->
</div>
CSS代码可以直接在HTML文件中嵌入，也可以在独立的外部样式表文件中定义，然后通过链接引入到HTML文件中。此外，你还可以在HTML元素的style属性中为特定元素设置样式，或者使用内联样式直接在元素中指定样式。不同的方法适用于不同的场景和需求。
CSS像素
CSS像素（CSS pixel）是用于在网页上定义元素大小和位置的度量单位。它不同于物理像素，因为物理像素是显示器上的最小可显示单元，而CSS像素则是浏览器中用于渲染网页的虚拟像素。
在高分辨率显示器上，一个CSS像素可能包含多个物理像素，而在低分辨率显示器上，一个CSS像素可能只包含一个或几个物理像素。因此，使用CSS像素可以确保网页在不同分辨率的显示器上具有一致的外观和布局。
CSS像素可以通过设置元素的宽度、高度、边框等属性来定义。例如，以下代码将一个div元素的宽度设置为100px：
div {
width: 100px;
}
CSS颜色
在CSS中，颜色主要有以下两种表示方式：
- 英文单词：这种方式使用预定义的颜色名称来表示颜色。这些颜色名称通常是大家熟知的，如
red、blue、green等。这些颜色名称不区分大小写，并且CSS支持大约140种这样的标准颜色名称。 - 十六进制值：这种表示方法通过一个以
#开头的六位十六进制数来表示颜色。例如，#FF0000代表红色。在这种表示法中，前两位表示红色（#ff0000)，中间两位表示绿色(#00ff00)，最后两位表示蓝色(#0000ff)。要想添加透明度则再在其后面加两位十六进制，#开头的八位十六进制数来表示颜色和透明度。
除了这两种基本的颜色表示方式，CSS还提供了其他几种更为复杂的颜色表示方法，包括： - RGB：这是一种基于红绿蓝三原色的组合来表示颜色的方式。例如，
rgb(255,0,0)表示红色。注意三位数字的范围都是0~255，或者是三位数字都用百分比来表示（25%，15%，10%），用百分比时，三位数值的范围是0%-100% - RGBA：这是RGB的扩展，增加了一个透明度参数。例如，
rgba(255,0,0,0.5)表示半透明的红色。注意最后一位的数值范围为0-1，或者0%-100% - HSL：这是一种基于色相（H）、饱和度（S）和亮度（L）的颜色表示方法。它允许用户以一种更直观的方式来选择颜色。
- HSLA：这是HSL的扩展，同样增加了一个透明度参数。
在 HSL 颜色表示法中，数值范围如下：
色相（H）：表示颜色在色相环上的角度，范围是 0 到 360 度。0 度对应红色，120 度对应绿色，240 度对应蓝色。
饱和度（S）：表示颜色的鲜艳程度，范围是 0% 到 100%。0% 表示灰色阴影，100% 表示完全饱和的颜色。
亮度（L）：表示颜色的明暗程度，范围也是 0% 到 100%。0% 代表黑色，100% 代表白色。
通过这些参数的组合，可以定义出各种不同的颜色。
/* HSL表示法 */
<h2 style="color: hsl(120, 100%, 50%)">欧买噶</h2>; /* 绿色 */
/* HSLA表示法，其中透明度值在0（完全透明）到1（完全不透明）之间 */
<h1 style="color: hsla(210, 100%, 50%, 0.5)">欧买噶</h1>; /* 半透明的蓝色 */
CSS常用字体属性和大小
CSS常用字体属性：
font-family：设置文本的字体系列。
这段CSS代码 font-family: Arial, sans-serif; 的意思是指定一个字体系列，其中有两个备选项：首选使用Arial字体，如果计算机上没有安装Arial字体，则会回退到sans-serif字体或浏览器的默认无衬线字体。
Arial: 如果用户的计算机上安装了Arial字体，文本将以Arial字体显示。
sans-serif: 如果用户的计算机上没有Arial字体，那么文本将在无衬线字体中显示。具体是什么无衬线字体取决于浏览器的默认设置。常见的无衬线字体包括Helvetica、Verdana等。
这样的设置有助于确保即使某些用户没有特定字体（比如Arial）安装在其系统中，页面上的文本也能以类似风格的字体进行合理显示。
font-family: Arial, sans-serif;
/*一般以sans-serif或者serif结尾作为保底字体选项*/
/* 按照顺序找，前者没有则按顺序找下一个字体，直到找到为止，写英文名字会更好 */
font-family: "楷体","宋体","温软雅黑","仿宋体";
font-family: "宋体";
font-size：设置文本的字体大小。
font-size: 16px;
注意谷歌浏览器默认大小为16px，最小字体为12px，并且0px会自动消失。不同浏览器的默认大小不一致。可以设置默认字体大小如下。
/* 在根元素上设置默认字体大小 */
html {
font-size: 16px; /* 使用相对单位em或rem也是常见做法 */
}
/* 在body元素上设置默认字体大小 */
body{
font-size: 16px
}
font-weight：设置文本的字体粗细。
/*粗，细，正常*/
font-weight: bold;
font-weight: lighter;
font-weight: normal;
/*数值从100-1000之间从细到粗*/
font-weight: 100;
font-weight: 1000;
font-style：设置文本的字体样式（斜体等）。
font-style: italic;
font-variant：设置文本的字体变体（小型大写字母等）。
font-variant: small-caps;
字体大小：
在CSS中，字体大小可以使用不同的单位来定义，例如：
像素（px）：固定尺寸，适合在Web开发中使用。
font-size: 16px;
相对长度单位（em、rem）：相对于父元素或根元素的倍数。
font-size: 1.2em; /* 相对于父元素的1.2倍 */
百分比（%）：相对于父元素的百分比大小。
font-size: 120%; /* 相对于父元素的120% */
这些是常见的CSS字体属性和字体大小的定义方式。
/* 应用字体属性和字体大小设置 */
.text {
font-family: Arial, sans-serif; /* 字体系列 */
font-weight: bold; /* 字体粗细 */
font-style: italic; /* 字体样式 */
font-variant: small-caps; /* 字体变体 */
font-size: 16px; /* 字体大小：16像素 */
}
<div class="text">欧买噶</div>
字体的复合属性
在CSS中，可以使用 font 复合属性来同时设置文本的多个字体样式，包括字体大小、字体系列、粗细、风格等。 font 属性允许以一行代码设置多个字体相关属性，使得代码更简洁易读。
font 复合属性包括以下子属性：
font-style: 指定文本的风格，如 normal（正常）、italic（斜体）或 oblique（倾斜）。font-variant: 控制字体变体，比如 small-caps（小型大写字母）。font-weight: 指定文本的粗细，如 normal、bold、lighter 或数字值（100~900）。font-size: 设置文本的字体大小，可以使用像素(px)、em、rem等单位。 line-height: 设置文本行高。font-family: 指定字体系列，可以指定多个备选字体，以确保兼容性。
当有多个字体属性要进行调整时，可以利用复合属性。注意一般按照这个顺序进行编写代码。
用法示例：
p {
font: italic small-caps bold 20px/1.5 Arial, sans-serif;
}
在这个例子中，font 属性设置了段落元素的字体。它应用了斜体、小型大写字母、粗体，字体大小为20像素，行高为1.5倍字体大小，最后是字体系列为Arial，如果没有Arial字体，则回退到sans-serif字体。
