آموزش جامع CSS از مقدماتی تا پیشرفته – درس ۱

بیاموزید دات کام04/03/1395

۲ 889 خواندن این مطلب 4 دقیقه زمان میبرد

سلام .

به اولین جلسه آموزش جامع CSS خوش آمدید .

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

هدف از مطالعه این دوره :

۱ – ایجاد صفحات وب HTML با استایل های CSS

۲ – ایجاد استایل های استاندارد برای طراحی مدرن و بروز .

۳ – درک مطلب و استفاده از آن در تمامی رشته های طراحی وب و فریم ورک های موجود مانند بوت استرپ ، فاوندیشن و غیره .

۴ – توانایی ایجاد ویژگی های جدید در CSS ۳ مانند ، انیمیشن ، سایه ها ، گرادینت و …

۵ – یک استاد نقاش وب ، قطعاً شما یکی از آنها هستید .

برای شروع ابتدا توضیح مختصری در مورد css خدمت تون عرض کنم .

شیوه‌نامهٔ آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (به انگلیسی: CSS: Cascading Style Sheets) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. شیوه‌نامهٔ آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه‌شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

در این آموزش از شما انتظار می رود که با مفاهیم اولیه html آشنا بوده باشید .

برای شروع ابتدا نیاز به یکسری ابزار کار داریم .

ابزار کار ما برای استایل نویسی تنها یک نرم افزار متنی است که بتوان کد های CSS را در داخل آن نوشت .

برای این کار نرم افزار های زیادی همچون ، Dreamweaver , phpstorm و بسیاری دیگر وجود دارد . حتی می توانید کد های خود را در فایل متنی ابتدایی Notepad بنویسید .

برای شروع پیشنهاد می کنم از برنامه Notepad پلاس استفاده کنید .

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

برای دانلود این برنامه می توانید از لینک زیر استفاده کنید :

صفحه دانلود برنامه

پس از نصب برنامه حال می توانیم شروه به نوشتن css ها کنیم .

شروع کد نویسی :

محل قرار گیری css در اسناد html و … به دو شکل می باشد .

۱ – روش اول و غیر اصولی : در این روش با استفاده از تگ استایل ، در قسمت هدر سند اقدام به نوشتن کد های خود می کنیم .

به این شکل :

<html>

<head>

<script>

body : font-family:tahoma;

</script>

</head>

<body>

محتوی صفحه وب

</body>

<html>

۲ – روش اصولی :

در این روش که در دنیا مرسوم است ، ابندا یک یا چند فایل با فرمت css ایجاد کرده و آنرا به سند html خود لینک می کنیم .

ابتدا یک فایل خالی به نام دلخواه خود mystyle.css ایجاد می کنیم .پس از ذخیره شدن در پوشه پروژه خود ، فایل html مورد نظر را باز می کنیم تا استایل وی به آن متصل گردد .

پس برای استفاده از فایل css ایجاد شده توسط خودمان ، صفحه اصلی وب مربوطه را باز کرده ، سپس در قسمت <head> فایل خود را مانند مثال زیر لینک می کنیم .

در تگ ایجاد شده لینک ، حتماً باید rel برابر با stylesheet باشد . در غیر این صورت css شما کار نخواهد کرد .

در قسمت دوم هم ، type یا همان نوع ، باید به شکل text/css باشد .

در قسمت سوم هم باید آدرس محل فایل css خود را با استفاده از href وارد کنیم .

پس تا اینجا یاد گرفتیم چطور فایل استایل css را به سند خود متصل کنیم .

ساختار دستوری CSS :

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

برای مثال در تصویر فوق ، ما میخاهیم تگ های h1 موجود در سند html مان را مقدار دهی کنیم .

برای این کار ، سلکتور خود را می نویسیم و سپس جلوی آن ، ویژگی و مقدار را وارد می کنیم .

به مثال زیر توجه کنید :

h1{
color: blue;
font-size:12px;
}

سعی کنید نظم را در کد نویسی خود رعایت کنید .

در مثال بالا ، در خط اول سکتور h1 را وارد کردیم .

برای نوشتن مشخصات آن باید عبارت مشخصات را داخل { } قرار دهیم .

سپس در خط سوم خصوصیت رنگ را مشخص کردیم . نوشتن خصوصیت بدین شکل است که شما ابندا خصوصیت را نوشته و جلوی آن علامت : دو نقطه را قرار می دهید و مقدار را جلوی آن نوشته و با ; به خصوصیت خود پایان می دهید .

مقدار : خصوصیت;

font-family : tahoma ;

color : #fff ;

padding : 2 px ;

در درس های بعدی با تمامی خصوصیات و مقادیر آنها آشنا خواهید شد .

با این نکته درس اول رو به انتهای می رسانم .

سلکتور ها در css سه نوع هستند : تگ ها ، ID ها و class ها .

تگ ها که مشخص هستند ، تگ های عمومی سند html هستند ، مانند body – p – h1 – h2 – h3 .

id ها ، همان id هایی هستند که در سند html به المان ها نسبت دادید .

class ها هم ، نام کلاس هایی هستند که به المان های html نسب داده اید .

برای درک بهتر ، به مثال زیر توجه کنید :

<p> بیاموزید و آموزش دهید </p>