分类目录归档：CSS
CSS ID选择器将样式应用于特定的html元素。 CSS ID选择器必须与HTML元素的ID属性匹配。 与可以应用于整个站点中的多个元素的类不同，特定ID可以仅应用于站点上的单个元素。 CSS ID将覆盖CSS类属性。 要选择具有特定id的元素，请写入散列（＃）字符，后跟元素的id。
#specified_id { /* styles */ }
您可以将ID选择器与其他类型的选择器组合以设置非常特定的元素。
section#about:hover { color: blue; }
div.classname#specified_id { color: green; }
CSS :hover选择器是用于设置元素样式的许多伪类之一。
：鼠标悬停选择器用于在鼠标悬停时选择元素。
：hover选择器可用于所有元素，而不仅仅用于链接。
使用：link选择器设置指向未访问页面的链接的样式，使用：visited选择器设置指向已访问页面的链接的样式，使用：active选择器设置活动链接的样式。
注意：hover必须在CSS定义中跟随：link和：visited（如果它们存在），以便有效！
CSS语法 ：悬停{ css声明; }
悬停选择器仅在元素进入悬停状态时应用规则中提供的样式。 那是用户用鼠标悬停在元素上的时候。
button {
color: white;
...程序员可以使用height和width属性来更改特定元素的高度和宽度。为了更改其尺寸，必须将这些元素的display属性值设置为block或inline-block 。
height: auto|length|initial|inherit;min-height: length|initial|inherit;max-height: none|length|initial|inherit;width: auto|value|initial|inherit;min-width: length|initial|inherit;max-width: ...CSS字体属性定义文本的字体系列，重量，大小，变体，行高和样式。
只需使用font-family属性设置文本的font-family 。
它适用于_后备_系统，如果您的浏览器不支持第一个字体，它会尝试使用下一个字体，依此类推。如果字体的名称不止一个单词，则必须用引号括起来。
p {
font-family: "Times New Roman", Times, serif;
}
在上面的例子中，“Times New Roman”是字体，而“serif”是 。通用名称用作后备 如果姓氏不可用，则保留样式的机制。通用名称应始终是字体系列名称列表中的最后一项。...
下拉列表在CSS中用于隐藏按钮内的预定义列表。
例子：
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdownContent">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#"...如果您希望您的应用或网页更具动态性和美观，则使用CSS3 过渡非常有用。
实际上，转换允许您以 平滑的 方式更改属性（ width ， color ，...）值。
transition属性是transition-property ， transition-duration ， transition-timing-function ， transition-delay的简写属性，语法如下：
transition: transition-property transition-duration transition-timing-function transition-delay
例如 ：...
媒体查询允许您针对不同的设备/屏幕尺寸使用不同的样式。他们在CSS3中的介绍大大缓解了这一建设 响应式网页。
设计响应式网站时的最佳方法是先考虑移动设备;意味着您从设计和内容开始创建页面 移动版本。您可能认为使用某些可扩展的大小（％，vw或vh），您的页面将完全适应任何设备。但事实并非如此。也许 对于一些非常基本的设计，但肯定不适用于更常见或复杂的页面！
在为较小的设备设计页面时，您将专注于主要内容。在更大的屏幕上，你必须重新设置一些字体大小，边距， 填充等等，以保持您的网站舒适和可读，但你也想要/需要添加更多的内容，你没有判断的内容 基本的，并填写由屏幕大小创建的空间。
思考过程应该是...
CSS Grid Layout是CSS中最强大的布局系统。 它是一个二维系统，意味着它可以处理列和行，不像flexbox主要是一维系统。 虽然并非所有浏览器都完全支持网格布局，但它是制作页面布局的最先进和最方便的方法。
在你的container內加入 display: grid
<div class="container">
<!-- 你的內容 -->
</div>.container {
display: grid;
}<div class="container">
<di...CSS3渐变可让您在两种或多种指定颜色之间显示平滑过渡。
之前，您必须使用图像来实现这些效果。但是，通过使用CSS3渐变，您可以减少下载时间和带宽使用。此外，渐变元素在缩放时看起来更好，因为渐变是由浏览器生成的。
CSS3定义了两种类型的渐变：
要创建线性渐变，您必须至少定义两个色标。颜色停止是您想要渲染平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
background: linear-gradient(direction, color-stop1, color-stop2...