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 باید قرمز و پاراگراف باید آبی باشد:

بنابراین اکنون فایل 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 خود استفاده کرده اید. این پایه و اساس هر کاری است که برای ساختن وب سایت خود انجام خواهید داد. مطمئن شوید که کد شما کار می کند و برای درک ساختار آن وقت بگذارید.