زبان CSS

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

اما پیش از این که یادگیری یک زبان برنامه نویسی را شروع کنید، بد نیست آشنایی بیشتری با آن داشته باشید تا متوجه علاقه خود شوید. در این بخش می خواهیم بفهمیم CSS دقیقا چیست و در طراحی سایت چه کاربردی دارد.

زبان CSS چیست؟!

اول از همه باید ببینیم این سه حرف، مخفف چه عبارتی هستند. Cascading Style Sheets عبارتی است که از آن به عنوان CSS یاد می شود. این واژه را می توان «صفحات استایل آبشاری» معنا کرد که به نوع کدنویسی اشاره دارد. CSS مشابه یک صفحه یا یک شیت استایل دهی است که طرح ها، رنگ ها، فونت ها و مواردی از این دست را به یک صفحه وب اضافه می کند. در واقع بدون وجود این زبان، پیمایش وب سایت ها اصلا برای کاربران جذاب نیست؛ چرا که با یک صفحه سفید و فونتی یکسان مواجه می شوند.
CSS همچون HTML یک زبان برنامه نویسی معمول نیست. یعنی نمی توان فقط با یادگیری این زبان، یک وب سایت طراحی کرد. در عوض همان طور که از نام CSS پیداست، این یک زبان برای استایل دهی به صفحات یا شیت هاست. در واقع با استفاده از زبان CSS می توانید یک سبک شخصی به وب سایت اضافه کنید. به همین دلیل این زبان در طراحی سایت اهمیت ویژه ای دارد.

بیشتر بخوانید
جايگاه طراحي وب سايت در برند سازي

زمانی که از مهارت ها و فناوری های لازم برای توسعه وب صحبت می شود، HTML و CSS معمولا نقطه شروع هستند. از طرف دیگر چون ارتباط این دو زبان با یکدیگر تنگاتنگ است، معمولا آنها را در یک دوره آموزش می دهند.

از CSS برای چه کاری استفاده می کنند؟!

CSS به طراحان وب، توسعه دهندگان، وبلاگ نویسان و افراد دیگر اجازه می دهد وب سایت ها را منحصر به فرد و جذاب کنند. CSS به ما امکان می دهد تا صفحات وب را صفحه آرایی کنیم؛ رنگ ها و قلم ها را تنظیم کنیم؛ جلوه هایی به تصاویر اضافه کنیم و غیره.
در جدیدترین نسخه CSS که با نام CSS3 شناخته می شود، امکان خلاقیت بسیاری وجود دارد و می توان استایل ها را تا حد زیادی گسترش داد.
اما اگر می پرسید چرا در طراحی وب سایت از CSS استفاده می کنند؛ جواب ساده است: زبان CSS در نهایت زندگی در دنیای وب را راحت تر و جذاب تر می کند!
به کمک CSS می توانیم ساختار اولیه وب که همان HTML است را به فایل های مختلف تفکیک کنیم. این کار از طریق یک پرونده استایل شیت با استفاده از پسوند .css انجام می شود. جدا کردن پرونده های CSS از HTML مزایایی هم دارد.
با این کار امکان به اشتراک گذاشتن استایل یک صفحه وب در صفحات دیگر، کاهش پیچیدگی یا تکرار در پرونده های HTML، بهبود سرعت بارگذاری صفحه، ایجاد تغییرات کلی در استایل صفحات وب و مواردی از این دست به راحتی فراهم می شود.

بیشتر بخوانید
بررسی وب سایت صندوق بازنشستگی کشوری

البته روش های دیگری هم برای به کار بردن زبان CSS وجود دارد. می توان آن را در بالای صفحه HTML تعریف کرد یا از تکنیک درون خطی استفاده کرد و کدهای مربوط به این زبان را در میان تگ های HTML اضافه کرد.

CSS چگونه در طراحی وب سایت کار می کند؟

