Styling einer Komponente im Vue-Framework
Um Komponenten zu stylen, muss im Komponentenfile
das Tag
style
geschrieben werden:
<script>
</script>
<template>
</template>
<style>
</style>
In diesem Tag kann CSS-Code geschrieben werden, wobei dieser nur auf den HTML-Code der Komponente angewendet wird und nicht nach außen wirkt. Dies ist speziell für den Komfort so implementiert.
Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben einige Absätze:
<template>
<p>
1
</p>
<p>
2
</p>
</template>
Lassen Sie uns diese rot einfärben:
<style>
p {
color: red;
}
</style>
Stylen Sie die Tags Ihrer Komponente.
