/* 定义一个名为 `.wrap` 的类选择器样式规则，应用该类的元素将会具有以下样式属性。
设置内边距（padding）为 5 像素，使元素内部的内容与边框之间有一定的间隔；
设置字体大小（font-size）为 14 像素，统一控制该元素内文本的字号大小。 */
.wrap{
    padding: 5px;
    font-size: 14px;
}

/* 定义一个名为 `.left` 的类选择器样式规则，应用该类的元素通常会是向左浮动（float: left）的布局方式，
并且设置其宽度（width）为 425 像素，常用于将页面划分为左右两部分布局时，定义左边部分元素的宽度和浮动特性，使其能够与其他浮动元素（如右侧部分元素）进行并排排列。 */
.left{
    width: 425px;
    float: left;
}

/* 定义一个名为 `.right` 的类选择器样式规则，应用该类的元素会向右浮动（float: right），设置宽度为 160 像素，
添加 1 像素宽的实线边框（border: 1px solid #ccc），颜色为浅灰色（#ccc）；设置内边距为 5 像素（padding: 5px），使内部内容与边框有间隔；
并设置右边距（margin-right）为 5 像素，用于控制该元素与右侧其他元素的间隔距离，常用于构建页面右侧栏样式等布局场景。 */
.right{
    width: 160px;
    border: 1px solid #ccc;
    float: right;
    padding: 5px;
    margin-right: 5px;
}

/* 针对类名为 `.right` 内部的类名为 `.pre` 的元素设置样式规则。
设置其高度（height）为 332 像素，当元素内部内容超出这个高度时，通过 `overflow-y: auto` 属性使垂直方向（y 轴方向）出现滚动条，实现内容的滚动显示，常用于展示内容较多且有固定高度限制的区域，如侧边栏的可滚动内容区域等。 */
.right.pre{
    height: 332px;
    overflow-y: auto;
}

/* 针对类名为 `.right` 内部的类名为 `.preitem` 的元素设置样式规则。
设置其边框（border）为 1 像素宽的白色实线（border: white 1px solid），设置上下外边距（margin）为 5 像素、左右外边距为 0，使元素在垂直方向上有间隔，水平方向上紧凑排列；
设置上下内边距（padding）为 2 像素、左右内边距为 0，控制内部内容与边框的间隔距离，整体定义了该元素的基本外观和布局相关的样式属性。 */
.right.preitem{
    border: white 1px solid;
    margin: 5px 0;
    padding: 2px 0;
}

/* 针对类名为 `.right` 内部的类名为 `.preitem` 的元素设置鼠标悬停（`:hover`）时的样式规则，用于实现交互效果。
当鼠标悬停在该元素上时，改变其背景颜色（background-color）为柠檬绸色（lemonChiffon），使元素有视觉上的突出显示效果；
将鼠标指针样式（cursor）改变为指针形状（cursor: pointer），提示用户该元素可点击交互；
同时改变边框为 1 像素宽的浅灰色（#ccc）实线，替换掉默认的白色边框，增强悬停时的视觉区分度。 */
.right.preitem:hover{
    background-color: lemonChiffon;
    cursor: pointer;
    border: #ccc 1px solid;
}

/* 针对类名为 `.right` 内部的类名为 `.preitem` 的元素内部的 `img` 图片元素设置样式规则。
设置其显示方式（display）为块级元素（display: block），使其独占一行，方便进行水平居中对齐等布局操作；
设置左右外边距（margin）为自动（auto），实现图片在水平方向上的居中对齐效果；
设置图片的宽度（width）为 100 像素，用于统一控制该类元素内部图片的宽度大小，使其具有一致的外观展示效果。 */
.right.preitem img{
    display: block;
    margin: 0 auto;
    width: 100px;
}

/* 定义一个名为 `.clear` 的类选择器样式规则，通过 `clear: both` 属性清除元素两侧的浮动影响，常用于解决由于浮动元素导致的父元素高度塌陷等布局问题，使后续元素能在正常的文档流中进行布局排列，不受之前浮动元素的干扰。 */
.clear{
    clear: both;
}

/* 定义一个名为 `.top` 的类选择器样式规则，设置元素的高度（height）为 26 像素，行高（line-height）也为 26 像素，使文本在垂直方向上能居中对齐；
设置内边距（padding）为 5 像素，用于控制内部内容与边框的间隔距离，常用于页面顶部导航栏、标题栏等具有固定高度和内边距要求的区域样式设置。 */
.top{
    height: 26px;
    line-height: 26px;
    padding: 5px;
}

