منو سایت

آموزش HTML CSS (پروژه گرا)

 تاریخ انتشار :
/
  وبلاگ
آموزش HTML CSS (پروژه گرا)

HTML و CSS دو چیز کاملا متفاوت هستند (نمی توان گفت دو زبان برنامه نویسی هستند!). نشانه گذاری (کد) و نحو یا ترتیبی که کد در آن نوشته می شود منحصر به فرد است. یک تفاوت مهم بین این دو وجود دارد. شما می توانید HTML را به عنوان ساختار صفحه در نظر بگیرید، CSS همچنین به HTML استایل می دهد.

HTML مخفف HyperText Markup Language و CSS مخفف Cascading Style Sheets است.

در واقع، برای آشنایی با مفهوم جداسازی محتوا از سبک با HTML و CSS، CSS Zen Garden را بررسی کنید.

پیش از این، این سایت یکی از اولین نمونه هایی بود که نشان داد رابطه بین HTML و CSS چقدر قوی است. همچنین، هنگام بررسی طراحی سایت های دیگر، به یاد داشته باشید که هر طراحی دقیقاً از همان HTML استفاده می کند! تنها چیزی که از طرحی به طراحی دیگر متفاوت است، فایل CSS است.

همانطور که کد پیچیده تر می شود، مهم است که بین این دو تمایز قائل شوید. در قسمت بعدی این تفاوت ها را در قالب یک قطعه کد توضیح خواهیم داد.

یک فایل جدید ایجاد کنید

مرحله ی 1

یک فایل جدید به نام “style.css” ایجاد کنید و آن را در همان پوشه ای که فایل HTML خود دارید ذخیره کنید. فرض کنید شما قطعه HTML را در زیر هدر index.html ذخیره کرده اید و به نظر می رسد:

<глава>

این عنوان صفحه من است.

<тяло>

این یک مورد سرفصل 1 است

سلام دنیا، این یک پاراگراف ساده است.

پیوند دادن فایل های HTML و CSS

مرحله دوم

حتی قبل از نوشتن کد CSS، باید به HTML خود بازگردید. برای پیوند فایل html و فایل css باید یک خط جدید بنویسید. فایل HTML خود را باز کنید. خط کد مشخص شده زیر (خط 5) را به بخش اضافه کنید از سند شما نتیجه باید به این صورت باشد:

<глава>

این عنوان صفحه من است.

<тяло>

این یک مورد سرفصل 1 است

سلام دنیا، این یک پاراگراف ساده است.

این خط کد فایل CSS جدید را به فایل HTML شما پیوند می دهد. در واقع اگر بخواهیم آن را تحلیل کنیم باید بگوییم: ویژگی href در واقع لینک نسبی فایل css را مشخص می کند. مطمئن شوید که فایل style.css در همان پوشه فایل index.html شما قرار دارد. ویژگی rel به مرورگر می گوید که این یک شیوه نامه است. ویژگی type همچنین به مرورگر می گوید که این فایل که با کد مرتبط است باید به صورت سینتکس CSS تفسیر شود.

درک نحو CSS

مرحله 3

حالا به CSS واقعی. اولین کاری که باید انجام دهید؛ این برای تغییر متن پاراگراف به رنگ دیگری است. بنابراین باید این قطعه را در فایل style.css خود تایپ یا جایگذاری کنید:

p { رنگ: آبی; }

این با کد موجود در فایل HTML ما متفاوت به نظر می رسد زیرا نحو متفاوتی دارد. من مقداری فاصله و فضای خالی به این کد اضافه می کنم:

پ {

رنگ آبی؛

}

هر دو مثال بالا تا آنجا که به مرورگر شما مربوط می شود دقیقاً مشابه هستند. اما توسعه دهندگان معمولاً CSS را برای جداسازی بصری سبک ها مانند مثال زیر می نویسند. زمانی که فایل‌های CSS شما شروع به جمع‌آوری صدها سبک مختلف می‌کنند، این کار مفید خواهد بود و همچنین به شما کمک می‌کند تا معنای نحو را بهتر درک کنید:

مجموعه قوانین

تمام متن بالا از نظر فنی یک مجموعه قوانین یا همان قانون نامیده می شود و به چندین بخش مختلف تقسیم می شود:

انتخابگر-اعلام بلوک

