许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。
在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。
我将 reset 项分为8类:
box-sizing 属性改变了 CSS 盒子模型的工作方式。它会改变计算 width、 height、 padding、 border 和 margin 的方式。
box-sizing 的默认设置是 content-box。我更喜欢将其改为 border-box,因为这样更容易设置 padding 和 width.。
有关 Box Sizing 的更多信息,你可能对“了解Box大小”感兴趣。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
浏览器对不同元素 margin 和 padding 的设置各不相同。当我不了解这些时,默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。
/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
margin: 0;
padding: 0;
}
我在很多情况下都使用无序列表,而且很多情况下都不需要 disc 样式。在这里我将 list-style 设置为 none 。当我需要 disc 样式时,会在特定的 <ul>上手动设置它。
/* Removes discs from ul */
ul {
list-style: none;
}
浏览器不会继承表单和按钮的排版。他们将 font 设置为 400 11px system-ui。我认为这是令人难以置信和奇怪的。所以我总是要手动让它们从祖先元素继承样式。
input,
textarea,
select,
button {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
不同的浏览器为表单元素和按钮设置了不同的边框样式。我很不喜欢这些默认样式,宁愿将它们设置为 1px solid gray。
input,
textarea,
button {
border: 1px solid gray;
}
我对按钮做了一些调整:
button {
border-radius: 0;
padding: 0.75em 1em;
background-color: transparent;
}
最后,我将 pointer-events: none 设置为按钮内的元素。这主要用于 JavaScript 交互。
(当用户点击按钮中的某些内容时,他们点击的内容是 event.target ,而不是按钮。如果按钮内有 HTML 元素,这种风格可以更轻松地处理 click 事件)。
button * {
pointer-events: none;
}
媒体元素包括 img、 video、 object、 iframe 和 embed。我倾向于让这些元素符合其容器的宽度。
I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element.
我还将这些元素设置为 display: block ,因为 inline-block 在元素的底部创建了不需要的空格。
embed,
iframe,
img,
object,
video {
display: block;
max-width: 100%;
}
我很少使用表格,但有时它们可能很有用。这是我的默认样式:
table {
table-layout: fixed;
width: 100%;
}
当元素具有 hidden 属性时,应该从视图中隐藏它们。 Normalize.css 已经为我们做了这件事。
[hidden] {
display: none;
}
这种风格的问题是它的特异性低。
我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性,并且 display: none 属性不起作用。
这就是为什么我选择用 !important 提高[hidden]的特异性。
[hidden] {
display: none !important;
}
如果一个组件需要 JavaScript 才能工作,我会添加一个 <noscript> 标签让用户知道(如果他们已经禁用了JavaScript)。
这样为 <noscript> 标记创建默认样式:
/* noscript styles */
noscript {
display: block;
margin-bottom: 1em;
margin-top: 1em;
}
翻译:疯狂的技术宅
原文:https://medium.freecodecamp
CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。
这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线
在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。
css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性
层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号
多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~
行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。
什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色
需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效
最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决了这个问题,这里记录一下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!