همان طور که پیش تر اشاره کردیم CSS به معنای «شیت استایل آبشاری» است. شاید واژه آبشاری کمی گیج کننده به نظر برسد؛ اما این واژه به نحوه کار کردن این زبان اشاره می کند. در واقع آبشار در CSS به سلسله مراتبی که در این زبان وجود دارد، اشاره می کند. بر اساس این سلسله مراتب، استایل هایی که تقدم داشته باشند، روی دستورات دیگر تاثیر می گذارند. دستوراتی که با CSS می نویسید، اساس آبشاری دارد و هر دستوری با توجه به تقدمی که شما تنظیم کرده باشید، اجرا خواهد شد.

مثلا شما در یک استایل شیت خارجی دستور می دهید که تمام پاراگراف های صفحه آبی باشند. اما در میان کدهای HTML مشخص می کنید که یک پاراگراف قرمز باشد. بدین ترتیب رنگ قرمز این پاراگراف در برابر دستور آبی پیروز می شود.

دستورات آبشاری زبان CSS

به طور کلی تمام استایل هایی که تعیین می کنید، با توجه به قوانین زیر که شماره چهارم در آن بیشترین تقدم را دارد، تنظیم می شوند:
• مرورگر به طور پیش فرض
• استایل شیت خارجی
• استایل شیت داخلی در بخش Head صفحه
• استایل درون خطی که داخل یک عنصر HTML نوشته می شود

بیشتر بخوانید
وب سایت مبین نت پتانسیل طراحی بهتر را دارد

شاید در ابتدا کمی گیج کننده باشد. اما این ترتیب دقیقا از قانونی مشابه با ترتیب عملیات در ریاضی تبعیت می کند. زمانی که اولویت آنها را درک کنید، خیلی ساده از این قانون آبشاری استفاده خواهید کرد.

مقادیر CSS

زبان CSS بر اساس انتخابگرها (selectors)، خصیصه ها (properties) و مقادیر (values) کار می کند. برای این که متوجه این عناصر شوید، آن را با یک مثال توضیح می دهیم.
فرض کنید شما یک کد HTML به شکل زیر نوشته اید:

Hello world!

با CSS می توانید این گونه به آن استایل دهید:
p {

font-family: verdana;

font-size: 20px;

color:blue

}
در این مثال زبان CSS تعیین کرد که پاراگراف (p) شما 3 ویژگی داشته باشد: فونت آن تبدیل به فونت verdana شود، اندازه فونت 20 پیکسل باشد و رنگ این پاراگراف نیز آبی شود.
در این مثال «p» انتخابگر بود. چرا که مشخص می کند استایل چگونه شود. نوع و اندازه فونت و رنگ، خصیصه ها بودند و مقداری که به آنها می دهید value. البته شما می توانید دستور CSS را روی یک خط هم بنویسید. خصیصه هایی که به کمک CSS می توان تعریف کرد شامل موارد زیر است:
• رنگ پس زمینه
• اندازه قلم
• حاشیه داخلی
• فضای منفی خارجی
• طول و عرض

شفافیت
• و بسیاری از موارد دیگر.

یادگیری CSS برای چه افرادی مفید است؟

زبان CSS برای هر فردی که می خواهد سایت خود راه اندازی کند، مناسب است. علاوه بر این CSS یک فرصت شروع ایده آل برای افرادی است که می خواهند توسعه دهنده وب یا طراح حرفه ای سایت شوند. یادگیری این زبان برای طراحان گرافیک و طراحان UX نیز می تواند یک برگ برنده باشد.

بیشتر بخوانید
بررسی سرعت وب سایت ها از جنبه هاي مختلف

منبع:
learntocodewith.me

مقاله مرتبط: چه تفاوتی بین طراحی سایت برای موبایل و طراحی ریسپانسیو سایت وجود دارد؟

خدمات طراحی سایت

برای اطلاع از تعرفه ها و خدمات وبسایتکس در حیطه طراحی سایت، به لینک زیر مراجعه فرمایید.

طراحی سایت