Css چیست
در ابتدا برای آشنایی با css در دوره آموزش css باید بیان شود که این کلمه مخفف cascading style sheets است. به تعبیری معنا و ترجمان لغوی فارسی آن عبارت از فرم آبشاری نمایش صفحات است. در آموزش css یاد می‌گیریم که css همان نحوه نمایش عناصر HTML در صفحه، کاغذ یا سایر رسانه‌ها را بیان می‌کند. با css می‌توان طرح چندین صفحه وب را به صورت همزمان کنترل کرد و همین امر باعث صرفه‌جویی در انجام کار می‌شود. همچنین قالب صفحات بیرونی نیز در css ذخیره‌سازی می‌شود. در ادامه به آموزش طراحی سایت با css خواهیم پرداخت.
کاربردهای CSS
از جمله کاربردهای CSS در زمینه قالب ها و طراحی سایت با css است. طراحی وب با CSS به دلیل خاصیت آن در طراحی وب است و از آنجایی که برخی از قابلیت‌ها در HTML وجود نداشت، این بخش در کنار HTML توانست طراحی وب سایت را تقویت و تکمیل نماید.
به تصاویری زیر دقت کنید و با انتخاب هر قالب صفحه تغییرات برای شما محسوس خواهد شد. با انتخاب هر قالب، طرح جدیدی از صفحه HTML به‌دست می‌آید.
مشاهده می‌کنید با اجرای هر css فرم ظاهری و قالب صفحه تغییر می‌یابد. این همان مفهومی است که به صورت توضیحی بیان شد. css همان چیزی است که برای تعریف قالب و سبک صفحات وب، طراحی صفحه و تغییرات صفحه نمایش برای دستگاه‌های مختلف و اندازه صفحه مورد نیاز است. در زیر مثالی از css را مشاهده می‌نماییم و خروجی آن را با هم مشاهده می‌کنیم.
! >DOCTYPE html<
>html<
>head<
>style<
Body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
P {
font-family: verdana;
font-size: 20px;
}
/>style<
/>head<
>body<
>h1>My First CSS Example</h1<
>p>This is a paragraph.</p<
/>body<
/>html<
خروجی css
همانطور که در کد بالا مشاهده می‌نمایید، متن پس زمینه آبی کمرنگ، سرتیتر سفید رنگ و با متن My First CSS Example می‌باشد. متن وسط نیز با توجه به ساختار برنامه‌نویسی شده HTML به این نحو تولید شده است.
نکته مهم آن است که HTML هرگز دربردارنده برچسب‌هایی برای قالب‌بندی یک صفحه وب نبوده است و برای توصیف محتوای یک صفحه ایجاد شده است.
مانند:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
سطر اول دستور برای سرتیتر نویسی و خط دوم همان نوشته داخل متن است.
مشکل اصلی HTML برای توسعه‌دهندگان زمانی آغاز شد برچسب‌هایی مانند <font> و ویژگی‌هایی مانند رنگ و انواع استفاده قلم در صفحات وب گسترش یافت و این فرآیندی طولانی و گران بود. برای رفع این مشکلات، کنسرسیوم شبکه جهانی وب W3C CSS را ایجاد کرد. CSS قالب بندی سبک‌ها و قالب‌ها را از صفحه HTML حذف کرد!
تعاریف سبک و قالب به طور معمول در پرونده های CSS ذخیره می شود. با استفاده از این موضوع می‌توانید فقط با تغییر یک فایل ظاهر وب سایت را تغییر دهید. به طور ساده‌تر می‌توان گفت که CSS سبک‌ها را در خود ذخیره‌سازی نموده و کاربر با انتخاب آن فایل، تغییرات مورد نیاز را در صفحه وب خود خواهد داد. به عنوان مثال قالب‌ها و سبک‌ها جهت رنگی نمودن صفحات به صورت زیر برنامه‌نویسی می‌شوند.
به مثال زیر توجه نمایید:
! >DOCTYPE html<
>html<
>body>
<h1 style="background-color:Tomato;">Tomato</h1<
<h1 style="background-color:Orange;">Orange</h1<
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1<
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1<
<h1 style="background-color:Gray;">Gray</h1<
<h1 style="background-color:SlateBlue;">SlateBlue</h1<
<h1 style="background-color:Violet;">Violet</h1<
>h1 style="background-color:LightGray;">LightGray</h1<
/>body<
/>html<
رنگ‌ها در CSS با نام فراخوانی و مشخص می‌شوند. تصویر زیر نشان از رنگ‌ها در برنامه فوق دارد.
منظور از طراحی سایت با css چیست
همانطور که در مثالهای زیر دیده شد، برخی از کاربردهای CSS مشاهده شد. در این قسمت به آموزش CSS و ویژگی‌های آن به طور مفصل‌تری آشنا خواهیم شد.
نوشتن کد با CSS
برای نوشتن کد در CSS از یک انتخابگر و بلوک استفاده می‌شود. به تصویر زیر دقت نمایید:
هدف از کدنویسی با CSS چیست
همانطور که مشاهده می‌شود، در هر بلوک باید ویژگی در کنار مقدار آن نوشته شود. مثلا در انتخابگر h1 رنگ به عنوان ویژگی با مقدار ورودی آبی و اندازه فونت به عنوان ویژگی دوم حروف متن با مقدار ورودی 12 انتخاب شده است.
لذا اگر دستور نوشته ای داده شود، به رنگ آبی و با اندازه 12 نوشته می شود. در یک انتخابگر می توان از چند ویژگی و مقدار آنها بهره برد. تمام ویژگی ها باید توسط سمی کالن از هم جدا شوند. به دستور زیر دقت نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
P {
color: red;
text-align: center;
}
/style>>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
خروجی این برنامه متنی نوشتاری در وسط صفحه به رنگ قرمز است.
Hello World!
These paragraphs are styled with CSS.
منظور از انتخابگر در css چیست
انتخابگرها برای انتخاب یا یافتن عناصر HTML مورد نظر جهت سبک سازی استفاده می‌شوند. انتخابگرها را در 5 دسته تقسیم‌بندی می کنند. انتخابگرهای ساده، انتخابگرهای ترکیبی، انتخابگرهای شبه کلاس، انتخابگرهای شبه عناصر و انتخابگرهای ویژگی. در ادامه عناصر انتخابگر CSS را در مثالهای متنوع بررسی می کنیم.
مثال اول طراحی سایت با css:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
نکته اول در این مثال آن است که هر انتخابگر توسط یک نام مشخص شده است. اگر دقت نمایید در قسمت رنگی مشخص شده، دستورات برای متن نویسی عبارت در مرکز صفحه و به رنگ قرمز است. حاصل این برنامه عبارت است از:
Every paragraph will be affected by the style.
Me too!
And me!
مثال دوم طراحی سایت با css
در مثال قبل تغییراتی اعمال می‌کنیم و انتخابگر را بر اساس ID ایجاد می کنیم. ID ها یکتا هستند و در برنامه‌نویسی کاربرد متعددی دارند.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
به تفاوت این دو برنامه توجه نمایید. خروجی این برنامه به صورت زیر است. حتی در خروجی نیز تفاوتها را مشاهده نمایید.
Hello World!
This paragraph is not affected by the style.
اعمال تغییرات فقط برای بخش ID اعمال شده و سایر متن به صورت عادی ایجاد می‌شوند.
مثال سوم طراحی سایت با css
در این مثال استفاده از کلاس در CSS را می آموزیم.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
در این برنامه از کلاس .center استفاده شده است. خروجی برنامه به صورت زیر خواهد بود:
Red and center-aligned heading
Red and center-aligned paragraph.
در همین مثال اگر توجه نمایید از دو کلاس به صورت همزمان در دل کلاس بزرگتر استفاده شده است.
مثال چهارم طراحی سایت با css
در این مثال انتخابگر عمومی را معرفی می نماییم که در آن تمام انتخابگر در صفحه انتخاب می شوند.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
به خروجی این برنامه توجه کنید. در این مثال تمام عناصر نوشتاری به صورت وسط چین و آبی رنگ نمایش داده می‌شوند:
Hello world!
Every element on the page will be affected by the style.
Me too!
And me!
سه راه برای ورود css
- External CSS
- Internal CSS
- Inline CSS
با یک مثال برای هر یک مفهوم آن را متوجه خواهیم شد.
مثال اول برای css خارجی است. در css خارجی باید در بخش head از عنصر <link> استفاده نماییم تا یک ارجاع بیرونی داده شود.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
خروجی برنامه عبارت است از:
Css خارجی
حال قسمت مهم بخش ارجاع بیرونی است که در داخل link قرار گرفته است. این بخش به صورت زیر نوشته شده است که به واسطه آن پس زمینه آبی کم رنگ و سایر متون نیز رنگی شده است.
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
مثال دوم در خصوص css داخلی است. css داخلی در <style> و در بخش head قابل تعریف است. به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
در این برنامه مشاهده می شود که رنگ پس زمینه linen انتخاب شده و رنگ سرتیتر maroon به همراه انتخاب حاشیه‌ای به اندازه 40px. خروجی را مشاهده نمایید.
Css داخلی
مثال سوم و در نهایت مثال آخر در خصوص آموزش css در بین خطوط است.
به مثال زیر در این زمینه توجه نمایید:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
متن برنامه اشاره به آن دارد که رنگ متن سرتیتر آبی و متن در وسط نوشته شود. همچنین متن نوشتار قرمز باشد. خروجی به صورت زیر خواهد بود.
This is a heading
This is a paragraph.
تمامی این موارد جهت طراحی سایت با css و بخش نوشتار، قالب و انواع ساخت‌های متن و تنظیمات آن به کار خواهد رفت. هنوز بخش‌های متنوع دیگری وجود دارد که در آموزش css باید به آنها پرداخت که در آینده‌ای نزدیک از آنها بهره خواهیم برد. با ما همراه باشید.
