¡您好，YCLAS的朋友们！这周我们分享一些技巧和好点子，教您如何用CSS代码让您的网站看起来更美观。
您需要知道，网站的外观会决定用户和客户是留下来，还是转而寻找一个外观更好的网站。
首先，您需要在网站管理后台中启用CSS功能；点击此处查看如何在YCLAS中启用并添加自定义CSS.
开始吧！
背景
如今，最优秀的网站都会使用渐变背景，这是一种简单而柔和的颜色变化，如果您使用得当，网站就会呈现出现代风格，以下为您准备了3种不同的现代背景：
渐变 #1（太平洋色系）
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
渐变 #2（强烈色系）
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
渐变 #3（柔和色系）
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
字体
网站所使用的字体起着至关重要的作用，我们建议您使用无衬线字体，例如：
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
这些字体都很适合阅读，不会让眼睛疲劳。
元素边框
另一个技巧是为元素使用圆角边框，这会让您的网站看起来简洁而现代，要实现这一效果，请使用以下代码：
p.round {
border: 2px solid black;
border-radius: 8px;
}
您可以调整边框的颜色（示例中为纯黑色）和圆角半径（示例中为8px）。
导航栏
导航栏是网站最重要的元素之一。一个设计得当的导航栏，能帮助用户在您的网站上正确地导航。下面是一个吸顶式/当前高亮导航栏的示例；它会让您的导航栏根据滚动位置移动并固定在顶部：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
您可以更改颜色（背景、文字以及当前/激活链接）， 并调整导航栏的大小（内边距Padding）。
响应式图片
¡图片！如今，图片在所有网站中都是不可或缺的，我们也已经习惯了随处可见的图片；但是，仅仅把一张图片放到网站上是不够的，您还需要将该图片设置为响应式图片，才能在任何设备上都呈现出更好的效果。要实现这一点，请为您想要设为响应式的所有图片使用以下代码：
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
其中X代表图片的URL，而IMG Width和IMG Height处需要填写图片的原始尺寸。
网站布局
这部分涉及网站主要元素的布局，例如页头：页头是用户进入网站时首先看到的元素，因此它必须简单易懂。以下是一段用于带文字图片页头的CSS代码：
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
其中X代表图片的URL，Padding 处可以设置图片页头的大小，而Header Text则是您可以填写想要显示在页头图片上方的文字的地方。
网站的另一个主要元素是页脚，位于页面底部，其重要性与页头相当。您可以使用以下代码打造一个美观的页脚：
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
您可以更改页脚的颜色和大小（padding内边距）。
2026年的现代CSS：自这些技巧发布以来发生了哪些变化
上面的代码片段依然展示了基本思路，但自本文撰写以来，CSS已经有了很大的发展。如今各浏览器共享一套通用的基线功能，而您网站所使用的主题则决定了您的CSS能够作用于哪些选择器。在您将任何内容粘贴到自定义CSS之前，以下是需要了解的内容。
用Baseline检查浏览器支持情况
由W3C WebDX社区组定义的Baseline，一旦某项功能能在所有核心浏览器（桌面和移动端的Chrome、Edge、Firefox和Safari）上运行，就会将其标记为"新近可用"。30个月后，当大多数网站无需顾虑旧版浏览器就能使用该功能时，它就会变为"广泛可用"。MDN会在每个参考页面顶部显示该功能的Baseline状态。以下这些功能可以替代上文中的大部分变通方案：
| 替代方案之前 | 如今应使用 | Baseline状态（MDN） |
|---|---|---|
| 在每条规则中重复写十六进制颜色值 | CSS custom properties (variables), e.g. var(--nova-accent) | 早已成熟 |
| 手动挑选悬停状态的颜色深浅 | color-mix()，例如将强调色与18%的黑色混合 | 广泛可用（自2023年5月起所有主流浏览器均支持） |
| 使用额外的class或JavaScript来设置父元素的样式 | :has()，例如form:has(:invalid) button { opacity: .6; } | 广泛可用（自2023年12月起所有主流浏览器均支持） |
| 冗长、重复的选择器 | 使用&的CSS嵌套 | Widely available (in all major browsers since December 2023) |
| 与屏幕宽度绑定的媒体查询 | 容器查询（@container），让卡片根据其所在的列自适应调整 | 广泛可用（自2023年2月起所有主流浏览器均支持） |
浮动的菜单项（li { float: left; }） | 弹性盒布局Flexbox：display: flex; gap: 8px; | Long established |
从您的主题开始，而不是从一张空白页开始
目前的Yclas指南说明了如何在"设计 > 自定义CSS"中通过"使用自定义CSS"开关来启用自定义CSS。该指南还提醒，不同主题的class名称有所不同，因此为某个主题编写的规则，在切换主题后可能完全不起作用。像#grad或ul这样的通用选择器，要么完全不起作用，要么会重新设置您网站上所有列表的样式，因此请始终针对您主题实际使用的class（右键点击某个元素，在浏览器中选择"检查"即可找到它们）。
新的Yclas网站默认使用Nova主题，该主题基于CSS变量构建。要更改主色调，请使用主题选项中的强调色设置，而不是CSS：按钮、链接和高亮效果都会随之变化，悬停时的颜色深浅也会自动计算。对于其他调整，覆盖一个变量比重写规则更安全，因为一行代码就能改变所有使用该变量的元素：
:root {
--nova-radius: 10px; /* 让卡片和按钮更圆或更方 */
--nova-radius-sm: 6px;
}
还有两条规则能帮您避免麻烦。自定义CSS输入框只接受CSS代码，因此请省去上文某些代码片段中出现的<style>、<head>以及HTML标签。另外，保存之前请在手机和电脑上都检查一遍每项更改。
试试这些技巧，并告诉我们它们对您是否有效！
注意：使用CSS代码需要一定的技能和经验，如果您从未使用过CSS，我们建议您借助一些CSS教程和CSS指南来实现您想要的效果。如果您不想使用CSS，也可以使用我们的主题，我们提供多种可定制的网站模板，点击此处查看.
致礼，
YCLAS团队。