/* 定义一个名为 `.bottom` 的类选择器样式规则，设置元素的高度（height）为 320 像素，宽度（width）为 100%（即占满父元素的宽度），
设置上下外边距（margin）为 0 且左右外边距为自动（auto），使其在水平方向上能居中对齐，常用于页面底部内容区域等具有固定高度和宽度要求以及居中布局需求的样式设置。 */
.bottom{
    height: 320px;
    width: 100%;
    margin: 0 auto;
}

/* 定义一个名为 `.transparent` 的类选择器样式规则，通过 `background` 属性设置元素的背景为指定的图片（images/bg.gif）并进行重复平铺（repeat），
常用于创建具有特定背景图案且重复铺满整个元素背景区域的效果，可能用于页面的装饰性背景或者特定模块的背景样式设置等场景。 */
.transparent{
    background: url("images/bg.gif") repeat;
}

/* 针对类名为 `.bottom` 内部的表格（table）元素内部的 `tr` 行元素内部的 `td` 单元格元素设置样式规则。
为单元格添加 1 像素宽的虚线边框（border: 1px dashed #ccc），颜色为浅灰色（#ccc），用于区分不同的单元格，增强表格的可视化效果，常用于需要有一定边框样式但又不想使用实线边框显得过于生硬的表格样式设置场景。 */
.bottom table tr td{
    border: 1px dashed #ccc;
}

/* 定义一个 `id` 为 `colorPicker` 的元素的样式规则，设置其宽度（width）和高度（height）均为 17 像素，创建一个小的方形元素；
添加 1 像素宽的浅灰色（#CCC）实线边框（border: 1px solid #CCC）；设置其显示方式（display）为内联块级元素（display: inline-block），使其既可以像内联元素一样在一行内排列，又能像块级元素一样设置宽度、高度等属性；
添加 3 像素的边框圆角（border-radius: 3px），使其边角变得圆润，增加外观的美观度；
添加阴影效果（box-shadow: 2px 2px 5px #D3D6DA），通过指定水平和垂直方向的偏移量以及模糊半径等参数，营造出元素的立体和层次感，常用于颜色选择器等需要突出显示且有一定交互效果的小元素样式设置场景。 */
#colorPicker{
    width: 17px;
    height: 17px;
    border: 1px solid #CCC;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #D3D6DA;
}

/* 定义一个名为 `.border_style1` 的类选择器样式规则，设置内边距（padding）为 2 像素，添加 1 像素宽的浅灰色（#ccc）实线边框（border: 1px solid #ccc）；
设置 5 像素的边框圆角（border-radius: 5px），使元素边角更加圆润；添加阴影效果（box-shadow: 2px 2px 5px #d3d6da），营造出一定的立体和层次感，常用于创建具有特定边框、内边距以及立体效果的按钮、卡片等元素的样式设置场景。 */
.border_style1{
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #d3d6da;
}

/* 针对页面中的 `p` 段落元素设置样式规则，设置其上下外边距（margin）为 5 像素、左右外边距为 0，使段落之间在垂直方向上有一定的间隔，方便文本内容的阅读和区分不同段落，常用于统一页面中所有段落的基本布局样式设置。 */
p{
    margin: 5px 0;
}

/* 针对页面中的表格（table）元素设置样式规则，通过 `clear: both` 属性清除表格元素两侧的浮动影响，确保表格在文档流中的正常布局；
设置下外边距（margin-bottom）为 10 像素，使表格与下方元素有一定的间隔距离；
设置表格的边框合并方式（border-collapse）为合并（collapse），使相邻单元格的边框合并为一条，让表格外观更加简洁整齐；
设置 `word-break: break-all` 属性，当文本内容超出单元格宽度时，允许在单词内任意位置换行，避免出现文本溢出单元格的情况，常用于确保表格内文本能完整显示且布局合理的样式设置场景。 */
table{
    clear: both;
    margin-bottom: 10px;
    border-collapse: collapse;
    word-break: break-all;
}

/* 针对页面中的 `li` 列表项元素设置样式规则，通过 `clear: both` 属性清除列表项两侧的浮动影响，确保列表项在文档流中的正常布局排列，常用于有序列表（ol）、无序列表（ul）中的列表项样式设置场景，避免列表项因浮动等原因出现布局混乱的问题。 */
li{
    clear: both;
}

/* 针对页面中的有序列表（ol）元素设置样式规则，设置其左内边距（padding-left）为 40 像素，用于控制有序列表的编号与列表项内容之间的间隔距离，使列表项整体有一定的缩进效果，更加美观和易读，常用于统一页面中有序列表的基本样式设置。 */
ol{
    padding-left: 40px;
}