主页 > 电脑硬件 >

CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select

电脑硬件
2025-09-18 11:15:01

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>  <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>70</td> </tr> <tr> <td colspan="3">160</td>   </tr> </table>

3.表单input

CSS 表单

作用：收集用户信息

使用场景：

登录页面

注册页面

搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件 <br>   文本框：<input type="text"> <br>   密码框：<input type="password" placeholder="请输入密码"> <br> 单选框：  <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女 <br><br>  上传一个文件：<input type="file" > <br> 上传多个文件：<input type="file" multiple> <br><br>  多选框：<input type="checkbox"> 苹果多选框默认选中：<input type="checkbox" checked> 草莓 <br>

4.下拉菜单select

城市：  <select > <option>北京</option> <option>上海</option> <option selected>广州</option> </select> <br><br>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

标签：

CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select”

上一篇
《白帽子讲Web安全：点击劫持》

下一篇
132.分割回文串II|最少分割次数