جلسه ۱۹: CSS چیست؟ در CSS

webسپتامبر 20, 2021

ایجاد قانون CSS

یک قانون CSS برای عنصر p HTML

در این مرحله ، ما زمان زیادی را صرف یادگیری نحوه ساختار محتوای صفحات وب با استفاده از HTML کرده ایم.

با این حال ، ما روش خوبی برای سفارشی کردن ظاهر و احساس محتوای خود نداریم. دقیقاً چگونه می توانیم این کار را انجام دهیم؟

یکی از راه هایی که قبلاً در درس های قبلی مورد بررسی قرار داده ایم ، استفاده از ویژگی style در یک عنصر HTML است:

<html>

<head>

<title>Using the “style” HTML attribute</title>

</head>

<body>

<p style=”color:blue;”>This text will be colored blue.</p>

<p style=”color:blue;”>This text will also be colored blue.</p>

</body>

</html>

اگر با تعداد کمی از عناصر کار کنید ، روش فوق کاملاً خوب کار خواهد کرد. اما هنگامی که با صفحات بزرگ با تعداد زیادی قطعه متحرک سر و کار دارید ، به کار بردن یک ویژگی style جداگانه برای هر عنصر به سرعت بسیار کسل کننده خواهد شد. در توسعه نرم افزار ، ما اغلب علاقه مند به کاهش تکرار هستیم. ما می توانیم با استفاده از Cascading Style Sheets یا به اختصار CSS به این مهم دست پیدا کنیم. CSS به طور خاص با طرح و سفارشی سازی عناصر HTML سروکار دارد.

ایجاد قانون CSS

بیایید نگاهی سریع بیندازیم که چگونه مثال قبلی را می گیریم و با استفاده از CSS از همان style برای عناصر p استفاده می کنیم:

<html>

<head>

<title>Using CSS to apply styles</title>

<style>

p {

color: blue;

}

</style>

</head>

<body>

<p>This element will be colored blue.</p>

<p>This element will also be colored blue.</p>

</body>

</html>

بیایید مثال بالا را از بین ببریم. پرونده های CSS شامل مجموعه ای از قوانین است که هر یک از آنها شامل یک selector (برای مشخص کردن عناصری که می خواهید تغییر دهید) و سپس یک بلوک اعلان شامل مجموعه ای از خصوصیات و مقادیر آن ویژگی ها است.

به استفاده از عنصرstyle که در head قرار دارد توجه کنید. برای مثال قرار دادن قوانین CSS با یک سند HTML می توان از style استفاده کرد ، مانند مثال بالا. اگرچه این یک روش کاملاً معتبر برای افزودن CSS به صفحات وب شما است ، اما بهتر است با قرار دادن ساختار محتوا و سبک سازی محتوا در فایل های جداگانه ، موارد را از هم جدا کنید.

بارگذاری یک فایل CSS جداگانه در یک صفحه HTML می تواند با قرار دادن یک عنصر پیوند در داخل head انجام شود ، مانند موارد زیر:

<link href="styles.css" rel="stylesheet" type="text/css">

اکنون که با معرفی سریع CSS آشنا شدید ، بیایید در درس بعدی درباره آبشار بیشتر بدانیم.

webسپتامبر 20, 2021

ایجاد قانون CSS

ایجاد قانون CSS

web

نوشته های مشابه

جلسه ۱۲: HTML چیست؟ در html

جلسه ۲۲: بهترین روش ها برای انتخاب عناصر در CSS

جلسه ۲۵: محاسبه انتخاب در CSS

جلسه ۷۰: ترکیب CSS Grid با Flexbox در CSS

دیدگاهتان را بنویسید لغو پاسخ