នៅក្នុងឯកសារ Astro យើងអាចសរសេរកូដ CSS នៅក្នុងធាតុ <style> ផ្ទាល់តែម្តង ក្នុងការតុបតែងរចនាទំព័រ Astro នេះ។
<!--src/pages/index.astro-->
---
const message = "ស្វាគមន៍មកកាន់ទំព័រដើម"
---
<div>{message}</div>
<style>
div{
color: red;
}
</style>
កូដ CSS នៅក្នុងឯកសារ Astro មួយនឹងមិនអាចមានឥទ្ធិពលទៅលើធាតុទាំងឡាយនៅក្នុងឯកសារ Astro ផ្សេងទៀតបានឡើយ តែបើយើងចង់អោយកូដនោះមានឥទ្ធិពលទៅលើធាតុនៅក្នុងឯកសារផ្សេង យើងអាចប្រើ is:global នៅក្នុង <style> ។
<style is:global>
/* Unscoped, delivered as-is to the browser.
Applies to all <h1> tags on your site. */
h1 { color: red; }
</style>
បើយើងចង់អោយកូដ CSS មានឥទ្ធិពលតែទៅលើធាតុមួយចំនួននៅក្នុងឯកសារផ្សេង យើងត្រូវប្រើ :global() ។
<style>
/* Scoped to this component, only. */
h1 { color: red; }
/* Mixed: Applies to child `h1` elements only. */
article :global(h1) {
color: blue;
}
</style>
<h1>Title</h1>
<article><slot /></article>
យើងអាចផ្កួបថ្នាក់ជាច្រើនសំរាប់ធាតុណាមួយនៅក្នុងលក្ខខណ្ឌណាមួយដោយធ្វើដូចខាងក្រោមនេះ៖
---
const { isRed } = Astro.props;
---
<!-- If `isRed` is truthy, class will be "box red". -->
<!-- If `isRed` is falsy, class will be "box". -->
<div class:list={['box', { red: isRed }]}><slot /></div>
<style>
.box { border: 1px solid blue; }
.red { border-color: red; }
</style>
ការបង្កើតអថេរសំរាប់ភាសា CSS អាចត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖
---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--foregroundColor);
}
</style>
<h1>Hello</h1>
ការតុបតែងធាតណាមួយដោយផ្ទាល់ (inline styling) ត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖
// These are equivalent:
<p style={{ color: "brown", textDecoration: "underline" }}>My text</p>
<p style="color: brown; text-decoration: underline;">My text</p>
កូដសរសេរនៅក្នុងឯកសារ CSS ទុកនៅក្នុងថតណាមួយនៅក្នុងថត src អាចត្រូវនាំចូលដោយបញ្ជា import ។
---
// Astro will bundle and optimize this CSS for you automatically
// This also works for preprocessor files like .scss, .styl, etc.
import '../styles/utils.css';
---
<html><!-- Your page here --></html>
ការយកឯកសារ CSS ពីក្នុងថត public និងពីគេហទំព័រផ្សេងមកប្រើ គឺត្រូវប្រើប្រាស់ធាតុ <link> ដោយធ្វើដូចខាងក្រោមនេះ៖
<head>
<!-- Local: /public/styles/global.css -->
<link rel="stylesheet" href="/styles/global.css" />
<!-- External -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism-tomorrow.css" />
</head>
បើសិនជាមានកូដ CSS ជាន់គ្នា កូដដែលមានអាទិភាពជាងគេគឺកូដនៅក្នុងឯកសារ Astro បន្ទាប់មកគឺកូដដែលត្រូវនាំចូលដោយបញ្ជា import ចុងក្រោយគេបង្អស់គឺកូដដែលត្រូវយកមកប្រើតាមរយៈធាតុ <link> ៕
