📅  最后修改于: 2023-12-03 14:49:54.705000             🧑  作者: Mango
使用常规 HTML 无法完成的样式表可以做许多事情,以下是一些常见的示例:
<h1>
标签定义样式来改变网页中标题的外观。```css
h1 {
color: red;
font-size: 24px;
text-align: center;
}
```css
@media screen and (max-width: 768px) {
/* 在小屏幕设备上显示不同的样式 */
body {
font-size: 16px;
}
}
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeInEffect {
animation: fadeIn 1s ease-in-out;
}
@font-face
规则来引入自定义字体文件,这样可以在网页中使用特定的字体。这为设计师提供了更大的自由度,使他们能够创造独特的视觉效果。```css
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2'),
url('customfont.woff') format('woff');
}
body {
font-family: 'CustomFont', sans-serif;
}
```css
@media print {
/* 在打印时隐藏导航栏和侧边栏 */
.navbar,
.sidebar {
display: none;
}
}
```css
:root {
--primary-color: #4285f4;
}
.button {
background-color: var(--primary-color);
color: white;
padding: 8px;
}
.container {
font-size: calc(16px + 2vmin);
}
这些只是 CSS 提供的一小部分功能示例,通过使用 CSS,程序员可以实现创意和令人惊叹的网页设计效果,提高用户体验,并为用户提供更好的视觉效果。