در این مجموعه قوانین خاص، می‌توانیم p را انتخابگر بنامیم. (این عنصر قسمت HTML مربوطه را انتخاب می کند. p{} در فایل HTML ما انتخاب می کند

.

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

اعلام

یک اعلان در بلوک اعلان ما وجود دارد: رنگ: آبی. اعلان ها جفت نام-مقدار هستند (درست مانند ویژگی های HTML). در اینجا نام اعلان “color” و مقدار “آبی” است. شما باید نام و مقدار را با دونقطه (:) جدا کنید و اعلان را با نقطه ویرگول (;) پایان دهید.

مرحله 4

ما مجموعه جدیدی از قوانین را برای تغییر رنگ عنوان اضافه می کنیم مانند:

پ {

رنگ آبی؛

}

h1 {

رنگ قرمز؛

}

اکنون، همانطور که در زیر در نسخه نمایشی مشاهده خواهید کرد، عنوان 1 باید قرمز و پاراگراف باید آبی باشد:

اسکرین شات 25/09/2013 در 16.14.15

بنابراین اکنون فایل CSS خود را ذخیره کنید و سپس به فایل HTML مربوطه در مرورگر خود نگاه کنید تا مطمئن شوید که فایل شما دقیقاً شبیه مثال بالا است.

آموزش های HTML ما

مبانی

نقطه معرفی

نقطه HTML چیست؟

نقطه ویرایشگرهای متن

نقطه اجزاء

نقطه برچسب ها

نقطه مشخصات

نقطه عناصر

نقطه قالب بندی

نقطه سرتیتر

نقطه پاراگراف

نقطه برچسب های عبارت

نقطه برچسب لنگر (پیوند)

نقطه تصویر

نقطه جدول

نقطه لیست

نقطه لیست مرتب شده/فهرست شماره گذاری شده

نقطه فهرست نامرتب/لیست سطلی

نقطه بررسی وجود یا عدم وجود فایل

نقطه فهرست توضیحات/فهرست تعاریف

نقطه تشکیل می دهد

نقطه انواع ورود به فرم

نقطه شکل صفت

نقطه طراحی ظاهر

نقطه کلاس ها

نقطه شناسه ویژگی

نقطه قاب های توکار

نقطه جاوا اسکریپت

نقطه نظر/توضیح

نقطه مسیرهای فایل

نقطه عنصر اصلی

نقطه چیدمان / چیدمان

نقطه روش های چیدمان

نقطه واکنش پذیری

نقطه کد کامپیوتر

نقطه فاعل، موضوع

نقطه نمادها

نقطه Charset

نقطه رمزگذاری URL

ویژگی های

نقطه خصوصیات عمومی

نقطه ویژگی های رویداد ویندوز

برچسب ها

نقطه مشاهده برچسب ها

نقطه تگ های HTML5

نقطه برچسب

نقطه لنگر

نقطه تگ abbr

نقطه برچسب مخفف

نقطه برچسب آدرس

نقطه برچسب اپلت

نقطه تگ html

نقطه عنوان صفحه

نقطه برچسب بدن

نقطه عناوین

نقطه پاراگراف

نقطه برچسب شماره

نقطه برچسب ساعت

نقطه برچسب ب

نقطه برچسب bdi

نقطه برچسب bdo

نقطه برچسب نقل قول

نقطه برچسب نقل قول

نقطه برچسب کد

نقطه برچسب قطعه

نقطه تگ dfn

نقطه آنها را تگ کنید

نقطه برچسب i

نقطه برچسب متر

نقطه نقل قول

نقطه برچسب یاقوت سرخ

نقطه برچسب var

نقطه برچسب منطقه ای

نقطه برچسب بوم

نقطه تگ div

HTML5

نقطه معرفی

نقطه دستورالعمل استفاده

نقطه اجزای جدید

نقطه نقشه های گوگل

نقطه مفاهیم

نقطه مهاجرت

نقطه صدا

نقطه تصویر

منابع آموزشی اضافی

نقطه صفر تا صد فیلم آموزشی HTML

نقطه دانلود 8 بروشور HTML pdf

نقطه پیشتوف

نقطه 10 نکته مهم برای مبتدیان

آموزش های CSS ما

دستورات اساسی

نقطه معرفی

نقطه شروع به کار کنید

نقطه نحو

نقطه انتخابگرها

نقطه رنگ

نقطه زمینه

نقطه فونت ها

نقطه متن

نقطه اتصالات

نقطه لیست ها

نقطه جداول

جعبه مدل

نقطه جعبه مدل

نقطه لبه

نقطه پوشش

نقطه مرز

دستورات پیشرفته

نقطه کانتور

نقطه مکان نما

نقطه سرریز

نقطه بعد، ابعاد، اندازه

نقطه واحدها

نقطه چیدمان ظاهر

نقطه نمایش دادن

نقطه دید

نقطه موقعیت

نقطه لایه های

نقطه من دریانوردی هستم

نقطه هم ترازی

نقطه کلاس های شبه

نقطه عناصر شبه

نقطه انواع رسانه ها

نقطه جن

نقطه کدورت

نقطه انتخابگرهای تابع

ویژگی های Css3

نقطه مرز

نقطه رنگ

نقطه زمینه

نقطه شیب ها

نقطه سرریز متن

نقطه سایه در حال سقوط

نقطه تغییر شکل دو بعدی

نقطه تغییر شکل سه بعدی

نقطه انتقال

نقطه تصاوير متحرك

نقطه طرح چند ستونی

نقطه جعبه های انعطاف پذیر

نقطه فیلترها

نقطه پرسش رسانه

نقطه قوانین At

نقطه ویژگی های Css3

کاربردی

نقطه فیلم های آموزشی صفر تا صد css

نقطه دانلود 2 جزوه آموزشی css با فرمت pdf

آخرین کلمه

شما با موفقیت از مجموعه ای از قوانین در فایل CSS خود برای تغییر ظاهر عناصر در فایل HTML خود استفاده کرده اید. این پایه و اساس هر کاری است که برای ساختن وب سایت خود انجام خواهید داد. مطمئن شوید که کد شما کار می کند و برای درک ساختار آن وقت بگذارید.