学习笔记
- 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>
展示效果：
