طراحی سایت با CSS چیست: Cascading Style Sheets (CSS) یک زبان برنامه نویسی است که به شما امکان می دهد طراحی اسناد الکترونیکی را مشخص کنید. عناصر وبسایت مانند طرحبندی، رنگ و تایپوگرافی را میتوان با استفاده از دستورالعملهای ساده – ارائه شده در کد منبع واضح، به دلخواه تنظیم کرد. به لطف صفحات طراحی پلکانی، ساختار معنایی و محتوای سند کاملاً دست نخورده باقی می ماند. CSS در اواسط دهه 1990 ظهور کرد و اکنون به عنوان زبان استاندارد صفحه سبک در وب جهانی در نظر گرفته می شود.
طراحی سایت با CSS چیست | سئوکار در کرج | ماهور
درست مانند HTML ،CSS نیز یکی از زبانهای اصلی شبکه جهانی وب است. در حالی که یک وب سایت را با متن با استفاده از HTML پر می کنید
و آن را از نظر معنایی ساختار می دهید، طراحی این محتوا را با CSS تعیین می کنید. اگرچه HTML و CSS به صورت ترکیبی مورد استفاده قرار می گیرند،
شیوه نامه CSS و عناصر HTML به طور جداگانه وجود دارند. این بدان معنی است که یک دستگاه می تواند یک سند الکترونیکی را حتی بدون CSS بخواند.
با کمک CSS، محتوای باز شده در مرورگر به صورت اپتیکال آماده می شود و در نتیجه به شکلی جذاب نمایش داده می شود.
CSS یک “استاندارد زندگی” است و به طور مداوم توسط کنسرسیوم وب جهانی توسعه می یابد. به همین دلیل، همیشه توابع جدید
و کاربردهای عملی برای کشف وجود دارد. زبان شیوه نامه پر استفاده در دهه 1990 ظهور کرد. با این حال، ایده استفاده از شیوه نامه
برای نمایش محتوای وب دیگر در آن زمان کاملاً جدید نبود. با این حال، CSS با سایر عناصر ارائهمحور که قبلاً در HTML وجود داشتند از یک جهت مهم متفاوت بود:
به کاربران این امکان را میداد که قوانین طراحی را برای گروههایی از عناصر در چندین سند و در یک شیوه نامه واحد تعریف کنند.
در واقع CSS یک زبان برنامه نویسی برای طراحی بصری وب سایت هاست. با کمک شیوه نامه های آبشاری، تعیین می کنید،
برای مثال، در کدام فونت، اندازه یا رنگ عناصر HTML خاصی باید نمایش داده شوند.
مزایا و زمینه های کاربرد CSS
یک وب سایت خوب نه تنها از محتوای آن، بلکه از طریق طراحی آن نیز زندگی می کند. اگر این کاربرپسند یا ساختار جذابی نداشته باشد،
کاربران به سرعت علاقه خود را از دست می دهند. در این زمینه، CSS تعدادی گزینه طراحی را به شما ارائه می دهد که در HTML خالص موجود نیستند.
به عنوان مثال، CSS به شما امکان می دهد تنظیمات خاصی را به صورت مرکزی کنترل کنید. این بدان معنی است که عناصر مشابه
(مانند همه لینک ها یا تصاویر) در یک سند با یک دستور واحد شناسایی و قالب بندی می شوند. دستورالعمل های طراحی نباید
به شکل یک شیوه نامه داخلی در خود سند HTML باشد. اگر دستورالعملهای CSS را در یک شیوه نامه خارجی ،
یعنی یک فایل جداگانه ذخیره کنید، این میتواند برای اسناد دیگر نیز استفاده شود.
علاوه بر دستورالعمل های اصلی نمایش که بر رنگ ها، شکل ها و تایپوگرافی عناصر HTML تأثیر می گذارد،
اکنون ماژول های پیچیده تری در CSS وجود دارد. می توانید از اینها برای تعریف، به عنوان مثال،
انیمیشن یا نمایشگرهای مختلف بسته به رسانه خروجی استفاده کنید. به این ترتیب، یک سند HTML می تواند
به طور یکسان برای تمام رسانه های ممکن آماده شود. از آنجایی که محتوا و طراحی در این سند از هم جدا شده اند،
این باعث می شود کد وب سایت واضح تر شود. زبان سبک مرتبط SASS گزینه های بیشتری را ارائه می دهد، اما به طور کامل جایگزین CSS نمی شود.
نکته
همچنین میتوانید با کیت ساخت وبسایت MyWebsite که قالبهای طراحی حرفهای را به شما ارائه میدهد،
به طراحی سایت جذابی دست پیدا کنید. از بین بسیاری از الگوهای آماده انتخاب کنید و تنها با چند کلیک یک الگوی سبک مناسب پیدا کنید.
اگر ترجیح می دهید ایجاد وب سایت خود را به حرفه ای ها بسپارید، سرویس طراحی وب سایت جایگزین بهتری است.
ساختار یک عبارت CSS
با یک دستور CSS، شما تعیین می کنید که کدام عناصر در سند الکترونیکی شما باید دارای چه ارزش یا ویژگی باشد.
در ساختار اصلی خود، عبارت از یک انتخابگر و براکت های فرفری تشکیل شده است. در این پرانتز،
اظهارنامه های دارایی را که با نقطه ویرگول از یکدیگر جدا شده اند، فهرست می کنید. هر اعلامیه شامل برچسب دارایی،
دو نقطه و یک مقدار خاص است . بعد از آخرین اظهارنامه اموال و قبل از پرانتز بسته شدن می توان نقطه ویرگول دیگری اضافه کرد اما اجباری نیست.
یک دستور CSS از انتخابگر و اعلان با خواص و مقادیر مرتبط تشکیل شده است.
چگونه می توان CSS را در یک وب سایت قرار داد؟
همانطور که قبلا ذکر شد، امکان جاسازی CSS در یک سند الکترونیکی از طریق شیوه نامه داخلی و خارجی وجود دارد.
علاوه بر این، سبک درون خطی نیز وجود دارد که در آن ویژگی های مورد نظر مستقیماً در کد منبع HTML یک عنصر قرار می گیرند.
در زیر مروری بر سه روش ممکن است که CSS را می توان با HTML ادغام کرد.
استایل شیت های خارجی
در آنجا، دستورالعمل های CSS در فایل های خارجی با پسوند “.css” تعریف شده و با استفاده از یک برچسب “link” در فایل HTML ادغام می شوند. این رایجترین روش است زیرا محتوا و طراحی کاملاً از هم جدا شدهاند و به راحتی میتوان تغییرات را ایجاد کرد. پیوند در قسمت “سر” سند HTML به شرح زیر ساخته شده است:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”stylesheet.css”>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz</p>
</body>
</html>
استایل شیت های داخلی
اینجا جایی است که شما تمام دستورات CSS را در خود فایل HTML قرار می دهید. لطفاً توجه داشته باشید که این موارد فقط در مورد سند مربوطه اعمال می شود. برای شیوه نامه های داخلی، عنصر “style” را در قسمت “head” سند HTML مانند این اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
H1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz</p>
</body>
</html>
سبک درون خطی
همانند شیوه نامه داخلی، دستورات CSS در خود فایل HTML وجود دارد، با این حال، یک تفاوت مهم وجود دارد: ویژگی های مربوطه مستقیماً در تگ شروع عنصر قرار دارند و برای هیچ عنصر دیگری اعمال نمی شوند . این روش مخصوصاً در صورتی مفید است که نمیخواهید دستورالعملهای طراحی فراگیر ایجاد کنید.
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue; font-size:12px;”>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz</p>
</body>
</html>
تعامل CSS و HTML
همانطور که مثالهای بالا نشان میدهند، CSS فقط میتواند در ارتباط با ساختار کلاسیک HTML استفاده شود. از آنجایی که ساختار HTML با پاراگراف ها، لیست ها و جداول محتوا دارد و CSS از طراحی بصری مراقبت می کند، این دو زبان وب مکمل یکدیگر هستند و ارتباط نزدیکی با یکدیگر دارند.
نوشتن شیوه نامه های آبشاری اغلب در مورد ایجاد “جعبه ها” است. یک سند HTML بر اساس اصل جعبه ساخته شده است، که در آن عناصر منفرد مانند جعبه ها روی هم قرار می گیرند. هر “جعبه” ای که در یک وب سایت فضایی را اشغال می کند دارای ویژگی های زیر است:
Padding: فضای بلافاصله در اطراف محتوای یک عنصر (padding)
حاشیه: خطی که درست خارج از بالشتک (حاشیه) قرار دارد
حاشیه: فضایی که خارج از کادر است (حاشیه)
مدل جعبه CSS: ساختار پایه با “padding”، “border” و “margin”
ساختار وب سایت در سند HTML با بالشتک، حاشیه و بالشتک که می توان با استفاده از CSS به صورت بصری تغییر داد.
سپس این “جعبه ها” با تعیین اندازه، شکل و رنگ بر اساس آن فرمت می شوند. علاوه بر این ویژگیهای ساده، دستورالعملهای CSS پیچیدهتری نیز برای درج سایهها در متن، فیلتر کردن تصاویر، و تأکید بر فیلدهای فرم و سایر عناصر وجود دارد.
