Skip to main content
Svelte基础
介绍
响应
属性Props
逻辑表达式
事件
绑定
Classes和样式
动作Actions
转场
Svelte高阶
响应式进阶
内容复用
动画
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

跟使用HTML一样嘞,你也管在组件里使用<style>标签. 啥?你没见过<style>标签?!亲,你需要先学点CSS,不是CS。 来给<p>添加上样式:

Just like in HTML, you can add a <style> tag to your component. Let’s add some styles to the <p> element:

App
<p>This is a paragraph.</p>

<style>
	p {
		color: goldenrod;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

另外添加的CSS样式 只对当前组件 有效,这样你就不用担心影响其它组件中的<p>元素样式了。下个练习我们验证下。

Importantly, these rules are scoped to the component. You won’t accidentally change the style of <p> elements elsewhere in your app, as we’ll see in the next step.

Edit this page on GitHub

<p>This is a paragraph.</p>

<style>
/* Write your CSS here */
</style>

loading Svelte compiler...
loading svelte compiler