آدرس کوتاه این صفحه : https://darkoobedu.ir/?p=2004
آموزش html و css پایه و اساس همه صفحات وب است. html ساختار یک صفحه را تعریف می کند، در حالی که CSS سبک آن را تعریف می کند. آموزش html و css آغازی برای همه مواردی هستند که باید برای ساخت اولین صفحه وب خود بدانید! هر دو را بیاموزید و شروع به ایجاد وب سایت های شگفت انگیز کنید.
منابع زیادی در اینترنت وجود دارد که به شما کمک می کند html و css را یاد بگیرید. تنها راهی که می توانید یاد بگیرید در واقع کدنویسی و انجام دادن است. به شما توصیه می کنیم که برخی از پروژه های شخصی خود را بسازید چرا که این بهترین روش برای یادگیری است و باعث اطمینان خاطر شما نسبت به یادگیری آن می شود.
لیست مطالب
صرف نظر از اینکه حرفه شما چیست، html و css مهارت های بسیار خوبی برای یادگیری و داشتن هستند. حتی اندکی آگاهی از این زبان ها می تواند تغییر بزرگی در حرفه شما ایجاد کند. درست مانند داشتن توانایی تکلم به یک زبان خارجی، این نوع مهارت تقریباً در همه مشاغل مفید است.
در ادامه چند دلیل وجود دارد که می توانید چند دقیقه از وقت خود را صرف درک بهتر وب سایت کنید. آموزش html و css شما را قادر می سازد تا:
آشنایی با ساختار و اساس html و css و نحوه استفاده از آنها برای ایجاد صفحات وب، مهارتی است که همیشه مفید واقع می شود. آنها ابزار مفیدی برای طراحان سایت و متخصصان دیگر هستند. به عنوان مثال، بازاریابان امروزی باید صفحات خود را بهینه، تحلیل و توسعه دهند و بسیاری از توابع مرتبط دیگر را نیز انجام دهند. بدون داشتن حداقل درک اساسی از html و یا css، دستیابی به بهترین نتیجه غیرممکن است.
امروزه تهیه یک الگو وب رایگان و ساخت وب سایت کاملاً آسان است. اما وب سایت شما شبیه بقیه خواهد بود! شما می توانید یک وب سایت ایده آل را خودتان ایجاد کنید مانند یک صفحه وب شخصی و منحصر به فرد. و برای انجام این کار نیازی به پرداخت هزینه دیگری ندارید!
برای شما که می خواهید به یک توسعه دهنده حرفه ای وب تبدیل شوید، دانش html و css لازم و ضروری است. در مورد اهمیت یادگیری این دو زبان از طراحان وب مجرب سوال کنید. فقط تعداد کمی از آنها می گویند که بدون آنها می توانید از پس زندگی برآیید و اکثریت قریب به اتفاق توصیه می کنند که استفاده از یکی یا هر دو را یاد بگیرید.
داشتن یک اصول اساسی، یادگیری زبان برنامه نویسی دیگری مانند JavaScript ، PHP، SQL و … را بسیار آسان می کند. و هرچه بیشتر بدانید، فرصت های شغلی بیشتری برای شما ایجاد خواهد شد.
مجموعه دارکوب با خوشحالی این نوید را به شما می دهد که شما می توانید با یادگیری مهارتهای html و css به تنهایی درآمد کسب کنید. در وب جستجو کنید و خودتان ببینید ده ها شغل مستقل html و css موجود را پیدا خواهید کرد. البته با افزودن مهارت های دیگر مانند JavaScript ، PHP، Photoshop و موارد دیگر به جعبه ابزار خود، می توانید درآمد بیشتری کسب کنید.
یادگیری html و css آسان است. از بین تمام زبان های برنامه نویسی، html و css آسان ترین زبان برنامه نویسی برای یادگیری هستند و برای شروع آموزش html و css نیازی به تحصیل در رشته های مربوط به کامپیوتر ندارید. به طور معمول، یادگیری علوم کامپیوتر به دلیل نحوه توضیح آن دشوار است.
نیازی نیست که یک زبان را یکباره یاد بگیرید، اما صرف حتی چند روز یادگیری درک ساختار اساسی به شما کمک می کند صفحه وب ساده خود را ایجاد کنید.
به احتمال زیاد، صفحه اول شما زیبا نخواهد بود (این مورد را با بیشتر مبتدیان خواهید داشت!)، اما مهم نیست. آیا جالب نیست که فقط آن را در وب قرار دهید و بدانید که می توانید این کار را انجام دهید؟ فقط به یادگیری و تمرین ادامه دهید تا به نتایج مورد نظر خود دست یابید.
مجموعه دارکوب در این مقاله یک دوره رایگان آموزش html و css از مبتدی تا پیشرفته را ارائه می دهد که برای شروع کار و همچنین برای رسیدن به سطح پیشرفته عالی است. با استفاده از دستگاه تلفن همراه هوشمند یا لپ تاپ خود مهارت های جدیدی را کسب کنید و اولین قدم ها را در راه موفقیت بردارید.
چه تازه کار باشید، چه بخواهید به دنیای طراحی وب بپردازید و چه یک مدیر وب سایت با تجربه برای بهبود مهارت های خود باشید، ما در مجموعه دوره های دارکوب آموزش های آنلاین متناسب با نیازهای طراحی وب شما را فراهم کرده ایم.
شما می توانید مستقیماً به بخش دوره های آموزشی ما رفته و اکنون آموزش html و css را شروع کنید. آموزش مبتدی تا پیشرفته اساتید مجرب این مجموعه فقط در عرض چند ساعت شما را از یک مبتدی به یک طراح حرفه ای وبسایت تبدیل می کند. برخلاف بسیاری از سایر آموزش html و css ، این مقاله یک راهنمای قدم به قدم است و نه یک مرجع طولانی و خسته کننده که اشتیاق شما را در یادگیری بیشتر می کند.
در این مقاله راهنمای قدم به قدم، سعی بر آن شده است تا اصول آموزش html و css و نحوه ساخت اولین وب سایت را به شما بیاموزد. این بدان معنی است که چگونه می توان یک صفحه html را چیدمان کرد، چگونه می توان متن و تصاویر را اضافه کرد، چگونه سرفصل ها و قالب بندی متن را اضافه کرد و همچنین چگونه از جداول استفاده کرد.
مجموعه دارکوب به شما این امکان را می دهد وب سایت جدید خود را در عرض چند ساعت و نه چند روز راه اندازی کنید. در حالی که بسیاری از سایت های موجود در اینترنت سعی در آموزش html و css با استفاده از بسیاری از نظریه های گیج کننده ذهن دارند، در عوض این آموزش به شما مهارت های عملی برای ساخت اولین سایت خود را متمرکز می کند.
هدف این است که به شما نشان دهد “چگونه” می توانید اولین صفحه وب خود را ایجاد کنید بدون اینکه کل آموزش را با تمرکز بیش از حد روی “چرا” ایجاد کنید.
در پایان این آموزش، شما می توانید دانش لازم برای ایجاد یک وب سایت اساسی را داشته باشید و امیدواریم که این امر به شما الهام بخشد تا با استفاده از راهنما های بعدی ما، بیشتر به دنیای html و css وارد شوید.
html زبان علامت گذاری استاندارد برای ایجاد صفحات وب است که ساختار یک صفحه وب را توصیف می کند و از یک سری عناصر تشکیل شده است که این عناصر html نحوه نمایش محتوا را به مرورگر می گویند.
عناصر html بر روی محتوایی از جمله “این یک عنوان است” ، “این یک پاراگراف است” ، “این یک پیوند است” و غیره برچسب گذاری می کنند. در حال حاضر، ما بر روی آموزش ساخت صفحات سایت و نه طراحی آن به شما، تمرکز خواهیم کرد. ابتدا یک مقدمه و تاریخچه از html را بازگو می کنیم و سپس به ساختار آن خواهیم پرداخت.
html برای اولین بار توسط تیم برنرز لی، رابرت کیلیاو و دیگران از سال 1989 ایجاد شد. html مخفف Hyper Text Markup Language است. Hypertext به این معنی است که سند حاوی پیوند هایی است که به خواننده اجازه می دهد به مکان های دیگر سند یا کلاً به سند دیگری بپردازد.
تا به امروز زبان html در 5 نسخه منتشر شده است که آخرین و پیشرفته ترین نسخه از آن به 5 html معروف است که در سال 2014 منتشر شده است. در 5 html و 3 css که جدید ترین نسخه های html و css هستند، ویژگی های بسیاری به آن ها اضافه شده که در نسخه های قبلی منسوخ شده و کار را برای طراحان سایت بسیار آسان تر و حرفه ای نموده است.
زبان نشانه گذاری راهی است که کامپیوترها برای کنترل نحوه پردازش و ارائه متن با یکدیگر صحبت می کنند. برای انجام کار با html از دو چیز استفاده می شود: برچسب ها و ویژگی ها. حال این سوال مطرح می شود که برچسب ها و ویژگی ها چه کاربردی در html دارند؟
برای پاسخ به این سوال در ابتدا باید بگوییم که برچسب ها و ویژگی ها اساس کار html هستند. آنها با هم کار می کنند اما عملکردهای مختلفی را انجام می دهند پس ارزش این را دارد که 2 دقیقه را برای تمایز این دو سرمایه گذاری کنید تا به طور کامل متوجه آن شوید و از بروز مشکلات جدی در آینده جلوگیری کنید.
از برچسب ها برای مشخص کردن شروع یک عنصر در html استفاده می شود و آنها معمولاً در براکت های زاویه ای محصور می شوند. یک مثال از برچسب: <h1>. برای عملکرد بهتر، باید بیشتر برچسب ها <h1> باز و بسته شوند </ h1>. ویژگی ها حاوی اطلاعات اضافی هستند. ویژگی ها به صورت یک برچسب باز شده و اطلاعات اضافی در داخل آنها قرار می گیرد.
حال می خواهیم آموزش html و css خود را با ذکر یک مثال آغاز کنیم. به مثال ساده html زیر توجه کنید و سپس هر یک از کد ها را به اختصار توضیح خواهیم داد.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
یک عنصر html توسط یک برچسب شروع، برخی از محتوا و یک برچسب انتهایی تعریف می شود. به عنوان مثال: <tagname> محتوا به اینجا می رود … </tagname>
در عنصر html همه چیز از برچسب شروع تا برچسب پایان است:
<h1> عنوان اول </ h1>
<p> پاراگراف اول </ p>
عناصر html را می توان تو در تو قرار داد (این بدان معنی است که عناصر می توانند عناصر دیگری را نیز شامل شوند). تمام اسناد html از عناصر html تو در تو تشکیل شده اند.
توجه کنید که برخی از عناصر html فاقد محتوا هستند. (مانند عنصر <br>) به این عناصر، عناصر خالی گفته می شود. عناصر خالی برچسب پایانی ندارند!
هدف یک مرورگر وب (Chrome ، Edge ، Firefox ، Safari) خواندن اسناد html و نمایش صحیح آنها است. یک مرورگر برچسب های html را نمایش نمی دهد، اما از آنها برای تعیین نحوه نمایش سند استفاده می کند.
در شماتیک زیر تجسم ساختار کلی صفحه html آورده شده است:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
توجه کنید که فقط محتوای داخل بخش <body> (قسمت سفید بالا) در یک مرورگر نمایش داده می شود.
یک ویرایشگر متن ساده تمام چیزی است که شما برای یادگیری html نیاز دارید. شما می توانید با استفاده از Notepad یا TextEdit HTML آموزش html و css را فرا بگیرید. صفحات وب را می توان با استفاده از ویرایشگر های حرفه ای html ایجاد و یا اصلاح نمود.
با این حال، برای آموزش html و css ما یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه می کنیم. ما معتقد هستیم که استفاده از یک ویرایشگر متن ساده روش خوبی برای آموزش html و css است.
مراحل زیر را دنبال کنید تا اولین صفحه وب سایت خود را با Notepad یا TextEdit ایجاد کنید.
اگر با ویندوز 8 یا بالاتر کار می کنید، صفحه شروع را باز کنید (نماد پنجره در پایین سمت چپ روی صفحه). دفترچه یادداشت(Notepad) را تایپ کنید.
اگر بر روی سیستم شما ویندوز 7 یا قبل از آن نصب است، می توانید با دستورالعمل زیر اقدام کنید.
Start > Programs > Accessories > Notepad
Finder> Applications> TextEdit
همچنین برخی تنظیمات برگزیده را تغییر دهید تا برنامه بتواند به درستی فایل ها را ذخیره کند. در تنظیمات با آدرس زیر عمل کنید.
Preferences > Format > انتخاب کردن “Plain Text”
سپس در بخش ” Open and Save” ، کادر ” Display HTML files as HTML code instead of formatted text ” را علامت گذاری کنید.
سپس یک سند جدید برای کدنویسی باز کنید.
شما می توانید کد html زیر را در Notepad بنویسید یا کپی کنید.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
پرونده را در کامپیوتر خود ذخیره کنید. File> Save as را از فهرست Notepad انتخاب کنید.
نام پرونده را “index.htm” بگذارید و کدگذاری را روی UTF-8 تنظیم کنید (که رمزگذاری ارجح برای پرونده های html است).
نکته قابل توجه این است که شما می توانید از .htm یا .html به عنوان پسوند پرونده استفاده کنید. هیچ تفاوتی در هر یک وجود ندارد و کاملا سلیقه ای است و به شما بستگی دارد.
فایل html ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی پرونده دوبار کلیک کنید، یا کلیک راست کرده و ” Open with” را انتخاب کنید). نتیجه بسیار شبیه به عکس زیر خواهد بود:
در این فصل از آموزش html و css برخی از مثالهای اساسی html را نشان خواهیم داد.
اگر ما از برچسب هایی استفاده می کنیم که شما هنوز در مورد آنها یاد نگرفته اید نگران نباشید. چرا که در ادامه شرح خواهیم داد.
اعلامیه <!DOCTYPE html> نوع سند را نشان می دهد و به مرورگرها برای نمایش صحیح صفحات وب کمک می کند. این اعلامیه فقط یک بار باید در بالای صفحه (قبل از هرگونه برچسب html) ظاهر شود و به حروف کوچک و بزرگ حساس نیست.
اعلامیه <!DOCTYPE html> برای HTML5 به شرح زیر است:
<!DOCTYPE html>
<h1> مهمترین عنوان را تعریف می کند و <h6> کمترین عنوان را تعریف می کند. به عنوان مثال:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<a href=”https://www.w3schools.com”>This is a link</a>
<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>
در آموزش html و css می توان گفت که همه عناصر html می توانند ویژگی داشته باشند. ویژگی ها اطلاعات بیشتری در مورد عناصر ارائه می دهند و همیشه در برچسب شروع مشخص می شوند.
<img src=”img_girl.jpg”>
برای تعیین URL در ویژگی src به دو روش وجود دارد:
نکته: تقریباً همیشه بهتر است از URL های نسبی استفاده کنید. چرا که در صورت تغییر دامنه، آنها از بین نمی روند.
<img src=”img_girl.jpg” width=”500″ height=”600″>
<img src=”img_girl.jpg” alt=”Girl with a jacket”>
<p style=”color:red;”>This is a red paragraph.</p>
<!DOCTYPE html>
<html lang=”en”>
<body>
…
</body>
</html>
<p title=”I’m a tooltip”>This is a paragraph.</p>
استفاده از عناوین برای نشان دادن ساختار سند مهم است. موتورهای جستجو از عناوین برای فهرست بندی ساختار و محتوای صفحات وب شما استفاده می کنند. از عناوین <h1> باید برای عناوین اصلی استفاده شود و به دنبال آن عناوین <h2> و سپس از <h3> با اهمیت کمتری و غیره استفاده شود.
توجه کنید که از عناوین HTML فقط برای عنوان استفاده کنید. از عنوان برای بزرگ یا بزرگ نوشتن متن استفاده نکنید.
<h1 style=”font-size:60px;”>Heading 1</h1>
یک پاراگراف همیشه از یک خط جدید شروع می شود و معمولاً یک متن است. عنصر html <p> یک پاراگراف را تعریف می کند. یک پاراگراف همیشه از یک خط جدید شروع می شود و مرورگرها قبل و بعد از یک پاراگراف به طور خودکار فضای سفید (حاشیه) اضافه می کنند.
شما نمی توانید مطمئن باشید که html چگونه نمایش داده می شود. صفحات بزرگ یا کوچک و اندازه پنجره ها نتایج متفاوتی را ایجاد می کنند. با html ، نمی توانید صفحه نمایش را با افزودن فضاهای اضافی یا خطوط اضافی در کد html تغییر دهید. هنگام نمایش صفحه ، مرورگر به طور خودکار فضاها و خطوط اضافی را حذف می کند:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
آیا تا به حال پیش آمده است که یک صفحه وب را دیده باشید و از خود بپرسید آنها چگونه این کار را انجام داده اند؟ حال به شما خواهیم گفت که چگونه می توانید کد منبع html صفحه را مشاهده نمایید.
شما می توانید در یک صفحه html کلیک راست کرده و ” View Page Source” (در Chrome) یا ” View Source ” (در Edge) یا موارد مشابه را در مرورگرهای دیگر انتخاب کنید. با این کار پنجره ای حاوی کد منبع html صفحه باز می شود.
روی یک عنصر (یا یک قسمت خالی) کلیک راست کنید و “Inspect” یا “Inspect Element” را انتخاب کنید تا ببینید از چه عناصری تشکیل شده اند (شما هر دو html و css را خواهید دید). همچنین می توانید در پنل Elements یا Styles که باز می شود، html و یا css را ویرایش کنید.
css مخفف Cascading Style Sheets است و زبانی است که برای سبک سازی ارائه بصری صفحات وب استفاده می شود. css زبانی است که به مرورگرها می گوید چگونه بخش های مختلف یک صفحه وب را ارائه دهند.
هر مورد یا عنصر در یک صفحه وب بخشی از سندی است که به زبان نشانه گذاری نوشته شده است. در بیشتر موارد، html زبان نشانه گذاری است، اما زبان های دیگری مانند xml نیز در حال استفاده هستند. در سراسر این مقاله ما از html برای نشان دادن css در عمل استفاده خواهیم کرد، فقط به خاطر داشته باشید که اگر با xml یا زبان علامت گذاری دیگری کار می کنید، همان اصول و روش ها اعمال می شود.
اولین چیزی که باید هنگام نزدیک شدن به مبحث css در آموزش html و css درک کنید، این است که چه موقع باید از یک زبان سبک مانند css استفاده کنید و چه زمانی از یک زبان نشانه گذاری مانند html استفاده کنید.
تمام محتوای مهم وب سایت باید با استفاده از یک زبان نشانه گذاری مانند html به وب سایت اضافه شود. ارائه محتوای وب سایت باید توسط یک زبان سبک مانند css تعریف شود.
پست های وبلاگ، عنوان صفحه، فیلم، صدا و تصاویر که بخشی از ارائه صفحه وب نیستند، همه باید با html به صفحه وب اضافه شوند. تصاویر و رنگ پس زمینه، حاشیه ها، اندازه قلم، تایپوگرافی و موقعیت موارد در یک صفحه وب باید توسط css تعریف شوند. ما در آموزش html و css تمام این ویژگی ها را به شما می آموزیم.
ایجاد این تمایز از اهمیت زیادی برخوردار است زیرا عدم استفاده از زبان مناسب می تواند ایجاد تغییرات در وب سایت را در آینده دشوار کرده و با استفاده از یک مرورگر فقط متن یا صفحه خوان، مشکلات دسترسی و قابلیت استفاده را برای بازدیدکنندگان وب سایت ایجاد کند.
css برای تعریف سبک ها در صفحات وب سایت شما از جمله طراحی، طرح و تغییرات در صفحه نمایش برای دستگاه های مختلف و اندازه صفحه استفاده می شود.
html هرگز دربردارنده برچسب هایی برای قالب بندی یک صفحه وب نبود و برای توصیف محتوای یک صفحه وب ایجاد شده است.
وقتی برچسب هایی مانند <font> و ویژگی های رنگ به مشخصات html 3.2 اضافه شدند، کابوسی برای توسعه دهندگان وب آغاز شد چرا که توسعه وب سایت های بزرگ، جایی که قلم ها و اطلاعات رنگی به هر صفحه اضافه می شد، به یک فرآیند طولانی و گران تبدیل شد.
برای حل این مشکل، کنسرسیوم شبکه جهانی وب css را ایجاد کرد.
css قالب بندی استایل را از صفحه html حذف کرد همچنین css باعث صرفه جویی در کار زیادی می شود. تعاریف استایل به طور معمول در پرونده های css خارجی ذخیره می شوند.
جالب است که شما می توانید با استفاده از یک فایل شیوه نامه خارجی، فقط با تغییر یک فایل می توانید ظاهر یک وب سایت را تغییر دهید. در ادامه آموزش html و css با انتخابگرهای css و خصوصیات css بیشتر آشنا خواهید شد. پس با ما همراه باشید.
یک مجموعه قانون css از یک انتخابگر و یک بلوک اعلان تشکیل شده است:
انتخابگرهای CSS یا selector برای “یافتن” (یا انتخاب) عناصر html مورد نظر جهت سبک سازی استفاده می شوند. ما می توانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:
در این قسمت اساسی ترین انتخاب کنندگان CSS را توضیح خواهیم داد.
انتخابگر عنصر عناصر html را بر اساس نام عنصر انتخاب می کند. به عنوان مثال در اینجا، همه عناصر <p> صفحه با رنگ متن قرمز تراز وسط قرار می گیرند:
p {
text-align: center;
color: red;
}
انتخابگر شناسه از ویژگی id یک عنصر html برای انتخاب یک عنصر خاص استفاده می کند. شناسه یک عنصر در یک صفحه منحصر به فرد است، بنابراین از شناسه برای انتخاب یک عنصر منحصر به فرد استفاده می شود.
برای انتخاب یک عنصر با شناسه خاص، یک کاراکتر هشتگ (#) و بعد از آن شناسه عنصر را بنویسید. به عنوان مثال قانون CSS زیر برای عنصر html با id = “para1” اعمال می شود:
#para1 {
text-align: center;
color: red;
}
انتخابگر کلاس عناصر html را با یک ویژگی کلاس خاص انتخاب می کند. برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر period (.) و سپس نام کلاس را بنویسید. در این مثال، تمام عناصر html با class = “center” قرمز و تراز وسط قرار می گیرند:
.center {
text-align: center;
color: red;
}
همچنین می توانید تعیین کنید که فقط عناصر خاص html تحت تأثیر یک کلاس قرار گیرند. در این مثال فقط عناصر <p> با کلاس = “center” تراز وسط قرار می گیرند:
p.center {
text-align: center;
color: red;
}
عناصر html همچنین می توانند به بیش از یک کلاس اشاره کنند. در این مثال عنصر <p> مطابق با class = “center” و به class = “large” مدل خواهد شد:
<p class=”center large”>This paragraph refers to two classes.</p>
انتخابگر جهانی (*) همه عناصر html موجود در صفحه را انتخاب می کند. در این مثال قانون CSS زیر بر روی هر عنصر html موجود در صفحه تأثیر می گذارد:
* {
text-align: center;
color: blue;
}
انتخابگر گروه بندی، تمام عناصر html را با همان تعریف سبک انتخاب می کند. به کد CSS زیر نگاه کنید (عناصر h1 ، h2 و p تعریف یکسانی دارند):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
برای به حداقل رساندن کد، بهتر است گروهی را انتخاب کنید. برای گروه بندی انتخابگرها، هر انتخابگر را با کاما جدا کنید. در این مثال ما انتخاب کنندگان را از کد بالا گروه بندی کرده ایم:
h1, h2, p {
text-align: center;
color: red;
}
هنگامی که یک مرورگر یک صفحه استایل را می خواند، سند html را با توجه به اطلاعات موجود در صفحه استایل ، قالب بندی می کند. سه روش برای قرار دادن CSS در یک صفحه استایل وجود دارد:
با استفاده از یک صفحه استایل خارجی، فقط با تغییر یک پرونده می توانید ظاهر یک وب سایت را تغییر دهید. هر صفحه html باید حاوی ارجاع به پرونده استایل خارجی در داخل عنصر <link>، در داخل بخش head باشد. به عنوان مثال استایل های خارجی در داخل عنصر <link> در داخل بخش <head> صفحه html تعریف می شوند:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
یک صفحه استایل خارجی می تواند در هر ویرایشگر متنی نوشته شود و باید با پسوند css ذخیره شود. پرونده خارجی .css نباید حاوی برچسب های html باشد. در اینجا شکل فایل “mystyle.css” به شرح زیر است:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
اگر یک صفحه html منحصر به فرد دارای یک استایل منحصر به فرد باشد، ممکن است از یک صفحه استایل داخلی استفاده شود. استایل داخلی در داخل عنصر <style>، در داخل بخش head تعریف شده است.
در این مثال استایل های داخلی در داخل عنصر <style> ، در داخل بخش <head> صفحه html تعریف می شوند:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
برای اعمال استایل منحصر به فرد برای یک عنصر، می توان از یک استایل درون خطی استفاده کرد. برای استفاده از استایل های درون خطی، ویژگی style را به عنصر مربوطه اضافه کنید. ویژگی style می تواند شامل هر خاصیت CSS باشد. در این مثال استایل های درون خطی در ویژگی “style” از عنصر مربوطه تعریف می شوند:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>
</body>
</html>
در آموزش html و css وقتی بیش از یک استایل برای یک عنصر html مشخص شده باشد، از چه استایلی استفاده می شود؟
با توجه به قوانین زیر، که در آن شماره یک دارای بالاترین اولویت است، تمام استایل های یک صفحه به یک صفحه استایل “مجازی” جدید تبدیل می شوند:
بنابراین ، یک استایل درون خطی دارای بالاترین اولویت است و استایل های خارجی و داخلی و پیش فرض های مرورگر را نادیده می گیرد.
رنگ ها با استفاده از نام های رنگی از پیش تعریف شده یا مقادیر RGB ، HEX، HSL،RGBA ، HSLA مشخص می شوند.
در CSS می توان یک رنگ را با استفاده از یک نام رنگ از پیش تعریف شده تعیین کرد. CSS / html از 140 نام استاندارد رنگ پشتیبانی می کند.
شما می توانید رنگ پس زمینه را برای عناصر html تنظیم کنید:
<h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>
شما می توانید رنگ متن را برای عناصر html تنظیم کنید:
<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>
شما می توانید رنگ حاشیه ها را تنظیم کنید:
<h1 style=”border:2px solid Tomato;”>Hello World</h1>
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border:2px solid Violet;”>Hello World</h1>
در CSS، رنگ ها را می توان با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA نیز تعیین کرد:
<h1 style=”background-color:rgb(255, 99, 71);”>…</h1>
<h1 style=”background-color:#ff6347;”>…</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>…</h1>
در این مثال، هم ویژگی background-color و هم مشخصه color را تعریف می کنیم:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
خصوصیات فونت های CSS خانواده قلم ، پررنگ بودن ، اندازه و سبک متن را تعریف می کند.
در CSS، دو نوع نام خانوادگی فونت وجود دارد:
خانواده عمومی – گروهی از خانواده های فونت با ظاهری مشابه (مانند “Serif” یا “Monospace”)
خانواده فونت – یک خانواده فونت خاص (مانند “Times New Roman” یا “Arial”)
خانواده فونت یک متن با ویژگی font-family تنظیم می شود. ویژگی font-family باید چندین نام فونت را به عنوان یک سیستم “fallback” نگه دارد. اگر مرورگر از فونت اول پشتیبانی نمی کند، فونت بعدی را امتحان می کند و موارد دیگر.
با فونت مورد نظر خود شروع کنید و با یک خانواده عمومی پایان دهید تا اگر هیچ فونت دیگری در دسترس نیست، به مرورگر اجازه دهید فونت مشابه را در خانواده عمومی انتخاب کند.
توجه کنید که اگر نام یک خانواده فونت بیش از یک کلمه باشد، باید در علامت های نقل قول باشد، مانند: “Times New Roman”. بیش از یک خانواده فونت در یک لیست جدا شده با ویرگول مشخص شده است.
به عنوان مثال فونت را برای سه پاراگراف مشخص می کنیم:
.serif {
font-family: “Times New Roman”, Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: “Lucida Console”, Courier, monospace;
}
در مثال زیر فونت فقط را برای یک پاراگراف مشخص شده است:
p.impact {
font-family: Impact, Charcoal, sans-serif;
}
در این مقاله آموزش html و css سعی بر آن شده است تا شما علاقمندان به طراحی وب را با مفاهیم اولیه و اساس کار با html و css آشنا نموده و در جهت رفع نیاز شما عزیزان به آموزش html و css از مبتدی تا پیشرفته کوشیده شده است.
این آموزش ها بخش مختصری از آموزش html و css بود که به دلایلی چون ذیغ وقت و همچنین خسته کننده نشدن آموزش html و css، ادامه آموزش های این مقاله و سطح پیشرفته آن در قالب دوره های فشرده آموزش html و css از مبتدی تا پیشرفته در قالب فایل های ویدیویی با تدریس اساتید مجرب و حرفه ای در مجموعه دارکوب در اختیار شما عزیزان قرار گرفته است. شما می توانید با تهیه این فایل های آموزشی از یک علاقمند طراح وب سایت به یک طراح وب حرفه ای تبدیل شوید. موفقیت شما عزیزان آرزوی ما است.
