CSS: زیبایی ساختاری صفحات وب
تمام صفحات مدرنی که در دنیای اینترنت مشاهده می‌کنید، زیبایی ساختاری خود را مدیون CSS هستند. بدون CSS صفحات وب مجموعه‌ای از متون خام و به هم ریخته هستند که هیچ نظم و تعادلی ندارند. وجود رنگ، فونت مناسب، ساختار هماهنگ و درست، رابط کاربری روان، همه و همه بدون کدهای زیبای CSS ممکن نیستند. شاید برای شما هم پیش آمده باشد که ناگهان اینترنت شما قطع و یا فقط کدهای HTML صفحه وبی که باز کرده‌اید لود میشود و ساختاری به هم ریخته از متون، لینک‌ها و آیکون‌ها را مشاهده می‌کنید، این دقیقا همان دنیای وب بدون CSS است. همانقدر مرده و بی روح، همانقدر خاکستری. در این مقاله می‌خواهیم راجع به CSS یا Cascading Style Sheets صحبت کنیم و کمی عمیق‌تر وارد دنیای آن شویم پس با ما همراه باشید.
CSS چیست؟
CSS (مخفف Cascading Style Sheets) به زبان نوشتن استایل و طراحی‌های صفحات وب گفته میشود. این زبان نیز همانند HTML زبان برنامه نویسی نیست زیرا از منطق و خاصیت‌های زبان‌های برنامه نویسی پشتیبانی نمی‌کند. هدف وجود CSS زیبا کردن و ساختار دادن به صفحات وب و کدهای HTML است. HTML به عنوان زبان نشانه گذاری صفحات وب شناخته میشود که توسعه دهندگان از آن برای ساختار پایه صفحات مانند متون، بخش‌ها، هدینگ‌ها و اینگونه موارد استفاده می‌کنند. در مقابل Cascading Style Sheets را می‌توان به عنوان یک مکمل برای HTML شناخت که با آن می‌توانید به طور دلخواه صفحات وب خود را شخصی سازی کنید و به آن‌ها زیبایی ببخشید.
جادوی CSS
درهایی که Cascading Style Sheets به روی خلاقیت باز میکند بی نهایت هستند. از انیمیشن‌های جذاب هر صفحه گرفته تا انعطاف پذیری تمامی عناصر یک وب سایت، به صورت همگام از جادوی این زبان استایل نویسی صحبت می‌کنند. در تصویر زیر می‌خواهیم یکی از طراحی‌های برتر و منتخب سال بر اساس رای‌های کاربران را به شما نشان دهیم، تا مقدار بسیار کمی از این دنیای وسیع را شاهد باشید.
CSS چگونه کار میکند؟
Cascading Style Sheets یک زبان مبتنی بر قاعده است. شما می‌توانید با مشخص کردن گروهی از کدها مانند رنگ فونت و سایز آن، بر روی المنت مورد نظر تاثیر بگذارید. برای مثال شما تصمیم می‌گیرید که هدینگ اصلی صفحه وب سایت شما رنگ قرمز، فونت پر رنگ و سایز 40px را داشته باشد. کد CSS پایین یک قاعده ساده برای انجام این کار را نشان می‌دهد:
h1 {
color: red;
font-size: 40px;
font-weight: bold;
}
همانگونه که مشاهده می‌کنید در کد بالا ما هدینگ اصلی یا H1 وب سایت را انتخاب کردیم (معمولا به صورت عنوان سایت شناخته میشود، مثلا عنوان صفحه این مقاله “CSS: زیبایی ساختاری صفحات وب” است). به این حرکت استفاده از Selector گفته میشود که عنصری در وب که می‌خواهیم در آن تغییراتی ایجاد کنیم را انتخاب می‌کنیم. پس از انتخاب عنصر به سراغ استفاده از Propertyها می‌رویم. هدف هر Property تغییر در بخشی از عنصر اصلی ما است. برای مثال استفاده از Color باعث تغییر رنگ عنصر (در مثال بالا: H1) میشود.
روش‌های اعمال CSS در HTML
به طور کلی می‌توان با سه روش کدهای CSS را در HTML اعمال کرد:
1. Internal CSS: در این روش ما کدهای Cascading Style Sheets خود را به صورت مستقیم در فایل HTML و تگ style قرار می‌دهیم.
body {
width: 100vw;
}
.title {
color: black;
font-weight: bold;
text-align: center;
}
2. Inline CSS: در این روش، استایل‌های هر عنصر دقیقا در داخل تگ HTML آن و در بخش style قرار می‌گیرند.
<div>
<h1 style="font-size: 30px">hello world!</h1>
</div>
3. External CSS: بر خلاف دو روش قبل، در External CSS، کدهای استایل ما به صورت کامل در فایلی جداگانه با پسوند css. قرار می‌گیرند و از طریق لینک به HTML متصل می‌شوند. این روش به دلیل نظم و ساختار بهتر، به صورت گسترده در توسعه صفحات وب استفاده میشود.
button {
color: rgb(114, 239, 255);
padding: 2rem;
margin: 1rem auto;
border-radius: 10px;
background-color: wheat;
}
ترتیب اجرای کد Cascading Style Sheets به صورت Internal ،Inline و در آخر External می‌باشد.
Selectorها در CSS
کاربرد Selectorها در انتخاب عناصر و تگ‌های HTML برای استایل دهی آن‌ها است. انواع بسیاری از Selectorها در Cascading Style Sheets وجود دارد اما به طور کلی این سه مورد بیشتر استفاده می‌شوند:
1. Element Selector: در مثال نخست دیدیم که با انتخاب تگ HTML یک عنصر توانستیم در ویژگیهای آن تغییر ایجاد کنیم. به این نوع از انتخاب مستقیم یک عنصر یا المنت، استفاده از Element Selector گفته میشود. نمونه‌ای از Element Selector:
p {
text-align: center;
color: red;
}
2. Class Selector: این Selector، تگ‌هایی که دارای class یکسان هستند را انتخاب میکند. برای مثال با این Selector می‌توانید در تمام تگ‌های دارای کلاس Wrapper تغییر ایجاد کنید. برای استفاده از این Selector نیاز است که اول در تگ HTML عنصر مورد نظر یک کلاس با نام خاص ایجاد نمایید (مانند “Wrapper”). سپس در فایل CSS خود با استفاده از Wrapper. آن را انتخاب کنید.
<div class="Wrapper">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laboriosam unde perferendis quia esse dignissimos dicta omnis
expedita corporis provident neque.
</p>
</div>
.Wrapper {
display: flex;
align-items: center;
margin: 1rem auto;
background-color: white;
padding: 20px;
}
3. ID Selector: در این Selector هم مانند class می‌توانید در تگ ID ،HTML مورد نظر خود را به عنصر بدهید با این تفاوت که هر ID فقط مختص یک المنت و عنصر است و نمی‌توان با آن چندین عنصر را انتخاب کرد. برای استفاده از این Selector نیاز است قبل ID انتخابی # بگذارید.
#Wrapper {
display: flex;
align-items: center;
margin: 1rem auto;
}
ریسپانسیو در CSS به چه معناست؟
همانگونه که می‌دانیم، هر دستگاهی اندازه صفحه متفاوتی دارد که باعث میشود نوع نگاه ما به صفحات وب تغییر کند. ریسپانسیو کردن صفحات وب به مجموعه کارهایی گفته میشود که وب سایت را برای نمایش درست و کاربر پسند در اندازه‌های مختلف صفحه نمایش بهینه می‌کنند. برای ریسپانسیو و واکنش گرا کردن یک صفحه وب در CSS معمولا از media@ استفاده میشود. با این حال با به روز رسانی‌های جدید، راه‌های بهتری نیز برای واکنش گرا کردن یک صفحه ساخته شده‌اند. برای مثال می‌توان از واحدهای Vw و Vh یا درصد برای اندازه‌ها استفاده کرد.
هاست پرسرعت با قیمتی اقتصادی
هاست پویان آی تی با ارائه پشتیبانی قوی و سخت افزار قدرتمند، به شما خریدی با صرفه اقتصادی بالا و کیفیتی عالی را پیشنهاد میکند!
برترین فریمورکهای CSS
فریمورک‌ها مجموعه‌ای ساختار یافته از کدها و ابزارهای آماده هستند که به منظور تسریع و تسهیل فرآیند توسعه مورد استفاده قرار می‌گیرند. دقیقا مانند دنیای برنامه نویسی، CSS هم از قدرت فریمورک‌ها بی بهره نبوده است. در ادامه به برخی از بهترین فریمورکهای CSS اشاره می‌کنیم:
- Bootstrap: یکی از محبوب‌ترین فریمورکهای CSS است که در ابتدا توسط توییتر توسعه یافت. شما می‌توانید با استفاده از کلاس‌های از پیش آماده شده Bootstrap به راحتی قالب سایت خود را بسازید.
- Tailwind CSS: اگر قرار باشد لقب کامل‌ترین فریمورک Cascading Style Sheets را به یک ابزار بدهیم، آن قطعا Tailwind CSS است. با گزینه‌های بی نظیر و داکیومنت‌‌های آموزشی عالی آن، انتخاب نکردنش به عنوان ابزار برای پروژه سخت‌تر از انتخاب کردنش است. همچنین Tailwind با فریمورکهای بسیاری نظیر React و Laravel همخوانی دارد و به راحتی می‌توان از آن استفاده کرد.
- Bulma: یک فریمورک متن باز و رایگان که بر اساس مدل Flexbox توسعه یافته است.
- Semantic UI: مجموعه‌ای غنی از کامپوننت‌ها و استایل‌های آماده را ارائه می‌دهد که به توسعه دهندگان کمک میکند رابط‌های کاربری زیبا و واکنش گرا را با سرعت بیشتری ایجاد کنند.
برای کسب اطلاعات بیشتر در مورد فریمورکهای CSS می‌توانید به مقاله بهترین فریمورکهای CSS مراجعه کنید!
4 مورد از برترین منابع یادگیری CSS
تداوم و استفاده درست از منابع، کلید‌های اصلی برای یادگیری درست CSS هستند. در سطح اینترنت منابع بسیاری وجود دارند که در ادامه به بهترین‌های این زمینه اشاره می‌کنیم:
W3Schools
یکی از بزرگ‌ترین پلتفرم‌های یادگیری کدنویسی است که علاوه بر Cascading Style Sheets، بسیاری از زبان‌های برنامه نویسی و فریمورک‌ها را به طور رایگان به شما آموزش می‌دهد. W3Schools به دلیل سادگی و آموزش از پایه به بسیاری از مبتدیان پیشنهاد میشود.
MDN Web Docs
یکی از کامل‌ترین وب سایت‌ها برای یادگیری Cascading Style Sheets است که هر بخش را به صورت جز به جز شرح می‌دهد. MDN موضوعات مختلف CSS را عمیقا مورد بررسی قرار می‌دهد و یکی از بهترین منابع یادگیری برای کسانی است که می‌خواهند مباحث را کامل یاد بگیرند.
CSS-Tricks
یک وب سایت بسیار محبوب و معتبر برای توسعه دهندگان است که به طور خاص بر روی ترفندها، تکنیک‌ها، آموزش‌ها و مقالات عمیق در مورد Cascading Style Sheets تمرکز دارد. این وب سایت به خاطر ارائه راه حل‌های خلاقانه، کاربردی و به روز برای چالش‌های طراحی وب شهرت بسیاری دارد.
Web.dev
یک پلتفرم منظم و ساختار یافته از گوگل است که به شما کمک میکند به راحتی مسیر یادگیری CSS را بخش به بخش پیش ببرید. یکی از قابلیت‌های خاص Web.dev فراهم کردن پادکست‌های جذاب برای کاربران است.
در نهایت
دنیای CSS همواره در حال تحول و پیشرفت است و هر روز شاهد ظهور ویژگیها و تکنیک‌های جدیدتری هستیم. از طرح بندی‌های پیچیده با Grid و Flexbox گرفته تا انیمیشن‌های ظریف و هوشمندانه، Cascading Style Sheets خود را به یکی از ارکان اصلی وب سایت‌های مدرن تبدیل کرده است. با دنبال کردن ترندهای جدید و به روز ماندن با آخرین امکانات این زبان طراحی، می‌توانید همواره در لبه فناوری طراحی وب حرکت کنید.
سوالات متداول
CSS مخفف چه عبارتی است؟
مخفف کلمه Cascading Style Sheets است که بیشتر در دنیای وب با نام سی اس اس یا همان CSS شناخته میشود.
آیا یادگیری CSS سخت است؟
خیر، یادگیری پایه این زبان ساده است و زمان زیادی نیاز ندارد، اما برای عمق بیشتر، تجربه و زمان بسیاری لازم است.
آیا CSS در همه مرورگرها به صورت یکسان کار میکند؟
در اکثر موارد بله، با این حال ممکن است ویژگیهای جدیدتر در نسخههای قدیمی کار نکنند و یا عملکرد برخی ویژگیها در مرورگرهای مختلف، متفاوت باشد.
منابع
- https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
- https://www.w3schools.com/css/css_intro.asp
اولین دیدگاه را اضافه کنید.