CSS چیست

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

عمومی کامپیوتر
بدون دیدگاه
279

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

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

زبان CSS چیست؟

cssچیست و چه کاربردی دارد

CSS (استایل برگه های آبشاری) یک زبان برنامه نویسی است که به شما اجازه میدهد صفحات زیبایی در وب طراحی کنید و بسازید اما در ابتدا باید بدانید که CSS چیست و این کلمه مخفف چه عبارتی است؟

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

CSS چه کاربردی دارد؟

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

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

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

آشنایی با تاریخچه CSS

HTML در سال 1990 توسط دانشمند کامپیوتر به نام تیم برنزر لی (Tim Berners-Lee) اختراع شد و اجازه داد تا محتوا بر روی وب سایت ها نمایش داده شود اما HTML گزینه های استایل دهی را ارائه نمیداد. به این ترتیب CSS برای اولین بار در سال 1994 توسط تکنولوژیست نروژی به نام هاکان ویوم لی (Hakon Wium Lie) پیشنهاد شد که در آن زمان در سازمان تحقیقات هسته ای اروپا (CERN) با برنزرلی کار میکرد. دوسال بعد کنسرسیوم جهانی وب (W3C) اولین مشخصات استاندارد شده برای CSS را که CSS1 نامیده میشد، تصویب کرد.

این نسخه به صورت مشترک توسط برنزرلی و برنامه نویس هلندی برت بوس توسعه یافت. مرورگر اینترنت اکسپلورر شرکت مایکروسافت اولین مرورگر تجاری بود که از CSS پشتیبانی میکرد. در سال 1998 ، CSS2 منتشر شد و کنترل بهتری برروی طرح بندی و توانایی مشخص کردن نحوه نمایش محتوا در پلتفرم های مختلف از جمله دستگاه های دستی، چاپ، صفحه نمایش، تلویزیون و حتی بریل را ارائه داد. CSS3، که در سال 2011 معرفی شد، امکانات اضافی مانند طراحی وب ریسپانسیو و پشتیبانی از انواع جدید فونت‌ ها را اضافه کرد. همچنین ماژول ها را معرفی کرد.

ماژول های CSS برای جلوگیری از تعارضات استایل استفاده می شوند.علاوه براین، ماژول ها به کاربران کمک می کنند تا اجزای کد را دوباره استفاده کنند، زیرا هر جزء می تواند مجموعه ای از قوانین استایلی خود را داشته باشد. معرفی ماژول ها، ایمنی CSS را با این که قوانین CSS به طور پیش فرض به صورت محلی و نه جهانی اعمال می شوند، بهبود بخشید. علاوه بر توسعه اصلی CSS، ظهور فریمورک های CSS، مانند بوت استرپ به طور قابل توجهی طراحی وب ریسپانسیو را با فراهم کردن اجزای از پیش طراحی شده و قابل استفاده مجدد، مانند نوارهای ناوبری و دکمه ها، ساده تر کرده است.

CSS چه کاربردی دارد؟

ساختار css

CSS میتواند برای سبک بندی متنی اسناد بسیار ابتدایی ، ایجاد یک طرح بندی و ایجاد جلوه هایی مانند انیمیشن استفاده شود.

h1 {
  color: red;
  font-size: 5em;
}

در مثال بالا، قانون CSS با یک انتخابگر شروع میشود. این انتخابگر آن عنصر HTML که میخواهیم سبک بندی کنیم را انتخاب میکند. در اینجا ما سرویس های سطح 1 (h1) را سبک دهی میکنیم. این عناصرو ویژگی هایی که میخواهیم به آنها نسبت دهیم باید در بین دو کروشه { } قرار بگیرند.

مثلا در تصویر زیر به ویژگی color مقدار red اختصاص داده شده است به این معنا که رنگ این عنصر قرمز در نظر گرفته شود و دارای ویژگی فونت-سایز با مقدار 15 پیکسل باشد. پس تیتر h1 قرمز رنگی با سایز 15 پیکسل خواهیم داشت.

تاریخچه css

در داخل کروشه ها یک یا چند دستور وجود دارد که به شکل جفت هایی از ویژگی و مقدار هستند (ویژگی رنگ قرمز و مقدار سایز فونت مد نظر). ویژگی مثل رنگ را قبل از : مشخص میکنیم و آن ویژگی را بعد از : میگذاریم. در مثال بالا انتخاب کردیم که رنگ تگ h1 ما قرمز باشد.

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

معرفی انواع CSS از نظر پیاده سازی

در CSS سه نوع استایل وجود دارد. استایل داخلی ، استایل خارجی و استایل درون خطی یا عبارتی:

  • Internal CSS
  • External CSS
  • Inline CSS

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

CSS داخلی Internal CSS

CSS داخلی یا جاسازی شده نیاز دارد که شما یک تگ <style> در بخش <head> سند HTML خود اضافه کنید.

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

در اینجا نحوه استفاده از CSS داخلی آورده شده است:

صفحه HTML خود را باز کنید و تگ <head> را پیدا کنید.

کد زیر را بلافاصله بعد از تگ <head> قرار دهید

<style type="text/css">

قاعده‌های CSS را در یک خط جدید اضافه کنید.

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}

Type the closing tag:

</style>

کدHTML شما به شکل زیر خواهد بود :

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;.
} 
</style>
</head>
<body>

<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>

</body>
</html>

