سلام .
به اولین جلسه آموزش جامع 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> فایل خود را مانند مثال زیر لینک می کنیم .
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.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>
<div id=”paragraph”> بیاموزید و آموزش دهید .</div>
<div class=”paragraph”>بیاموزید و آموزش دهید <div>
خط اول از تگ عمومی استفاده شده . میتوان آنرا در css بصورت عمومی تنظیم کنیم .
خط دوم برای یم تگ دیو id تعریف شده . اگر بخاهیم استایلی به آن تگ نسبت بدهیم ، در فایل css سلکتور این id را که paragraph باشد را فرامی خوانیم .
در خط سوم هم مانند خط دوم است . منتهی فرق کلاس و ای دی را در جلسه بعد خدمت شما عرض می کنم .
خسته نباشید تا جلسه آینده .
مرسی با من همراه بودین .
با تشکر از مطلب خوبتون
خواهش می کنم