首页 > 其他分享 >【转】CSS重置文档/reset.css

【转】CSS重置文档/reset.css

时间:2023-10-28 20:15:29浏览次数:36  
标签:reset 样式 重置 文档 css go CSS

前言

reset.css文档就是一个普通的层叠样式表文档,就是css文档,一个网站一般会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式);公共样式 (common.css)(一系列页面共用共享的样式,如:头部底部样式);独立样式(每个页面单独使用的样式,如index.css)。
在这里具体讲得就是重置样式,其他两种样式就是因项目而定的没有太多的规定设定可讲。

回到顶部(go to top)

目录

回到顶部(go to top)

为什么要用reset.css

因为在不同的浏览器中,HTML标签会有一些默认的属性值,但是各个浏览器会渲染出各不一样的效果,例如边距不一致、字体颜色大小行高不一样等等。为了防止出现这种情况,其实主要是为了减少代码的重复定义,提高代码复用率,提高开发效率,重设各个浏览器的默认样式,还可以解决其引起的耦合问题。
总结就是高复用,低耦合,文件小。

回到顶部(go to top)

怎么用

独立新建一个css文档来储存重置样式,就是reset.css里面只存放重置样式,其他样式可以根据前言分类分开存放css属性。这里有一个是本人参考了各大网站的reset.css整理写的reset.css,文档没有绝对标准性的,很多都是根据项目的具体需求写,我总结的只是一些非常常用的重置样式,可以适用大部分项目,当然最好是理解了,每次自己根据项目需求对reset.css进行编写。

回到顶部(go to top)

reset.css说明

@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素,这个根据实际情况决定要不要*/
a{
    text-decoration:none;
    display:block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素,默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
    border:0;
    display:block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
复制代码
回到顶部(go to top)

总结

为了更规范,为了更好的与人合作,就有了reset.css文档。这个文档最好最好在项目的开始就要先写好。如果问这个文档是不是必须的,我可以说不是,你自己在一个样式表内看到哪个属性就写哪个属性先也行,但是写了这个文档可以帮助你节省时间,可以让你的代码更优秀。谢谢!

标签:reset,样式,重置,文档,css,go,CSS
From: https://www.cnblogs.com/chinasoft/p/17794521.html

相关文章

  • css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex
    <divclass="product"><Popoverplacement="right"><template#content><divclass="w-[200px]h-[200px]"><img:src=&......
  • 用html 加css 绘制表格
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*头部样式定义*/.header{padding-bottom:10px;/*设置头部的下内边距*/......
  • css--重绘和回流
    重绘(paint) :当rendertree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不影响布局的,比如background-color,则称为重绘。回流(layout):当rendertree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。当页面布局和几何属......
  • css 居中
    absolute绝对定位来居中先让元素左上角居中top:50%;left:50%;再根据容器的大小来设置外边距偏移量width:800px;height:500px;margin-left:-400px;margin-top:-250px;拓展:过渡玩法:background-size:cover;background-size:100%100%;......
  • ruby实战手册(14)-css(1)
    目录linkimportlink<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>learnjs</title><basehref="/"><linkhref="styles/style.css"typ......
  • 2023-10-26 hexo部署到GitHub时css样式不生效 ==》 css文件链接被识别为不安全链接,导
    hexod一键部署后查看效果发现博客页面的样式全丢失了,查看控制台发现了端倪:MixedContent:Thepageat'https://xxx.github.io/'wasloadedoverHTTPS,butrequestedaninsecurestylesheet'http://xxx.com/lib/font-awesome/css/font-awesome.min.css?v=4.6.2'.Thisre......
  • 主题 CSS 魔改版
    (Markdown格式贴近Typora的显示样式).blogpost-bodyblockquote{background-image:none;border-left:5pxsolid#e2dfdf;border-right:none;border-top:none;border-bottom:none;margin:10px0px;padding:8px15px;padding-top......
  • vite中使用scss导出变量到js/ts中作为变量使用
    定义scss定义一个scss文件,注意,这里的文件名要以module.scss结尾,不然会出现读写错误的问题。$background-color_hover:#e4e8ec;$background-color_chosed:#f44343;:export{bgc_hover:$background-color_hover;bgc_chosed:$background-color_chosed;}.modu......
  • 将CSS中的cellpadding和cellspacing设置为?
    内容来自DOChttps://q.houxu6.top/?s=将CSS中的cellpadding和cellspacing设置为?在HTML表格中,可以使用CSS设置cellpadding和cellspacing属性,如下所示:<style>table{cellspacing:1;cellpadding:1;}</style><table></table>这样就可以使用CS......
  • css 内容只显示前5个字符
    使用CSS的text-overflow属性。.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:5em;}先将white-space属性设置为nowrap,这样可以防止文本换行。然后将overflow属性设置为hidden,以便隐藏超过部分的文本......