Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
HTMLと同じように、コンポーネントには<style>
タグを置くことができます。<p>
要素にいくつかスタイルを追加してみましょう。
App
<p>This is a paragraph.</p>
<style>
p {
color: goldenrod;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
重要なのは、これらのスタイルがこのコンポーネントにのみ適用されるということです。次のステップで説明しますが、アプリの別の箇所の<p>
要素のスタイルに影響を与えてしまうようなことはありません。
previous next
1
2
3
4
5
6
<p>This is a paragraph.</p>
<style>
/* Write your CSS here */
</style>