分类标签归档：CSS
大多数时候CSS不是您的网页加载缓慢的原因。在某些情况下，如果您的CSS文件混乱了数百个无法使用的选择器，它可以减少您的网站加载时间。以下是一些关于如何编写快速，可维护的CSS的基本指南。
看看这个例子：
#unique-id { } // fastest
.general-class { } // also fast
li { } // ok
* { } // slow
不出所料，ID选择器是最快的，其次是类。像div或li这样的简单标记元素处理得相当慢。
想象下面的CSS：...
display属性指定用于HTML元素的框的类型。它有20个可能的关键字值。常用的是：
.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.flex {display: flex}
.inline-flex {display: inline-flex}
.inline-table {display: inl...cursor属性指定将鼠标悬停在元素上时要显示的光标类型。它有36个可能的值：
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress...您可以设置任何可点击按钮的样式（HTML <button>元素）
<button>Click Me</button>
您可以更改按钮的多个属性以更改其外观。
要为按钮添加阴影，请使用box-shadow属性。
要为禁用效果的按钮添加透明度，请使用属性opacity 。
要删除边距并创建按钮组，请添加float:left/right属性。
要创建按钮组但使用边框，请使用float属性并添加border property 。
要创建一组垂直按钮，请使用display： block property 。
要更改按钮的背景颜色，请使用bac...
CSS中使用注释来解释代码块或在开发期间进行临时更改。注释的代码不会执行。
CSS中的注释语法适用于单行注释和多行注释。您可以根据需要在样式表中添加任意数量的注释。
/*
This is
a multi-line
comment
*/
/* This is a single line comment*/
.group:after {
content: "";
display: table;
clear: both;
}
通过使用CSS注释...
CSS Colors是一个CSS模块，用于处理颜色，颜色类型，颜色混合和不透明度。不是所有的CSS属性都需要作为一个值是这个模块的一部分，但它们依赖于它。在CSS中，您可以更改HTML页面中几乎任何元素的颜色。 background-color ， color和border-color等属性设置这些元素的颜色。
CSS支持颜色名称，十六进制和RGB颜色。 除了引入opacity声明之外，现在可以使用颜色名称或RGB，HEX，HSL，RGBA，HSLA值来指定CSS3中的颜色。
RGB代表“红色，绿色，蓝色”。 RGB值是红色，绿色和蓝色的强度值的组合。每个都在0（黑色）和2...
在CSS文件中使用类选择器将样式应用于具有相应类名的HTML元素。在HTML中，您可以通过添加“class”属性来设置任何元素的类名。
要选择具有特定类的元素，我们使用名为句点字符的（。）和类的名称。
例如 。center { text-align：center; red; }
这里，所有class="center" HTML元素都是红色和居中对齐的。
例子：
<h1 class="test">This is a heading 1</h1>
<p class="test">This is a paragraph...CSS断点是基于媒体查询更改网站布局的特定点变得活跃。
通常，当您想要将网站的布局重新调整为浏览器视口的大小时，请指定断点;大多数情况下，视口的宽度。
例如，如果您的网站内容在狭窄的视口上看起来很棒（例如在智能手机浏览器上），但在较大的屏幕上看起来很糟糕（例如，字体尺寸太小而且难以阅读），那么你可能想为更大的屏幕引入一个新的断点，使字体更大：
CSS断点可以被认为是响应式网页设计的核心，因为它们定义了内容的行为或排列方式 不同的设备宽度/比例，允许您向用户显示最佳布局。
断点基于以下任一方式广泛设定。
很明显，我们...
CSS :: before 选择器可用于在内容元素之前插入任何内容。它允许设计者在元素中的内容之前执行任何css设计。它通过将 :: before 附加到要使用的元素上来使用。
我们来看一些例子：
p::before {
content: "";
border: solid 5px #ccc
}
span.comment::before{
content: "Comment: ";
color: blue;
}
<p> To infinity and beyond</p...background-size属性指定背景图像的大小。您可以设置长度或百分比，第一个值是宽度，第二个值是高度。您还可以使用以下5个关键字值之一：
.auto {background-size: auto;}
.cover {background-size: cover;}
.contain {background-size: contain;}
.initial {background-size: initial;}
.inherit {background-size: inherit;}
/* Percentage and pixel can also be used */
.pixe...