آموزش CSS مبتدی : شروع کار با CSS
در این مقاله، شما را با نحوهی اعمال CSS بر روی یک سند HTML ساده آشنا میکنیم و در طول مسیر، برخی از جزئیات عملی این زبان را نیز فرا خواهید گرفت. همچنین برخی از ویژگیهای اضافی سینتکس CSS را که هنوز به آنها توجه نکردهاید، بررسی خواهیم کرد.
نقطه شروع ما یک سند HTML است. اگر میخواهید روی رایانه خودتان کار کنید، میتوانید کد زیر را کپی کنید. کد زیر را با نام index.html در پوشهای روی رایانه خود ذخیره کنید.
اگر این مطلب را در دستگاه یا محیطی میخوانید که نمیتوانید به راحتی فایل ایجاد کنید، نگران نباشید — روی دکمه «تست کد
» بالا کلیک کنید و کد را در محیط تست، کپی کنید. در آنجا، میتوانید کد CSS و HTML را طبق دستورالعملهای بعدی ویرایش کنید و نتایج ترکیبی را به صورت زنده مشاهده کنید.
اولین کاری که باید انجام دهیم این است که به سند HTML بگوییم که میخواهیم از برخی قوانین CSS استفاده کند. سه روش مختلف برای اعمال CSS به یک سند HTML وجود دارد که معمولاً با آنها مواجه میشوید - شیوهنامههای خارجی، شیوهنامههای داخلی و شیوهنامههای درونخطی. اکنون به بررسی آنها میپردازیم.
اگر این مقاله را با استفاده از محیط تست مطالعه میکنید، نمیتوانید مراحل ذکر شده در این بخش را مانند افرادی که کد را روی رایانههای محلی خود مینویسند، دنبال کنید. دلیل این امر این است که محیط تست اضافه کردن CSS به HTML را به طور ضمنی در پسزمینه انجام میدهد. با این حال، همچنان باید این بخش را بخوانید تا از محتوا آگاه باشید.
یک فایل استایل خارجی شامل CSS در یک فایل جداگانه با پسوند است. این رایجترین و مفیدترین روش برای اضافه کردن CSS به یک سند است. میتوانید یک فایل CSS را به چندین صفحه وب پیوند دهید و همه آنها را با یک استایلشیت CSS یکسان استایلبندی کنید.
یک فایل در همان پوشه سند HTML خود ایجاد کنید و آن را با نام styles.css ذخیره کنید.
برای پیوند دادن styles.css به index.html، خط زیر را در جایی درون سند HTML اضافه کنید:
این عنصر با استفاده از ویژگی rel و مکان آن شیوهنامه به عنوان مقدار ویژگی href به مرورگر میگوید که ما یک شیوهنامه داریم. میتوانید با اضافه کردن یک قانون به styles.css، عملکرد CSS را آزمایش کنید. با استفاده از ویرایشگر کد خود، موارد زیر را به فایل CSS خود اضافه کنید:
فایلهای HTML و CSS خود را ذخیره کنید و صفحه را در مرورگر وب مجدداً بارگذاری کنید. عنوان سطح یک در بالای سند اکنون باید قرمز باشد. اگر این اتفاق افتاد، تبریک میگوییم - شما با موفقیت مقداری CSS را به یک سند HTML اعمال کردهاید. اگر این اتفاق نیفتاد، با دقت بررسی کنید که همه چیز را به درستی تایپ کردهاید.
قرار دادن استایلشیتها در مکانهای مختلف
در مثال بالا، فایل CSS در همان پوشهای است که سند HTML در آن قرار دارد، اما میتوانید آن را در جای دیگری قرار دهید و مسیر را تنظیم کنید (مانند تصاویر HTML). در اینجا سه مثال آورده شده است:
استایلشیتهای داخلی درون عناصر قرار میگیرند که درون HTML قرار میگیرند. بیایید اکنون یکی ایجاد کنیم.
در سند HTML خود، قطعه کد زیر را جایی بین تگهای و اضافه کنید:
ذخیره و رفرش کنید، و باید ببینید که تمام پاراگرافهای شما بنفش میشوند.
در برخی شرایط، استایلشیتهای داخلی میتوانند مفید باشند. به عنوان مثال، شاید شما با یک سیستم مدیریت محتوا کار میکنید که در آن از تغییر فایلهای CSS خارجی منع شدهاید.
با این حال، برای سایتهایی با بیش از یک صفحه، استایلشیتهای داخلی نسبت به استایلشیتهای خارجی کارایی کمتری دارند. برای اعمال سبکبندی CSS یکنواخت به چندین صفحه با استفاده از استایلشیتهای داخلی، باید استایلشیتهای داخلی را در هر صفحه وب تکرار کنید. این کاهش کارایی به نگهداری سایت نیز منتقل میشود. با CSS در استایلشیتهای داخلی، این خطر وجود دارد که حتی یک تغییر ساده در سبکبندی نیاز به ویرایش در چندین صفحه وب داشته باشد.
قبل از ادامه، عنصر و محتوای آن را از HTML نمونه خود حذف کنید./documents/html
استایلهای درونخطی، اعلانهای CSS هستند که بر یک عنصر HTML واحد که درون یک ویژگی style قرار دارد، تأثیر میگذارند. بیایید اکنون پیادهسازی یکی از آنها را امتحان کنیم.
یک ویژگی style به عنصر در HTML خود اضافه کنید، به طوری که مانند زیر به نظر برسد:
ذخیره و رفرش کنید، و باید ببینید که فقط متن داخل بنفش و پررنگ میشود. سعی کنید چند تعریف دیگر داخل ویژگی style خود اضافه کنید (که با نقطه ویرگول از هم جدا شدهاند) یا چند ویژگی style اضافی به عناصر دیگر اضافه کنید.
پس از اتمام آزمایش، تمام ویژگیهای style خود را حذف کنید.
در صورت امکان از استفاده از CSS به این روش خودداری کنید. این یک روش بد است. اولاً، این کماثرترین پیادهسازی CSS برای نگهداری است. یک تغییر استایل ممکن است نیاز به چندین ویرایش در یک صفحه وب داشته باشد. ثانیاً، CSS درونخطی همچنین کد نمایشی (CSS) را با HTML و محتوا مخلوط میکند و خواندن و درک همه چیز را دشوارتر میکند. جداسازی کد و محتوا، نگهداری را برای همه کسانی که در وبسایت کار میکنند آسانتر میکند.
اگر محیط کاری شما بسیار محدودکننده است، ممکن است مجبور شوید به استفاده از استایلهای درونخطی متوسل شوید. به عنوان مثال، شاید CMS شما فقط به شما اجازه ویرایش بدنه HTML را بدهد. همچنین ممکن است استایلهای درونخطی زیادی را در ایمیل HTML ببینید تا با حداکثر تعداد کلاینتهای ایمیل سازگار شوید. همچنین تنظیم استایلهای درونخطی هنگام اعمال استایل به صورت پویا با استفاده از جاوا اسکریپت نسبتاً رایج است.
استفاده از انتخابگرهای رایج
در این بخش، نگاهی مختصر به برخی از انواع رایجتر انتخابگرهایی که با آنها مواجه خواهید شد، خواهیم داشت.
با قرمز کردن عنوان، ما قبلاً نشان دادهایم که میتوانیم یک عنصر HTML را هدف قرار داده و به آن استایل بدهیم. ما این کار را با هدف قرار دادن یک انتخابگر عنصر (که به عنوان انتخابگر نوع نیز شناخته میشود) انجام میدهیم - این انتخابگری است که مستقیماً با نام یک عنصر HTML مطابقت دارد. برای هدف قرار دادن همه پاراگرافهای موجود در سند، از انتخابگر p استفاده میکنید. برای سبز کردن همه پاراگرافها، از این روش استفاده میکنید:
شما میتوانید با جدا کردن انتخابگرها با کاما، چندین انتخابگر را همزمان هدف قرار دهید. اگر میخواستید همه پاراگرافها و همه آیتمهای لیست سبز باشند، قانون شما به این شکل خواهد بود:
تا اینجا، ما عناصر را بر اساس نام عناصر HTML آنها استایلبندی کردهایم. این روش تا زمانی که بخواهید همه عناصر از آن نوع در سند شما یکسان به نظر برسند، کار میکند. برای انتخاب زیرمجموعهای از عناصر بدون تغییر بقیه، میتوانید یک کلاس به عنصر HTML خود اضافه کنید و آن کلاس را در CSS خود هدف قرار دهید.
- در سند HTML خود، یک ویژگی کلاس به دومین آیتم لیست اضافه کنید. لیست شما اکنون به شکل زیر خواهد بود:
- در CSS خود، میتوانید با ایجاد یک انتخابگر که با نقطه شروع میشود، کلاس special را هدف قرار دهید. موارد زیر را به فایل CSS خود اضافه کنید:
- ذخیره کنید و رفرش کنید تا نتیجه را ببینید.
اکنون میتوانید کلاس special را به عناصر دیگر صفحه خود که میخواهید ظاهری مشابه این آیتم لیست داشته باشند، اعمال کنید. یک کلاس special به داخل پاراگراف اضافه کنید، سپس صفحه خود را مجدداً بارگذاری کنید: اکنون باید نارنجی و پررنگ باشد.
استایلدهی به چیزها بر اساس موقعیت آنها در سند
مواقعی وجود دارد که میخواهید چیزی بسته به محل قرارگیریاش در سند، ظاهر متفاوتی داشته باشد. در اینجا تعدادی انتخابگر وجود دارد که میتوانند به شما کمک کنند، اما فعلاً فقط به چند مورد از آنها میپردازیم. در سند ما، دو عنصر وجود دارد - یکی درون یک پاراگراف و دیگری درون یک آیتم لیست. برای انتخاب فقط یک که درون یک عنصر قرار دارد، میتوانید از انتخابگری به نام ترکیبکنندهی فرزند استفاده کنید که به شکل فاصله بین دو انتخابگر دیگر است.
قانون زیر را به فایل استایل خود اضافه کنید:
این انتخابگر هر عنصر که از نسل باشد را انتخاب میکند. بنابراین در سند مثال شما، باید متوجه شوید که در سومین آیتم لیست اکنون بنفش است، اما عنصر داخل پاراگراف بدون تغییر باقی مانده است.
چیز دیگری که ممکن است دوست داشته باشید امتحان کنید، استایلبندی یک پاراگراف است وقتی که مستقیماً بعد از یک عنوان در همان سطح سلسله مراتب در HTML میآید. برای انجام این کار، یک + (یک ترکیبکننده خواهر و برادر بعدی) بین انتخابگرها قرار دهید.
سعی کنید این قانون را نیز به صفحه سبک خود اضافه کنید:
سعی کنید قانونی اضافه کنید تا اگر span داخل یک پاراگراف است، آن را قرمز کند. خواهید فهمید که درست حدس زدهاید یا نه، زیرا span موجود در پاراگراف اول قرمز خواهد بود، اما span موجود در اولین آیتم لیست تغییر رنگ نخواهد داد.
همانطور که میبینید، CSS روشهای مختلفی برای هدفگیری عناصر در اختیار ما قرار میدهد و ما تاکنون فقط به بخش کوچکی از آن پرداختهایم! در ادامهی این دوره، نگاهی دقیق به همهی این انتخابگرها و بسیاری دیگر خواهیم داشت.
استایلدهی به چیزها بر اساس حالت (state)
آخرین نوع استایلبندی که در این آموزش به آن خواهیم پرداخت، قابلیت استایلدهی به چیزها بر اساس وضعیت آنها است. یک مثال ساده از این مورد، استایلدهی به لینکها است. وقتی به یک لینک استایل میدهیم، باید عنصر (لنگر) را هدف قرار دهیم. این عنصر بسته به اینکه بازدید نشده، بازدید شده، در حال حرکت موس روی آن است، از طریق صفحه کلید فوکوس شده یا در حال کلیک (فعال شدن) است، حالتهای مختلفی دارد. میتوانید از CSS برای هدف قرار دادن این حالتهای مختلف استفاده کنید - CSS زیر لینکهای بازدید نشده را صورتی و لینکهای بازدید شده را سبز استایل میدهد.
شما میتوانید نحوه نمایش لینک را وقتی کاربر موس را روی آن نگه میدارد تغییر دهید، برای مثال با حذف زیرخط، که با قانون بعدی محقق میشود:
در مثال زیر، میتوانید با مقادیر مختلف برای حالتهای مختلف یک لینک بازی کنید. ما قوانین بالا را به آن اضافه کردهایم و حالا متوجه شدهایم که رنگ صورتی کاملاً روشن و خواندن آن دشوار است - چرا آن را به رنگ بهتری تغییر نمیدهید؟ آیا میتوانید لینکها را پررنگ کنید؟
ما خط زیرین لینک خود را در حالت شناور حذف کردهایم. شما میتوانید خط زیرین را از تمام حالتهای یک لینک حذف کنید. با این حال، لازم به یادآوری است که در یک سایت واقعی، میخواهید مطمئن شوید که بازدیدکنندگان میدانند که یک لینک، یک لینک است. باقی گذاشتن خط زیرین میتواند سرنخ مهمی برای افراد باشد تا متوجه شوند که میتوان روی برخی از متنهای داخل یک پاراگراف کلیک کرد - این رفتاری است که آنها به آن عادت دارند. مانند هر چیز دیگری در CSS، این پتانسیل وجود دارد که با تغییرات شما، سند کمتر قابل دسترسی باشد - ما قصد داریم مشکلات احتمالی را در مکانهای مناسب برجسته کنیم.
شما اغلب در این درسها و در سراسر PDN به دسترسیپذیری اشاره خواهید کرد. وقتی در مورد دسترسیپذیری صحبت میکنیم، منظورمان این است که صفحات وب ما باید برای همه قابل فهم و استفاده باشند، 'چه از رایانهای با ماوس یا ترکپد، چه از تلفنی با صفحه لمسی، چه از کیبورد برای پیمایش استفاده کنند، یا از طریق یک صفحهخوان که محتوای سند را میخواند.
ترکیب انتخابگرها و ترکیبکنندهها
شایان ذکر است که میتوانید چندین انتخابگر و ترکیبکننده را با هم ترکیب کنید. برای مثال:
همچنین میتوانید چندین نوع را با هم ترکیب کنید. موارد زیر را به کد خود اضافه کنید:
این به هر عنصری که کلاس special داشته باشد، استایل میدهد، که درون یک قرار دارد که درست بعد از یک میآید. خب! این باید عنصر را در کد شما هدف قرار دهد.
اگر در حال حاضر پیچیده به نظر میرسد نگران نباشید - به زودی با نوشتن CSS بیشتر، بر آن مسلط خواهید شد.
سایر ویژگیهای سینتکس CSS
حالا که با چند ویژگی CSS کار کردهایم، یک بررسی سطح بالا از برخی دیگر از ویژگیهای سینتکس CSS که در طول دوره با آنها مواجه خواهید شد، ارائه خواهیم داد. اگر میخواهید جزئیات بیشتری در مورد هر یک از این موارد پیدا کنید، میتوانید نام ویژگی را در فیلد جستجو در بالای این صفحه تایپ کنید یا به مرجع CSS مراجعه کنید.
برای آزمایش قطعه کدها در هر مورد، میتوانید HTML و CSS ارائه شده را به مثال محلی یا نمونه Playground که در بالا روی آن کار کردهاید، اضافه کنید.
در حالی که اکثر مقادیر، کلمات کلیدی یا مقادیر عددی نسبتاً سادهای هستند، برخی مقادیر وجود دارند که شکل یک تابع را به خود میگیرند.
یک مثال میتواند تابع باشد که میتواند محاسبات ساده را در CSS انجام دهد:
یک تابع شامل نام تابع و پرانتزهایی برای محصور کردن مقادیر تابع است. در مورد مثال در بالا، مقادیر، عرض این کادر را ۹۰٪ از عرض بلوک حاوی آن، منهای ۳۰ پیکسل، تعریف میکنند.
مثال دیگر میتواند مقادیر مختلف برای ویژگی transform باشد، مانند
مقادیر مختلف ویژگیهای ذکر شده در زیر را جستجو کنید. سعی کنید با استفاده از توابع زیر، قوانین CSS بنویسید که سبکبندی را به عناصر مختلف HTML اعمال میکنند:
- تبدیل (transform)
- تصویر پسزمینه (background-image) ، به ویژه مقادیر گرادیان
- رنگ (color) ، به ویژه مقادیر rgb و hsl
در CSS (که به صورت "at-rules" تلفظ میشود) دستورالعملهایی برای نحوه رفتار CSS ارائه میدهد. یکی از های رایج که احتمالاً با آن مواجه میشوید، است که برای ایجاد کوئریهای رسانهای استفاده میشود. کوئریهای رسانهای از منطق شرطی برای اعمال استایل CSS استفاده میکنند.
در مثال زیر، stylesheet یک پسزمینه صورتی پیشفرض برای عنصر تعریف میکند. با این حال، یک کوئری رسانهای در ادامه میآید که اگر عرض نمای مرورگر از 30em بیشتر باشد، یک پسزمینه آبی روی عنصر تنظیم میکند.
برخی از ویژگیها مانند font، background، padding، border و margin، ویژگیهای مختصرنویسی نامیده میشوند. دلیل این امر این است که ویژگیهای مختصرنویسی چندین مقدار را در یک خط واحد تنظیم میکنند.
برای مثال، این یک خط کد:
معادل این چهار خط کد است:
بعداً در طول دوره، با مثالهای بسیار دیگری از ویژگیهای مختصرنویسی مواجه خواهید شد. فعلاً، سعی کنید از تعریفهای بالا (یا موارد دیگری که ممکن است در مورد آنها بدانید) در کد خودتان استفاده کنید تا با نحوه کار آنها بیشتر آشنا شوید.
مانند هر کار کدنویسی، بهترین روش این است که در CSS خود کامنت بنویسید. این به شما کمک میکند تا وقتی بعداً برای اصلاح یا بهبود کد برمیگردید، نحوه عملکرد آن را به خاطر بسپارید. همچنین به دیگران کمک میکند تا کد را درک کنند.
کامنتهای CSS با /* شروع میشوند و با */ پایان مییابند. در مثال زیر، کامنتها شروع بخشهای مشخصی از کد را مشخص میکنند. این به پیمایش در پایگاه کد با بزرگتر شدن آن کمک میکند. با استفاده از این نوع کامنتگذاری، جستجوی کامنتها در ویرایشگر کد شما به راهی برای یافتن کارآمد بخشی از کد تبدیل میشود.
کد «توضیحات» همچنین برای غیرفعال کردن موقت بخشهایی از کد برای آزمایش مفید است. در مثال زیر، قوانین مربوط به با «توضیحات» کردن کد غیرفعال میشوند.
فضای خالی به معنای فاصلههای واقعی، تبها و خطوط جدید است. همانطور که مرورگرها فضای خالی اضافی در HTML را نادیده میگیرند، مرورگرها فضای خالی اضافی در CSS را نیز نادیده میگیرند. مزیت فضای خالی این است که خواندن کد را برای شما آسانتر میکند.
در مثال زیر، هر تعریف (و شروع/پایان قانون) خط مخصوص به خود را دارد. مسلماً این روش خوبی برای نوشتن CSS است. این کار حفظ و درک CSS را آسانتر میکند.
مثال بعدی همان CSS را در قالبی فشردهتر نشان میدهد که تمام فضاهای سفید اضافی حذف شدهاند. اگرچه هر دو مثال به یک شکل کار میکنند، اما مثال زیر خوانایی کمتری دارد.
به خاطر داشته باشید که برخی از تغییرات فضای خالی میتواند باعث خطا شود. نام ویژگیها هرگز شامل فضای خالی نمیشوند، در حالی که مقادیر ویژگی که انتظار فضای خالی بین چندین مقدار را دارند، در صورت حذف آن فضا نامعتبر خواهند بود. برای مثال، این اعلانها در CSS معتبر هستند:
اما این اظهارات نامعتبر است:
آیا خطاهای فاصلهگذاری را میبینید؟ اولاً، 0auto به عنوان یک مقدار معتبر برای ویژگی margin شناخته نمیشود. ورودی 0auto قرار است دو مقدار جداگانه باشد: 0 و auto. ثانیاً، مرورگر را به عنوان یک ویژگی معتبر نمیشناسد. نام صحیح ویژگی (padding-left) فاصلهای ندارد.
شما همیشه باید مطمئن شوید که مقادیر متمایز را حداقل با یک فاصله از یکدیگر جدا میکنید. نام ویژگیها و مقادیر ویژگیها را به عنوان رشتههای یکپارچه و واحد نگه دارید.
برای اینکه بفهمید فاصلهگذاری چگونه میتواند CSS را خراب کند، سعی کنید با فاصلهگذاری در CSS آزمایشی خود بازی کنید.
