文章目录
css实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：
注意：
如果多个标签共用一个样式，则用 , 分隔 ，eg：.head_left_ul , .head_end_ul , .end_div ul { }
Tips:
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
css中的id
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。（仅仅限于一个，多个会出现你意想不到的一些bug）
HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 " # " 来定义。
css中的class
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示， 在 CSS 中类选择器以一个点" . "号显示。
对于多个不同元素，但class一样的，你也可以指定特定的HTML元素使用class。
eg：
p.center {text-align:center;}
注意：
p和.center之间不要加空格，不然无效，因为这是选择p中 class 叫center的，而不是选择p元素后代元素中 class 叫center的（css结合元素选择器）
样式表
插入样式表的方法有三种：
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。 < link> 标签在（文档的）头部。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如：当样式仅需要在一个元素上应用一次时 或者 vue中动态绑定style。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
7种基础选择器
在讨论 CSS 优先级之前，先说说 CSS 的 7 种基础的选择器：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href=“segmentfault.com”]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
较难选择器，详见：
5种组合选择器
所有 CSS 的选择符由上述 7 种基础的选择器及其组合而成，组合的方式有很多种，这里列举较常见的5种：
后代选择符： .father .child{}（中间有空格）
子选择符： .father>.child{}（加不加空格一样，格式化之后，编译器（VS code）会自动删除空格，所以最好不加空格）
相邻（兄弟）选择符： .bro1+.bro2 p{} （空格同上）
后续兄弟选择器 ：div~p（后续兄弟选择器选取所有指定元素之后的相邻兄弟元素，以破折号分隔，空格同上）
多类选择器：.p1.p2（不能加空格，表示同时含有两个才行！）
后代选择和子代选择注意
很多人容易把子代选择器和后代选择器混在一起，子代选择器只能选择元素的子代，而他的孙代、曾孙不能被选上，后代选择器可以选子代、孙代、曾孙的元素
eg：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
.second p {
color: red;
}
/* .second>p {
color: red;
} */
style>
head>
<body>
<div class="first">
<div class="second">
<p>子代p>
<div>
<p>孙代p>
<div>
<p>曾孙p>
div>
div>
div>
<div class="third">
<P>兄弟P>
div>
div>
body>
html>
运行结果：
.second p {
color: red;
}
.second>p {
color: red;
}
兄弟选择注意：
兄弟选择器只能选择所选元素的后面兄弟元素，不能选择前面的兄弟元素，相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
eg：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
.second+.third p{
color: red;
}
/*.third+.second p{
color: red;
}*/
style>
head>
<body>
<div class="first">
<div class="second">
<p>子代p>
<div>
<p>孙代p>
<div>
<p>曾孙p>
div>
div>
div>
<div class="third">
<P>兄弟P>
div>
div>
body>
html>
运行结果
.second+.third p{
color: red;
}
.third+.second p{
color: red;
}
无效果！
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
但是也会出现更加复杂的样式，eg：p.center 、 继承 、#c .p 、div p…
这时的优先级如何比较？
最近的祖先样式比其他祖先样式优先级高
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断
属性后插有 !important 的属性拥有最高优先级，若同时插有 !important，则再利用规则 3、4 判断优先级
选择器错误理解
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。
还是拿刚刚的例子说明，11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。
前端如何设置表格边框样式和单元格间距？
前端如何设置表格边框样式和单元格间距？
引言
在前端开发中，表格是展示数据的一种常见方式。合理设置表格的边框样式和单元格间距不仅能让表格看起来更加美观，还能提高数据的可读性。本文将详细介绍如何使用 CSS 来定制表格的外观，包括边框样式和单元格间距，以及一些实际工作中可能会遇到的问题和解决方案。
表格的基本概念
在 HTML 中，表格由 元素构成，内部包含 （行）、
（数据单元格）和 （表头单元格）。表格的样式可以通过内联样式、内部样式表或者外部样式表来定义。
基本结构
<table>
<thead>
<tr>
<th>标题 1th>
<th>标题 2th>
tr>
thead>
<tbody>
<tr>
<td>数据 1td>
<td>数据 2td>
tr>
<tr>
<td>数据 3td>
<td>数据 4td>
tr>
tbody>
table>
示例一：基本表格样式 CSS
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 设置表格宽度 */
}
th, td {
border: 1px solid #ddd; /* 设置单元格边框 */
padding: 8px; /* 设置内边距 */
text-align: left; /* 文字左对齐 */
}
th {
background-color: #f2f2f2; /* 设置表头背景色 */
font-weight: bold; /* 设置加粗字体 */
}
说明
这个示例展示了最基本的表格样式设置。border-collapse: collapse; 让表格边框合并为单一的边框，避免出现双线的情况。padding 属性为单元格添加了内边距，使得内容与边框之间有一定的间距。
示例二：交替行颜色
为了增加表格的可读性，我们可以给奇数行和偶数行设置不同的背景颜色。
CSS
table tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
table tr:nth-child(odd) {
background-color: #ffffff; /* 奇数行背景色 */
}
说明
使用 nth-child 选择器可以轻松地选择奇数行和偶数行，然后分别设置不同的背景颜色。这样可以让用户更容易地区分不同的行。
示例三：固定表头
在长表格中，当滚动页面时，表头往往会消失，这降低了数据的可读性。通过设置表头为固定位置，可以解决这个问题。
CSS
table {
overflow-x: auto; /* 水平滚动条 */
}
thead th {
position: sticky; /* 固定位置 */
top: 0; /* 距离顶部的距离 */
background-color: #f2f2f2; /* 表头背景色 */
z-index: 1; /* 确保表头在其他元素之上 */
}
说明
使用 position: sticky; 和 top: 0; 可以让表头在滚动时保持在顶部。overflow-x: auto; 则确保当表格内容超出容器宽度时，会出现水平滚动条。
示例四：设置单元格间距
如果想要在单元格之间增加额外的间距，可以通过设置边框的宽度或使用 cellpadding 和 cellspacing 来实现。
HTML
<table cellspacing="10" cellpadding="10">
table>
CSS
table {
border-spacing: 10px; /* 设置边框间距 */
border-collapse: separate; /* 分离边框 */
}
说明
cellspacing 和 border-spacing 可以用来设置单元格之间的间距。需要注意的是，border-collapse: separate; 必须设置才能让 border-spacing 生效。
示例五：响应式表格
对于移动设备，表格可能需要不同的布局或显示方式。可以使用媒体查询来创建响应式的表格。
CSS
table {
width: 100%; /* 表格宽度 */
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block; /* 将表格元素转换为块级元素 */
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px; /* 隐藏表头 */
}
tr { margin: 0 0 1rem 0; } /* 行间的间距 */
td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%; /* 为标签留出空间 */
}
td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
HTML
<table>
<thead>
<tr>
<th data-label="标题 1">标题 1th>
<th data-label="标题 2">标题 2th>
tr>
thead>
<tbody>
<tr>
<td data-label="标题 1">数据 1td>
<td data-label="标题 2">数据 2td>
tr>
<tr>
<td data-label="标题 1">数据 3td>
<td data-label="标题 2">数据 4td>
tr>
tbody>
table>
说明
在较小的屏幕尺寸下，表格会被转换为块级元素，每一行都会单独显示。表头会被隐藏，而每个单元格前会有一个标签，该标签的内容是该列的标题。这种方式非常适合移动设备上的显示。
实际工作中的使用技巧 技巧一：优化单元格内的内容
对于较长的文字内容，可以使用 word-break: break-all; 或 word-wrap: break-word; 来避免溢出。
CSS
td {
word-break: break-all; /* 断开长单词 */
}
技巧二：使用 CSS 预处理器
使用像 Sass 或 Less 这样的 CSS 预处理器可以帮助管理复杂的样式规则，尤其是当你需要重复使用某些样式时。
Sass
$table-border: 1px solid #ddd;
table {
border-collapse: collapse;
width: 100%;
th, td {
@include border($table-border);
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
}
技巧三：考虑无障碍性
在设计表格时，考虑无障碍性是非常重要的。例如，使用 元素来提供表格标题，使用 元素来定义表头，并确保这些元素具有适当的 scope 属性。
HTML
<table>
<caption>产品列表caption>
<thead>
<tr>
<th scope="col">产品名称th>
<th scope="col">价格th>
tr>
thead>
<tbody>
<tr>
<th scope="row">产品 Ath>
<td>$100td>
tr>
<tr>
<th scope="row">产品 Bth>
<td>$200td>
tr>
tbody>
table>
技巧四：处理复杂的表格布局
对于复杂的表格布局，可以使用 CSS Grid 或 Flexbox 来实现更高级的布局控制。
CSS
table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 动态列宽 */
}
通过本文的介绍和示例，希望你能更好地掌握如何设置表格的边框样式和单元格间距。在实际开发中，灵活运用这些技巧可以让你的表格更加美观、易读和响应式。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
