【Web前端实战】网站开发第一步之CSS初始化文件

最新推荐文章于 2024-08-04 22:25:38 发布

原创

最新推荐文章于 2024-08-04 22:25:38 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

为确保HTML页面在不同浏览器间保持一致效果，开发者通常会使用CSS初始化文件（如reset.css），重置标签默认样式，减少样式差异，简化CSS代码，提升网页加载速度。在实际项目中，除了基础样式初始化，还可加入可复用的CSS样式。

考虑到不同浏览器对有些标签的默认值是不同的，在实际开发中为了确保HTML页面效果与设计图一致，减少不同浏览器之间的页面差异，我们需要初始化CSS样式的属性，使得我们开发网页内容时更加方便简洁，减少CSS代码量，节约网页下载时间。

在做一些简单的demo练习时，我们可以用最简单、直接的方法，具体如下：

*{
    padding: 0;
    margin: 0;
}

在正式的项目中可以按照如下的基础内容进行初始化（CSS初始化文件命名为reset.css，实际情况可根据团队或个人习惯命名）：

/*必有*/

html {
    font-size: 62.5%;     //简单来讲是为了在以rem为单位的时候换算方便
    overflow-x: hidden; 
}

body {
    font-size: 16px;
    font-size: 1.6rem;
    color: #232323;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

// 对文本及多文本输入框设置默认样式
input, textarea {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;

}

// 设置input属性为‘button、submit、reset、text’及button标签的默认样式
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"], button