یک استایل در CSS شامل یک انتخاب کننده و بلاکی است که اعلان در آن قرار می گیرد. مرورگر استایل هایی را که شما ایجاد کرده اید بر روی متون، تصاویر، هدینگ ها و دیگر عناصر صفحه اعمال می کند.
همانطور که بیان شد سی اس اس ها شامل یک یا چند انتخاب کننده (selector) و بلاک (block) هستند و بلاک نیز شامل اعلان ها (declarations) است که با semicolons از هم جدا می شوند. هر اعلان به صورت ساختار نام: مقدار نوشته می شود.
کد زیر را ببینید:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
<style>
p /*انتخاب کننده یا selector*/
{ /*شروع بلاک*/
color: red; /*اعلان*/
text-align: center; /*اعلان*/
}/*انتهای بلاک*/
</style>
</head>
<body>
<h1>My Web Page</h1>
<p>My Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = `webbookies`;
</script>
</body>
</html>اگر عناصری در صفحه وجود داشته باشند که دارای استایل یکسانی باشند، بهتر است برای صرفه جویی در نوشتن کد و خواناتر شدن کد، از selector های گروهی استفاده کنیم.
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
<style>
p, h1 /*انتخاب کننده یا selector*/
{ /*شروع بلاک*/
color: red; /*اعلان*/
text-align: center; /*اعلان*/
}/*انتهای بلاک*/
</style>
</head>
<body>
<h1>My Web Page</h1>
<p>My Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = `webbookies`;
</script>
</body>
</html>
ديدگاه كاربران
دیدگاهی وجود ندارد