【2024】前端学习笔记7-颜色-位置-字体设置

学习笔记

1.定义：css
2.颜色：color
3.字体相关属性：font
- 3.1.字体大小：font-size
- 3.2.字体风格：font - style
- 3.3.字体粗细：font - weight
- 3.4.字体族：font - family
4.位置：text-align

1.定义：css

CSS（Cascading Style Sheets）即层叠样式表。

CSS 是一种样式表语言，用于描述 HTML（超文本标记语言）或 XML（可扩展标记语言）文档的呈现方式。它通过选择器来定位 HTML 或 XML 元素，并为这些元素定义各种样式属性，如字体、颜色、布局、间距等。

2.颜色：color

通过color可以设置字体颜色。可以直接使用英文单词，也可使用16进制表示。

示例：

<body><h2>行内样式表</h2><p>我有一段文字，可以设置不同的颜色：<span style="color: red;">我是红色</span><span style="color: green;">我是绿色</span><span style="color: blue;">我是蓝色</span></p>
</body>

展示效果：

在这里插入图片描述

3.字体相关属性：font

3.1.字体大小：font-size

用于设置文本的字体大小，有多种单位选择：

px：绝对值，像素
%：相对单位，相对于父元素字体大小的百分比
rem：相对单位，相对于根元素（元素）的字体大小来计算的

示例：

<body><h2>设置文字大小</h2><p>我有一段文字，可以设置不同的文字大小：<br/><span style="color: red; font-size: 20px;">我是红色,字体大小为20px</span><br/><span style="color: green; font-size: 150%;">我是绿色,字体大小为150%</span><br/><span style="color: blue; font-size: 2rem;">我是蓝色,字体大小为2rem</span></p>
</body>

展示效果：

在这里插入图片描述

3.2.字体风格：font - style

可以使用font-style设置字体的样式：

normal：正常字体，默认
italic：斜体

示例：

<body><p><span style="font-style: italic;">我的字体样式为斜体</span><br/><span style="font-style: normal;">我的字体样式为正常</span></p>
</body>

展示效果：

在这里插入图片描述

3.3.字体粗细：font - weight

使用font-weight可以设置字体的粗细，默认为normal（数字为400），还可以设置为粗体bold（数字为700）;也可以设置为细体lighter；可用100-700数值表示，数字越大字体越粗。

示例：

<body><p><span style="font-weight: normal;">我的字体样式为正常</span><br/><span style="font-weight: bold;">我的字体样式为粗体</span><br/><span style="font-weight: lighter;">我的字体样式为细体</span></p>
</body>

展示效果：

在这里插入图片描述

3.4.字体族：font - family

使用font-family可以设置字体。

示例：

<body><p><span style="font-family: Verdana, Geneva, Tahoma, sans-serif;">我的字体是这样的</span><br/><span style="font-family: 'Times New Roman', Times, serif;">我的字体是这样的</span><br/><span style="font-family: 'Courier New', Courier, monospace;">我的字体是这样的</span></p>
</body>

展示效果：

在这里插入图片描述

4.位置：text-align

text - align是 CSS 中的一个属性，用于设置文本内容在元素内部的水平对齐方式。它可以应用于块级元素（如<div>、<p>等）或者表格单元格（<td>、<th>）等元素。

默认值为left，从左到右的书写习惯；除此之外还有其他属性：

属性	含义
left	左
right	右
center	居中
justify	两端对齐

示例：

<body><div style="background-color: aqua; width: 200px; height: 150px; ;"><p style="text-align: left;">我在左边</p><p style="text-align: center;">我在中间</p><p style="text-align: right;">我在右边</p></div>
</body>