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>【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】