شما می توانید از انتخاب گروه های کلاس و ID در این نوع CSS استفاده کنید، مثل مثال زیر:

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
مزایای CSS داخلی
  • از آنجایی که شما فقط کد را در همان فایل HTML اضافه میکنید، دیگر نیازی نیست که چندین فایل را آپلود کنید.
معایب CSS داخلی
  • اضافه کردن کد به سند HTML میتواند باعث افزایش اندازه صفحه و زمان بارگذاری آن شود.

CSS خارجی External CSS

با CSS خارجی، صفحات وب خود را به یک فایل .css خارجی لینک می کنید که می تواند توسط هر ویرایشگر متنی روی دستگاه شما (مثلاً Notepad++) ایجاد شود.

CSS خارجی روش مؤثرتری برای استایل دهی به یک وب سایت بزرگ است. با ویرایش یک فایل .css، می توانید کل سایت خود را به یکباره تغییر دهید.

برای استفاده از CSS خارجی، مراحل زیر را دنبال کنید:

یک فایل .css جدید با ویرایشگر متنی ایجاد کرده و قوانین استایل را اضافه کنید. به عنوان مثال:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

در بخش صفحه HTML خود، یک ارجاع به فایل .css خارجی تان را درست بعد از تگ اضافه کنید:</p>

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

فراموش نکنید که style.css را با نام فایل .css خود عوض کنید.

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

CSS درون خطی Inline CSS

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

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

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

بیایید مثالی بزنیم. در اینجا، ما یک CSS درون خطی به تگ های <p> و <h1> اضافه می کنیم:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>

</body>
</html>

مزایای CSS درون خطی

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

CSS مزایای زیادی دارد که به توسعه دهندگان امکان می دهد یک وب سایت طراحی کنند. برخی از این مزایا عبارتند از:

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

معایب CSS

استفاده از CSS چند عیب دارد. باید این معایب را بشناسید تا هنگام طراحی یک وب سایت از آنها آگاه باشید :

  • سردرگمی به دلیل سطوح متعدد CSS : مبتدیان بیشتر در معرض این مشکل هستند. ممکن است هنگام یادگیری CSS ، با توجه به سطوح مختلفی مثل CSS2، CSS3 و غیره دچار سردرگمی شوند.
  • مشکلات مربوط به مرورگرهای مختلف : مرورگرهای مختلف به اشکال متفاوتی عمل می کنند. بنابراین، باید بررسی کنید که تغییرات اعمال شده در وب سایت از طریق کدهای CSS به خوبی در تمام مرورگرها منعکس شود.
  • مسائل امنیتی : امنیت در دنیای امروز که به وسیله فناوری و داده ها هدایت می شود، اهمیت زیادی دارد. یکی از بزرگ ترین معایب CSS این است که امنیت محدودی دارد.
  • کار اضافی برای توسعه دهندگان : خدمات طراحی نیاز به بررسی و تست تمام کدهای CSS در مرورگرهای مختلف برای سازگاری دارد. به همین خاطر، بار کار توسعه دهندگان به دلیل تست سازگاری برای مرورگرهای مختلف افزایش می یابد.

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

ویرایشگرهای متنی CSS

ویرایشگر متنی CSS نرم‌افزاری است که به توسعه دهندگان اجازه میدهد تا کدهای CSS را بنویسند و ویرایش کنند. ویرایشگرهای انلاین زیادی وجود دارد که بهترین های آن را به شما معرفی میکنیم.

  • Sublime Text
  • Notepad++
  • Atom
  • Stylizer
  • Espresso
  • Brackets

سوالات متداول درباره زبان css

  1. CSS چیست؟

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

  2. تفاوت CSS و HTML در چیست؟

    HTML یک زبان نشانه گذاری ابرمتنی است که برای ایجاد صفحات ایستا مثل صفحات متنی و برنامه های وب استفاده می شود. اما CSS مسئول طراحی یا استایل کردن وب سایت است که شامل چیدمان ، افکت های بصری و رنگ پس زمینه میشود.

  3. ازCSS چگونه استفاده میشود؟

    CSS (Cascading Style Sheets) برای استایل دهی و چیدمان صفحات وب استفاده میشود مثلا برای تغییر فونت، رنگ، اندازه و فضای بین محتواها، تقسیم آن به چندین ستون یا افزودن انیمیشن و سایر ویژگی های ظاهری.

  4. چگونه میتوانم CSS را یاد بگیرم؟

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

نتیجه گیری

CSS چیست ؟ در این مقاله یکی دیگر از زبان های برنامه نویسی تحت عنوان CSS و کاربردهای آن را یاد گرفتیم و آموختیم که این زبان، زبان استایل ها و ویژگی های بصری سایت است و هرآنچه ما در یک سایت میبینیم با کمک این زبان مزین و زیبا شده است. CSS مخفف عبارت Cascading style sheets به معنای استایل صفحه های آبشاری است و به این موضوع اشاره دارد که کدنویسی دراین زبان به صورت آبشاری و زیرهم نوشته شده است.

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

لذت کار با وردپرس پرسرعت و پایدار

با 19 درصد تخفیف ویژه رونمایی سرورهای نسل جدید، هاست وردپرس را خریداری نمایید.

پربازدید ترین مطالب
مطالب مرتبط
این مطلب را می پسندید

5/5 - (1 رای)

نویسنده: محتوای تیمی کار شده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.

اشتراک گذاری مطلب