CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select
目录
1.文本
2.字体
3.列表list
a.无序列表
b.有序列表
c.定义列表
4.表格table
a.内容
b.合并单元格
3.表单input
a.input标签
b.单选框
c.上传文件
4.下拉菜单
1.文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色。 |
| direction | 指定文本的方向 / 书写方向。 |
| letter-spacing | 设置字符间距。 |
| line-height | 设置行高。 |
| text-align | 指定文本的水平对齐方式。 |
| text-decoration | 指定添加到文本的装饰效果。 |
| text-indent | 指定文本块中首行的缩进。 |
| text-shadow | 指定添加到文本的阴影效果。 |
| text-transform | 控制文本的大小写。 |
| text-overflow | 指定应如何向用户示意未显示的溢出内容。 |
| unicode-bidi | 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。 |
| vertical-align | 指定文本的垂直对齐方式。 |
| white-space | 指定如何处理元素内的空白。 |
| word-spacing | 设置单词间距。 |
| 属性 | 描述 |
|---|---|
| text-align-last | 指定如何对齐文本的最后一行。 |
| text-justify | 指定对齐的文本应如何对齐和间隔。 |
| text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
| word-break | 指定非 CJK 脚本的换行规则。 |
| word-wrap | 允许长单词被打断并换到下一行。 |
| writing-mode | 指定文本行是水平放置还是垂直放置。 |
对于 W3C compliant CSS：如果定义了 color 属性，则还必须定义 background-color 属性。
2.字体
| 属性 | 描述 |
|---|---|
| font | 简写属性。在一条声明中设置所有字体属性。 |
| font-family | 规定文本的字体系列（字体族）。 |
| font-size | 规定文本的字体大小。 |
| font-style | 规定文本的字体样式。 |
| font-variant | 规定是否以小型大写字母的字体显示文本。 |
| font-weight | 规定字体的粗细。 |
-
字体大小：
PC端网页最常用的是像素px，且必须要带单位，谷歌默认字体是16像素
p { font-size:30px; } -
字体粗细：
行高=文本高度+上间距+下间距
注意：添加单位px表示行高，不加单位表示当前标签属性值的倍数！
3.列表list
列表还拥有默认的外边距和内边距。
要删除此内容，可在 <ul> 或 <ol> 中添加 margin:0 和 padding:0
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。在一条声明中设置列表的所有属性。 |
| list-style-image | 指定图像作为列表项标记。 |
| list-style-position | 规定列表项标记（项目符号）的位置。 |
| list-style-type | 规定列表项标记的类型。 |
a.无序列表
b.有序列表
c.定义列表
4.表格table
table 和 <th> 和 <td> 元素都有单独的边框。
| 属性 | 描述 |
|---|---|
| border | 简写属性。在一条声明中设置所有边框属性。 |
| border-collapse | 规定是否应折叠表格边框。 |
| border-spacing | 规定相邻单元格之间的边框的距离。 |
| caption-side | 规定表格标题的位置。 |
| empty-cells | 规定是否在表格中的空白单元格上显示边框和背景。 |
| table-layout | 设置用于表格的布局算法。 |
a.内容
加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二天</title>
</head>
<body>
<!-- 无序列表 -->
<ul>
<li>无序列标签1</li>
<li>无序列标签2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列标签1</li>
<li>有序列标签2</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>标题</dt>
<dd>描述1</dd>
<dd>描述2</dd>
</dl>
<!-- 表格标签，加border后能显示边框
加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略-->
<table border="1">
<thead>
<tr>
<th>第一行表头单元格1</th>
<th>第一行表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行内容单元格1</td>
<td>第一行内容单元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>第二行汇总单元格1</td>
<td>第二行汇总单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>b.合并单元格
注意：
表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并
<!-- 合并单元格，遵循“保留最左最上”原则 -->
<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>70</td>
<td rowspan="2">80</td>
<td>90</td>
</tr>
<tr>
<td>90</td>
<!-- <td>80</td> 删除-->
<td>70</td>
</tr>
<tr>
<td colspan="3">160</td>
<!-- <td>160</td> 删除-->
<!-- <td>160</td> 删除-->
</tr>
</table>
3.表单input
CSS 表单
作用：收集用户信息
使用场景：
-
登录页面
-
注册页面
-
搜索区域
a.input标签
添加input标签占位文本：使用placeholder属性即可
b.单选框
c.上传文件
<br>
<!-- 表单标签——input标签使用 -->
<!-- 单纯的文本形式，不能换行 -->
文本框：<input type="text">
<br>
<!-- 自动非明文显示 --> <!-- input标签占位文本 -->
密码框：<input type="password" placeholder="请输入密码">
<br>
单选框：
<!-- gender是自定义名称，添加checked属性，默认选中 -->
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
<br><br>
<!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->
上传一个文件：<input type="file" >
<br>
上传多个文件：<input type="file" multiple>
<br><br>
<!-- 添加checked属性，实现默认选中 -->
多选框：<input type="checkbox"> 苹果
多选框默认选中：<input type="checkbox" checked> 草莓
<br>
4.下拉菜单select
<!-- 下拉菜单，使用属性selected实现默认选中-->
城市：
<!-- <select name="" id=""></select> name和id等是发送数据使用的属性-->
<select >
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
</select>
<br><br>【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】