سرخط خبرها
خانه > آموزش > کامپیوتر > طراحی وب > آموزش جامع CSS از مقدماتی تا پیشرفته – درس ۱

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

 

تصویر محیط کد نویسی css

 

سلام .

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

 

 

notepad4ever

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

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

پس از نصب برنامه حال می توانیم شروه به نوشتن 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 : 

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

برای مثال در تصویر فوق ، ما میخاهیم تگ های 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 باشد را فرامی خوانیم .

در خط سوم هم مانند خط دوم است . منتهی فرق کلاس و ای دی را در جلسه بعد خدمت شما عرض می کنم .

خسته نباشید تا جلسه آینده .

مرسی با من همراه بودین .

درباره ی بیاموزید دات کام

کارشناس گرافیک و طراح وب ، کارشناس تحقیقات بازار و بازاریابی . مدیریت محتوی رو از سال 1384 شروع کردم . وب سایت شخصی من : amin-bahrami.com

۲ دیدگاه

  1. با تشکر از مطلب خوبتون

پاسخ دهید

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

10 + بیست =