CSS初始化样式表【PC端】

Dteamdoat

于 2023-04-14 08:35:45 发布

阅读量166

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Dteamdoat/article/details/130144752

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这段代码主要展示了如何使用CSS清除HTML元素的默认内外边距，去除外轮廓，设置默认字体和颜色，以及重置列表、表格、文本和表单元素的样式。此外，还包括了对不同浏览器兼容性的处理，如IE6的边框处理和全角逗号的使用，以及链接悬停时的颜色变化。

摘要由CSDN通过智能技术生成

/* 清除内外边距 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

input {
    /*去除外轮廓*/
    outline: none;
}

img {
    /*去除行内元素换行符问题*/
    display: block;
}

/* 取消字体默认加粗效果 */
/* 将斜体扶正 */
b,strong {
    font-weight: normal;
}

/* 取消字体倾斜 */
address,cite,dfn,em,var,i
{
    font-style: normal;
}

/* 重置列表元素 */
ul,ol {
    list-style: none;
}

/* 取消外边框 */
/* for ie6 */
fieldset,img {
    border: none;
}

/* 重置表格元素 */
table {
    /* 合并单元格边框 */
    border-collapse: collapse;
    /* 单元格与单元格之间的距离 */
    border-spacing: 0;
}

/* 重置文本格式元素 */
a {
    text-decoration: none;
    color: #666;
}


/* 设置默认字体 */
body,button,input,select,textarea {
    /* for ie */
    font: 12px/1.3 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    /* 用 Unicode 字符表示，使得在任何编码下都无问题 */
    color: #333;
}


h1 {
    font-size: 18px;
    /* 18px / 12px = 1.5 */
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

h4,
h5,
h6 {
    font-size: 100%;
}


/* 将粗体扶细 */
code,
kbd,
pre,
samp,
tt {
    font-family: "Courier New", Courier, monospace;
}

/* 统一等宽字体 */
small {
    font-size: 12px;
}

/* 小于 12px 的中文很难阅读，让 small 正常化 */


/* 重置表单元素 */
legend {
    color: #000;
}

button,input,select,textarea {
    font-size: 100%;
    /* 使得表单元素在 ie 下能继承字体大小 */
}


/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html {
    overflow-y: scroll;
}

a:link:hover {
    color: lightgreen !important;
    text-decoration: underline;
}