【Java面试第21天：CSS样式表详解与实战】
在Java面试中，CSS样式表是前端开发领域不可或缺的一部分，了解其基本概念、层叠性和优先级对于全面掌握Web开发至关重要。
1. CSS样式的使用方式：
- 内联样式表：通过在HTML元素的`style`属性中直接定义样式，例如`<p style="color:red;">文本</p>`。
- 内部样式表：在HTML文档的`<head>`部分使用`<style>`标签定义样式，适用于整个页面的样式统一，如`<style> p { color: red; }</style>`。
- 外部样式表：将样式定义在独立的.css文件中，通过`<link>`标签引入到HTML文档，便于样式复用和管理，如`<link rel="stylesheet" href="styles.css">`。
2. CSS样式的层叠性：
- 继承性：子元素可以继承父元素的部分样式，如字体大小、颜色等。
- 层叠次序：当多个样式表同时作用于一个元素时，浏览器会根据来源的顺序决定样式生效。
- 优先级：不同来源的样式有不同的权重，内联样式（3）> 外部/内部样式表（2）> 浏览器默认样式（1），如果有相同权重，后定义的样式覆盖前定义的。
3. CSS样式的优先级：
- !important具有最高优先级，若存在，即使权重较低也会覆盖其他样式。
- ID选择器（100）> 类选择器（10）> 标签选择器（1）> 通配符选择器（0）> 行内样式（1000）。
- 当多个选择器同时作用于一个元素时，优先级高的样式优先显示。
4. CSS代码解析：
- 代码中使用了元素选择器（如`body`和`div`），ID选择器（如`#header`，`#footer`，`#navi`，`#main`），以及选择器分组（如`#header, #footer`）。
- `margin: 0px auto;`用于使元素在容器中居中，`padding: 0px;`清空元素内边距，`background-repeat: repeat-x;`使背景图像在X轴平铺，`width: 100%;`设置元素宽度为父元素宽度等。
5. 编程题实践：
- 添加“增加”按钮，使用`<input type="button" value="增加" class="btn_add" />`，并定义相应的CSS类`btn_add`。
- 创建分页功能，使用`<a>`标签表示页码，为不同状态（当前页、鼠标悬停）设置不同的CSS样式，例如：
```css
.page:hover {
background-color: #cddde4;
border-color: #97b9c9;
color: #067db5;
}
.current_page {
background-color: white;
border-color: #89bdd8;
color: #067db5;
}
```
- 根据页面设计，调整元素的布局、尺寸、颜色等属性，以实现所需效果。
掌握CSS样式表的概念、层叠性及优先级，以及在实际代码中的应用，是Java前端面试中的常见要求。深入理解这些知识，有助于在面试中展示出扎实的前端基础。
