1. David Wu首页
  2. web前端
  3. CSS

网站CSS样式进行一些基本重新设计,让样式更好看

我考虑并喜欢非常无聊的CSS东西,说实话,这可能比我应该做的要多得多。这些年来,我可能花了太多时间思考的一件事是CSS重置。 在这个现代的Web开发时代,我们真的不需要繁琐的重置,甚至根本不需要重置,因为与旧版IE 6天相比,CSS浏览器兼容性问题的可能性要小得多。那个时代就是诸如normalize.css之 WP网站建设

我考虑并喜欢非常无聊的CSS东西,说实话,这可能比我应该做的要多得多。这些年来,我可能花了太多时间思考的一件事是CSS重置。

在这个现代的Web开发时代,我们真的不需要繁琐的重置,甚至根本不需要重置,因为与旧版IE 6天相比,CSS浏览器兼容性问题的可能性要小得多。那个时代就是诸如normalize.css之类的重置出现并为我们节省了所有的麻烦。那些日子已经过去了,我们可以相信我们的浏览器的行为更多,所以我认为像这样的重置可能大部分都是多余的。

重置默认默认

我仍然喜欢重新设置内容,因此多年来,我一直以沉迷于代码高尔夫的方式缓慢而不断地修补自己。我将解释其中的内容以及原因,但在此之前,这里是全部内容:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don\'t have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

分解固定链接

我们从盒子大小开始。我只是将所有元素和伪元素重置为使用box-sizing: border-box

*,
*::before,
*::after {
  box-sizing: border-box;
}

有人认为伪元素应按inherit大小调整大小,但我认为这很愚蠢。如果要使用不同的框大小值,请明确设置它-至少无论如何我要这样做。我在CSS From Scratch上写了更多关于框大小的文章。

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

调整大小后,我对margin和进行了全面重置,并padding根据浏览器的样式进行设置。这一切都是不言自明的,因此我不会过多地讨论它。

在列表中提及这种情况。我只选择确实具有class属性的列表,因为如果使用纯文本<ul><ol>使用它,我希望它看起来像一个列表。许多重设,包括我以前的重设,都积极删除了。

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

接下来:身体样式。我真的很简单。<body>即使将其填充为空白,这对于填充视口也是很有用的,因此我可以将设置min-height100vh。我也喜欢平滑的锚点滚动,所以我也进行了设置scroll-behavior: smooth

我只设置了两种文字样式。之所以将设置为line-height,是1.5因为默认值1.2不足以容纳可访问的可读文本。我也设定text-renderingoptimizeSpeed。使用optimizeLegibility可以使您的文本看起来更好,但可能会遇到严重的性能问题,例如30秒的加载延迟,所以现在尝试避免这种情况。我有时确实将其添加到显微部分。

ul[class],
ol[class] {
  list-style: none;
}

就像边距和填充规则一样,我仅list-style在列表元素具有class属性的地方重置。

a:not([class]) {
  text-decoration-skip-ink: auto;
}

对于没有类属性的链接,我设置为text-decoration-skip-ink: auto使下划线以更易读的方式呈现。这可以在全局链接上设置,但过去对我造成了一两个冲突,因此我将其保持为这种状态。

img {
  max-width: 100%;
  display: block;
}

好的ol’流畅的图像样式紧随其后。我将图像设置为块元素,因为坦率地说,对于在底部出现的怪异缺口来说,寿命太短了,而实际上,图像(尤其是我所做的工作)往往表现得像块。

article > * + * {
  margin-top: 1em;
}

真的很喜欢这个CSS技巧,终于勇敢地将其添加到重置中。镂空猫头鹰选择器针对商品的直接后代,并1em为它们增加了上边距。这给流动内容提供了坚实的节奏。实际上,我.flow现在在每个项目中都使用了实用程序。您可以在24 Ways上阅读有关它的更多信息。实际上,我认为这是我最近使用最多的CSS。

input,
button,
textarea,
select {
  font: inherit;
}

我终于足够勇敢地将其设置为默认值的另一件事是font: inherit在输入元素上,它是速记功能,完全可以满足锡盒上的要求。不再有微小的文本(在某些情况下为单声道)!

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

最后,绝不是最不重要的是@media,如果用户喜欢减少运动量,则可以通过单个查询来重置动画,过渡和滚动行为。我喜欢在复位时使用特异性胜过 !important选择器,因为现在很可能,如果用户不希望运动,则不管跟随此复位的CSS是什么,他们都不会得到。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12065

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注