"2022-7-14日CSS知识点总结" 在2022年7月14日的学习中,我们聚焦于CSS(层叠样式表)的相关知识点,特别是与HTML表格样式设计相关的技巧。以下是这次学习的要点: 1. **HTML表格的基本结构**: HTML表格由`<table>`元素定义,包含`<thead>`(表头)、`<tbody>`(表体)和`<tr>`(行)、`<th>`(表头单元格)以及`<td>`(数据单元格)等元素。在示例代码中,我们看到了一个5列的表格,表头和表体都已定义。 2. **CSS对表格的样式控制**: - 使用`border`属性可以为表格设置边框,但默认情况下,边框是分开的。为了使单元格间的边框合并,我们可以使用`border-collapse: collapse;`。这使得整个表格呈现出统一的边框效果。 - `width`属性用于设定表格的宽度,例如在示例中设定了800像素。 - `text-align:center;`使表格中的文本居中对齐。 - `thead tr`的选择器用于设置表头行的背景颜色和文字颜色,使其在视觉上突出。 - 行高`height`可以通过设置`thead tr`的高度来调整。 3. **CSS选择器的运用**: - `tbody tr:nth-child(odd)`伪类选择器用于选取 tbody 中的奇数行,并为其添加背景颜色,实现隔行变色,增强表格的可读性。 - `tbody td:hover`选择器应用于鼠标悬停在表格单元格上时,改变背景颜色,这是鼠标悬停效果的常见应用。 4. **其他CSS属性的应用**: - `border:none;`用于移除边框,如果需要取消特定元素的边框,可以使用这个属性。 - `resize:none;`用于禁止文本域(如`<textarea>`)的大小调整,确保元素尺寸固定不变。 这些知识点都是CSS在实际网页设计中非常实用的技巧,它们帮助我们更精细地控制表格的外观和交互效果,提升用户体验。理解并掌握这些CSS特性对于创建专业且美观的网页至关重要。在后续的学习和实践中,可以进一步探索CSS的其他高级特性,如响应式布局、动画效果、选择器的复杂组合等,以提升网页设计的灵活性和功能性。
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 6
- 资源: 1
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 解决本地连接丢失无法上网的问题
- BIOS报警声音解析:故障原因与解决方法
- 广义均值移动跟踪算法在视频目标跟踪中的应用研究
- C++Builder快捷键大全:高效编程的秘密武器
- 网页制作入门:常用代码详解
- TX2440A开发板网络远程监控系统移植教程:易搭建与通用解决方案
- WebLogic10虚拟内存配置详解与优化技巧
- C#网络编程深度解析:Socket基础与应用
- 掌握Struts1:Java MVC轻量级框架详解
- 20个必备CSS代码段提升Web开发效率
- CSS样式大全:字体、文本、列表样式详解
- Proteus元件库大全:从基础到高级组件
- 74HC08芯片:高速CMOS四输入与门详细资料
- C#获取当前路径的多种方法详解
- 修复MySQL乱码问题:设置字符集为GB2312
- C语言的诞生与演进:从汇编到系统编程的革命
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)