- مقدمه
- ابزار مورد نیاز
- لینک دانلود
- نحوه ساخت فایل html
- نحوه ساخت فایل html در VS Code
- شروع HTML
- ساختار استاندار فایل HTML
- فرم اصلی فایل HTML
- تگ p
- نحوه تغییر عنوان صفحه
- محیط های کدنویسی وب
- تگ های heading
- تگ های brو hr
- کامنت گذاری
- تگ های bو i
- برخی از تگ های معناگرا
- تگ های supو sub
- لینک
- عکس
- لیست ها
- جدول
- تفاوت تگ های inline و block
- فرم
- فیلم
- صدا
- تگ های داخل تگ head
- یک سری نکته
- شروع css
- راه اهای نوشتن کد css
- selector
- رنگ پس زمینه
- استایل دادن
- کامنت گذاری در css
- زنگ ها در css
- عرض و ارتفاع در css
- بوردر
- استایل های متن
- حاشیه
- استایل دادن به وضعیت های مختلف یک لینک
- گوشه گرد
- تغییر بولت لیست ها
- استایل دادن به جدول ها
- outline
- تبدیل تگ block به inline و برعکس
- overflow
- position
- تغییر ترتیب تگ ها
- شناور کردن تگ ها
- وضوح
- سایه
- وسط قرار دادن تگ ها
- فونت صفحات وب
- عکس پس زمینه
- گرادینت
- انتقال استایل
- اندازه تگ هایی که عرض و ارتفاع مشخص دارند
- حذف کردن استایل های مرورگر ها
- فرق jpg و png
- فایل بندی پروژه
- نکات تکمیلی
- تراز بندی عمودی
- لوگو تب مرورگر
- اضافه کردن فایل css به هم
- اولین و آخرین فرزند
- ایده یابی
- فونت آیکن
- after & before
- not
- منو بازشونده با html & css
- ریسپانسیو
- تنظیم حالت چاپ
- grid بندی
- flexbox
🔰HTML
(Hyper Text Markup Language)
(زبان نشانه گذاری ابرمتن)
ساختار و اسکلت بندی:bone: صفحهی وب است.
آخرین نسخه HTML5 ،HTML است.
زبان HTML زبان برنامه نویسی نیست، بلکه زبان نشانه گذاری و تگ گذاری است.
🔰CSS
(Cascading Style Sheets)
(برگه های سبک آبشاری)
آخرین نسخه CSS3 ،CSS است.
زبان CSS زبان برنامه نویسی نیست بلکه مکمل فوقالعاده:boom: برای HTML است.
- مرورگر (Firefox, chrome, opera,…)
- محیط کدنویسی (Visual Studio Code, php storm,…)
نحوه فهمیدن اینکه ویندوزمان چند بیتی است
- به my computer می رویم.
- روی بخش خالی صفحه راست کلیک کرده و روی گزینه properties کلیک می کنیم.
- مقدار system type نشان می دهد سیستم:computer: شما چند بیتی است.
- به محل و جایی:file_folder: که می خواهیم سند:pencil: را قرار دهیم می رویم.
- راست کلیک و new و در نتیجه Text Document کلیک:computer_mouse: کنیم.
- و سپس تغییر اسم و پسوند می دهیم (NAME.html, NAME.htm).
- روی yes:white_check_mark: کلیک می کنیم.
📌بهتر است از پسوند .html استفاده کنیم.
نمایش پسوند فایل ها
- بالا صفحه سربرگ view می رویم.
- روی option کلیک می کنیم یا توی start سرچ می کنید folder option.
- به سربرگ view رفته و تیک:ballot_box_with_check: Hide extensions for known file types بر می داریم.
تغییر مرورگر پیش فرض
- کلیک راست روی برنامه و open with را می زنیم.
- و روی choose another app کلیک:computer_mouse: می کنیم.
- مرورگر مورد نطر را انتخاب کرده و تیک always use this app to open .html files بزنید و روی ok:ok_hand: کلیک کنید.
- نوشتن کد های html تو محیط کدنویسی است.
- نمایش نتیجه در مرورگر می باشد.
- محیط VS Code را باز می کنیم.
- روی file، open folder:open_file_folder: می زنیم و به محلی که می خواهیم می رویم و select folder می زینم.
- از sidebar به explore می رویم و روی new file کلیک کنیم (از طریق دکمه بالا یا راست کلیک روی sidebar).
- و سپس تغییر اسم و پسوند:page_with_curl: می دهیم (NAME.html, NAME.htm).
در HTML با تگ های کار می کنیم.
- <>
تگ باز
Opening tag - </>
تگ بسته
Closing tag
📌بین <> Element name قرار می گیرد.
📌در بین تگ باز و بسته محتوا یا content قرار می گیرد.
📌بعضی از تگ ها تگ باز و بسته دارند، بعضی ها ندارند.
📌تگ ها می توانند تو در تو استفاده شوند.
<html>
<head>
</head>
<body>
</body>
</html>
📌تگ های داخل تگ head مربوط به تنظیمات صفحه هستند. 📌 تگ های داخل تگ body به کاربر نمایش داده می شوند.
تغییر اندازه فونت در VS Code
- به File Preferences Setting می رویم.
- از قسمت font size مقدار تغییر می دهیم.
راحت تر نوشتن تگ های در VS Code
در VS Code با نوشتن اسم تگ و فشار دادن دکمه tab تبدیل به تگ مورد نظر می شود.
html + press tab button => <html></html>
به مرورگر باید بگید دارید از چی استفاده می کنید پس در خط اول می نویسیم
<!DOCTYPE html>
📌دقت کنید که تگ فوق تگ بسته ندارد.
پس ساختار اصلی به فرم زیر می شود
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
paragraph => p
📍برای نوشتن پاراگراف از تگ فوق استفاده می کنیم.
📍 تگ p تگی است که کاربر می بیند، پس داخل تگ body نوشته می شود.
<p></p>
📣برای نوشتن متن طولانی حتما از تگ p استفاده کنید، همین طوری داخل سند ننویسید. شاید ظاهری فرق نکند ولی از نظر موتور جستجو خیلی فرق می دارد.
📣در محیط کد زنی هر چه قدر داخل تگ enter p و space اضافه بزنیم هیچ تغییری در ظاهر نمی بینید.
داخل تگ head می رویم و عبارت زیر رو می نویسیم:arrow_down:
<title>عنوان صفحه</title>
که بدین فرم در می آید
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
</head>
<body>
</body>
</html>
-
Text Editor
💠Notepad, sublime, VS Code, nano,... -
IDE
💠Php storm, web storm,...
📌با notepad هم می شود برای کار استفاده کرد ولی خیلی ساده است (و شایدم حوصله سر بر).
تگ های heading برای کاربر نمایش داده می شوند، پس داخل تگ body نوشته می شود .
که برای نوشتن عناوین از این تگ استفاده می شود.
تگ های h1, h2, h3, h4, h5, h6 را داریم که به ترتیب کوچک می شوند. (h1 بزرگتر از همه و h6 کوچکتر از همه است.)
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
🔻مثال
h1: بررسی گوشی
h2: مشخصات
h3: دوربین
h3: بدنه
این عنوان بندی برای موتور جستجو مهم است، به طوری که بیشترین اهمیت:100: به تگ h1 و کمتری اهمیت به h6 داده می شود.
حذف منوی اسکرول افقی در VS Code
- به سربرگ view می رویم.
- تیک toggle word wrap را می زنیم.
📌برای باز کردن یک فولدر داخل VS Code می توان آن را بگیریم و داخل محیط VS Code رها کنیم.
📌با کلیک روی دکمه های sidebar در VS Code مخفی یا نمایش داده می شود.
برای رفتن به خط بعدی از تگ br استفاده می کنیم.
برای کشیدن خط افقی در صفحه از تگ hr استفاده می کنیم.
📌تگ brو hr تگ بسته ندارد.
<br>
<hr>
🌚نمایش فایل html بدون فایل CSS در مرورگر های مختلف ممکن است فرق کند و آنم به خاطر استایل های پیش فرض مرورگر هاست که به تگ های می دهند.
کامنت ها همه جا کاربرد دارند وهمه جا هستند و هیچ تغییری در ظاهر ایجاد نمی کنند، صرفا برنامه نویس آن ها را می بینند.
<!-- TEXT -->
دلیل کامنت گذاری
- کامنت های برای مرور و توسعه بعدی توسط خودتات یا بقیه کاربرد دارند. (یادداشت و note)
- برای اینکه بخشی از کد رو نمایش ندهیم.
📌برای نمایش ندادن کد می توانیم آن را پاک کنیم ولی خیلی از جاها ممکن است دوباره به کد پاک شده نیاز پیدا کنیم، برای همین بهتر است بخش مدنظرمان را کامنت کنیم.
کامنت گذاری سریع در VS Code
هرجایی که خواستیم (اگه متنی می خواهید کامنت کنید، آن را انتخاب یا select کنید) ctrl را با / می زنید تا به کامنت تبدیل شود.
❗از تگ b برای بولد و ضخیم کردن متن استفاده می کنیم.
❗از تگ i برای ایتالیک و مورب کردن متن استفاده می شود.
<b></b>
<i></i>
تگ های فرمت دهی(مثل تگ bو i) رو می توان داخل تگ p یا به تنهایی استفاده کرد.
📌برای اینکه وسط متن راحت تگ بزارید متن موردنظر را cut کنید، بعدش تگ موردنظر باز و بسته کرده و متن رو داخل تگ جدید pate کنید.
اگر دو تا تگ پشت سرهم باز می شوند، مهم نیست کدام اول باز شود و کدام دوم ولی مهم است آن که که اول باز شده، آخر بسته شود و آن که دیرتر باز شده، زودتر بسته شود.
درست
<b><i></i></b>
غلط
<b><i></b></i>
📎تگ strong متن را بولد و ضخیم می کند و تگ معناگرا است.
📎تگ em متن را ایتالیک و مورب می کند و تگ معناگرا است.
📎تگ mark متن را هایلایت می کند و یک تگ معنادار است که به معنی این است که توجه کنید.
📎تگ del یک خط می کشد روی متن که معنادار بوده و به معنی این است که حذف شده و دیگر اعتبار ندارد.
📎تگ ins یک خط زیر متن می کشد که معنادار بوده و به این معنی است که این متن به تازگی اضافه شده است.
📎تگ blockquote یک تگ معناگرا است که برای نقل قول کردن استفاده می شود و از cite ،attribute برای قرار دادن لینک نقل قول استفاده می کنیم.
📎تگ q یک تگ معناگرا است که برای نقل قول استفاده می شود و در مرورگر داخل "" نمایش داده می شود.
📎تگ abbr برا اینکه بگویم کلمه مخفف یه کلمه دیگه است و از title ،attribute برای گفتن کلمه کامل آن استفاده می کنیم.
📎تگ address برای آدرس دادن (مکان، تلفن☎️، ایمیل📧، نام و ...) استفاده می شود.
📎تگ header برای هدر صفحه است.
📎تگ nav برای منو سایت است.
📎تگ section بخش بندی صفحه سایت است.
📎تگ article مقالات سایت است.
📎تگ aside سایدبار سایت است.
📎تگ footer فوتر سایت است
<strong></strong>
<em></em>
<mark></mark>
<del></del>
<ins></ins>
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
تگ معناگرا (semantic elements or tags) به موتور جستجو:mag: و مرورگر پیام می دهد که این متن مهم است و توجه کنید.
⚜️تگ sup برای بالا بردن متن (حالت توان) استفاده می شود.
⚜️تگ sub برای پایین آوردن متن (حالت اندیس) استفاده می شود.
<sup></sup>
<sub></sub>
لینک ها در HTML ما را از یک صفحه:page_facing_up: به صفحه:page_facing_up: دیگر می برند.
از تگ a برای ساخت لینک:paperclip: استفاده می کنیم.
برای کامل کردن لینک در داخل تگ باز a بعد از حرف a فاصله می زنیم و می نویسیم href=”ADRESS” که به آن attribute گفته می شود.(ADDRESS مسیری است که در نظر داریم که باید جایگزین شود.)
📎اگر آدرسی را نمی دانید به جاش # قرار دهید.
<a href=”https://google.com”>Click Me</a>
برای باز کردن لینک در صفحه جدید در attribute ها target=”_blank” قرار می دهیم که مقدار پیش فرض آن _self است.
<a href=”https://google.com” target=”_black”></a>
برای راهنما و گذاشتن یک متن که با نگه داشتن:point_up_2: روی لینک نمایش داده شود، باید در attribute های تگ a مقدار title=”TEXT” قرار دهیم.(TEXT متن مدنظر شما است که باید جایگزین شود.)
<a href=”https://google.com” title=”hello”></a>
برای رفتن به صفحه بعدی در لوکال و سیستم:computer: شخصی خودمان از طریق لینک کافی است در href آدرس فایل:file_folder: را بهش بدهیم.
<a href=”test.html”></a>
نحوه مسیردهی
برای رفتن یه فولدر یا پوشه:open_file_folder: جلو برای آدرس دهی فایل در لینک (مثلا اسم فایل mehdi) به صورت زیر عمل می کنیم.
برای رفتن یه فولدر یا پوشه:open_file_folder: عقب برای آدرس دهی فایل در لینک به صورت زیر عمل می کنیم.
از دو مورد فوق می توان باهم استفاده کرد.
با استفاده از لینک ها می توان به قسمت های مختلف همان صفحه نیز رفت، برای این کار کافی است به قسمتی که باید برود به تگش id:id: بدهیم و در قسمت href لینک "#اسم ای دی" را قرار دهیم.
<a href=”#part7”>Go to Seven</a>
<p id=”part7”></p>
ساخت لینک برای ایمیل:e-mail: زدن
<a href=”mailto:EMAILADDRESS></a>
(در کد بالا به جای EMAILADDRESS آدرس ایمیل مدنظر باید قرار بگیرید و جاگرین شود.)
ساخت لینک:link: به شماره تلفن:telephone_receiver:
<a href=”tel:PHONENUMBER”></a>
(در کد بالا به جای PHONENUMBER شماره تلفن مدنظر باید قرار بگیرید و جاگرین شود.)
برای قرار دادن عکس:city_sunset: در فایل html از تگ img استفاده می کنیم و از attribute، src برای مشخص کردن مسیر عکس اسنفاده می کنیم.
<img src=”ali.png”>
بعضی مواقع به دلیل سرعت نت یا پاک شدن عکس از روی سرور عکس نمایش داده نمی شود. برای همین از attribute، alt استفاده می کنیم تا در صورت عدم نمایش، آن متن نمایش داده شود.
<img src=”ali.png” alt=”can not show”>
حتما alt ،attribute استفاده کنید چون کاربر موضوع بفهمد و در عین حال برای موتور جستجو:mag: بسیار مهم است.
گرفتن لینک:link: عکس از اینترنت
روی عکس در مرورگرتان کلیک:computer_mouse: راست کرده و copy image location یا copy image link کلیک می کنیم.
حالا اگر آدرس عکسی که از نت گرفتید را در src قرار بدید، برای شما عکس در صفحه تان اگر به نت وصل باشید نمایش داده می شود.
💥بهتر است عکس ها را دانلود کرده و از لوکال خودتان آدرس دهی کنید.
برای مشخص کردن انداره عکس از width ،attribute برای عرض و height برای ارتفاع استفاده می کنیم.
واحد پیش فرض برای اندازه گیری:straight_ruler: پیکسل است.
اگر از یکی از width ،attribute یا height استفاده کنیم، عکس به یک نسبت بزرگ یا کوچک می شود.
📌لینک دادن به عکس
<a href=”ADDRESS” target=”NEW_PAGE_OR_NOT”><img src=”ADDRESS” alt=”TEXT”></a>
در HTML دو نوع لیست داریم
- Unordered list
- Ordered list
برای لیست نامرتب یا Unordered list از تگ ul استفاده می کنیم که برای هر آیتم از لیست از تگ li استفاده می شود.
<ul>
<li></li>
</ul>
برای تغییر شکلک ها در لیست ها از CSS استفاده می کنیم.
برای لیست مرتب یا ordered list از تگ ol استفاده می کنیم که برای آیتم ها از تگ li استفاده می کنیم.
<ol>
<li></li>
</ol>
برای تغییر عدد و شکلک پشت آیتم ها از type ،attribute در تگ ol استفاده می کنیم که شامل 1, a, A, i, I می شود و مقدار پیش فرض آن 1 است.
<ol type="i">
<li></li>
</ol>
از لیست ها می توان به صورت تو در تو نیز استفاده کرد.
<ul>
<li>Hello</li>
<li>
<ol>
<li>ali</li>
<li>reza</li>
</ol>
</li>
<li>bye</li>
<li>ali
<ul>
<li>ali</li>
<li>reza</li>
</ul>
</li>
</ul>
📌حتما فاصله و تو رفتگی ها داخل کدنویسی رعایت کنید.
مرتب سازی خودکار کد ها در VS Code
یکی از دو راه زیر را انجام دهید
- از روی صفحه کیبورد:keyboard: ctrl + shift + p را برنید و بعد بنویسید format document
- از روی صفحه کیبورد:keyboard: alt + shift + f را بزنید.
در HTML لیست توضیحی هم داریم ولی کاربردی نیست.
<dl>
<dt>Book</dt>
<dd>Something we read</dd>
<dt>TV</dt>
<dd>Something we watch</dd>
</dl>
🔔سعی کنید خودتان به سوالاتتان برسید و جواب بدید و هیچ کاری آسان نیست، پس اگر به مشکل می خورید تسلیم نشوید.
از تگ table برای کشیدن جدول استفاده می کنیم.
از تگ tr برای ساخت سطر و برای ساخت سلول از تگ td استفاده می کنیم.
برای ساخت header از تگ th استفاده می کنیم.
<table>
<tr>
<th>Name></th>
<th>Job</th>
</tr>
<tr>
<td>Alireza</td>
<td>programmer</td>
</tr>
</table>
🌟برای یکی کردن چند تا سلول که در یک ستون قرار دارد، در تگ td از rowspan=”NUMBER” ،attribute استفاده می کنیم و NUMBER تعداد سطر یکسان است.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
</table>
🌟برای یکی کردن چند تا سلول که در یک سطر قرار دارد، در تگ td از colspan=”NUMBER” ،attribute استفاده می کنیم و NUMBER تعداد ستون یکسان است.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
🌟از تگ caption بعد از تگ باز table برای توضیح دادن و عنوان جدول استفاده می کنیم.
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
به تگ هایی که کل یک سطر را آشغال می کنند تگ های block گفته می شود. مثل تگ p
به تگ هایی که کل یک سطر را اشغال نمی کنند تگ های inline گفته می شود مثل تگ b
تگ div برای دسته بندی:card_index_dividers: بود و تگ block است.
تگ span برای دسته بندی:card_index_dividers: بود و تگ inline است.
تگ form برای ساخت فرم استفاده می شود.
از تگ input برای گرفتن ورودی استفاده می شود که از type ،attribute برای تعیین نوع آن استفاده می کنیم که یک تگ inline است.
برای ساخت دکمه submit از کد زیر استفاده می کنیم.
<input type=”submit” value=”TEXTOFBUTTON”>
🧷(به جای TEXTOFBUTTON متنی که می خواهیم داخل دکمه نمایش داده شود را جایگزین می کنیم.)
به متن هایی که قبل از input قرار می دهیم label می گویند.
برای نوشتن label به طوری به که با کلیک روی متن input مدنظر انتخاب شود به صورت زیر عمل می کنیم
- یک تگ label باز و بسته کرده و در بین آن متن دلخواه مان را می نویسیم.
- از for ،attribute برای اسم دادن به label استفاده می کنیم.
- به تگ input متناظر همان اسمی که به for دادیم را به عنوان id قرار می دهیم.
<label for=”TEXT”>name: </label>
<input type=”text” id=”TEXT”>
از action ،attribute در تگ فرم برای فرستادن اطلاعات بعد از زدن دکمه submit استفاده می کنیم که نیاز به زبان برنامه نویسی مثل php, python, … است.
دیگر attribute تگ method ،form است که دو مقدار GET و POST می گیرد.
اگه مقدار target ،attribute در تگ form را مساوی _blank باشد، submit کد در صفحه جدید اتفاق می افتد.
فرم ها در حالت پیشفرض حالت autocomplete دارند یعنی متن های قبلی را برای کامل کردن متن به ما پیشنهاد می دهند که برای برداشتن در تگ form مقدار autocomplete ،attribute را مساوی off قرار می دهیم. همین اتفاق را با قرار داخل تگ input هم می توان رغم زد.
<form action="/action_page.php" method="post" autocomplete="off">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<input type="submit" value="Submit">
</form>
مقدار مرسوم type ،attribute
- text: متن
- password: رمز (کلمات معلوم نیست)
- submit: دکمه تایید و ارسال اطلاعات فرم
- reset: دکمه برای خالی کردن اطلاعات فرم
- email: برای گرفتن ایمیل (مثل متن است با این تفاوت که برای ایمیل نامعتبر خطا می دهد)
- number: فقط مقدار عددی می پذیرد
- url: برای ورودی گرفتن آدرس کامل
- color: برای گرفتن رنگ از کاربر
- file: برای آپلود فایل و گرفتن فایل از کاربر
- hidden: برای گرفتن و فرستادن اطلاعات که لازم نیست کاربر بداند مثل id کاربر
اگر مقدار type مساوی submit یا reset باشد با استفاده از value ،attribute می توان متن داخل دکمه را تغییر داد.
وقتی type=”number” باشد دو تا attribute دیگر هم می توانیم استفاده کنیم که min و max است که بازه عدد ورودی را مشخص می کند.
<input type="text">
<input type="password">
<input type="submit" value="TEXT">
<input type="reset" value="TEXT">
<input type="email">
<input type="number" min="NUMBER" max="NUMBER">
<input type="url">
<input type="color">
<input type="file">
<input type="hidden">
🧷(به جایی TEXT متنی می خواهید و به جای NUMBER عددی که مدنظرتان هست را قرار می دهید و جایگزین می کنید.)
از value ،attribute برای قراردهی اولیه فیلد ها استفاده می کنیم.
<input type="text" vlue="TEXT">
🧷(به جای TEXT متن مدنظرتان را جایگزین می کنید.)
اگه به تگ input readonly ،attribute بدهیم دیگه قابل تغییر نیست و فقط قابل کپی کردن است.
<input type="text" readonly>
اگه به input disable ،attribute بدهیم غیرفعال می شود و قابل کپی کردن نیست.
<input type="text" disable>
از size ،attribute برای مشخص کردن تعداد کاراکتر ورودی کاربر استفاده می کنیم.
<input type="text" size="NUMBER">
🧷(به جای NUMBER عدد مدنظرتان را جایگزین می کنید.)
از maxlength ،attribute برای مشخص کردن حداکثر تعداد کاراکتر ورودی کاربر استفاده می کنیم.
<input type="text" maxlenght="NUMBER">
🧷(به جای NUMBER عدد مدنظرتان را جایگزین می کنید.)
از placeholder ،attribute برای نوشتن متن راهنمایی استفاده می کنیم.
<input type="text" placeholder="TEXT">
🧷(به جای TEXT متن مدنظرتان را جایگزین می کنید.)
اگه به input required ،attribute بدهیم پر شدنش لازم می شود و در هنگام submit نمی تواند خالی باشد.
<input type="text" required>
اگه به input autofocus ،attribute بدهیم وقتی صفحه بالا می آید به صورت پیش فرض انتخاب شده است.
<input type="text" autofocus>
⚜️از radio button وقتی استفاده می کنیم از چند تا حالت فقط حق انتخاب یک مورد را داریم. مثل جنسیت، سن و...
برای داشتن radio button از input با type=”radio” استفاده می کنیم. برای اینکه radio button هایی که در یک گروه هستند باهم باشند باید name ،attribute یکسانی داشته باشند.
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
⚜️از checkboxes وقتی که امکان انتخاب چند مورد وجود داشته باشد استفاده می کنیم. مثل لیست خرید، علاقه مندی ها و...
برای داشتن checkboxes از input با type=”checkbox” استفاده می کنیم. برای اینکه checkbox هایی که در یک گروه هستند باهم باشند باید name ،attribute یکسانی داشته باشند.
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
⚜️برای داشتن select option از تگ select استفاده می کنیم.
بهتر است برای تگ attributes ،select های name و id را کامل کنیم.
برای قرار دادن لیستی از آیتم ها در تگ select از تگ option استفاده می کنیم.
یادتون نره برای تگ option value ،attribute را پر کنید.
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
مقدار پیش فرض select option اولین option است ولی اگه به یکی از option ها selected ،attribute را بدهیم به عنوان مقدار پیش فرض select option قرار می گیرد.
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
</select>
اگر بخواهیم مقدار پیش فرض نداشته باشه یک option با متن "--انتخاب کنید--" اول از همه اضافه می کنیم.
<select name="cars" id="cars">
<option value="not_select">--انتخاب کنید--</option>
</select>
اگر به تگ select، attribute multiple بدهیم امکان انتخاب چند تایی داریم که به جاش بهتر است از checkbox ها استفاده کنیم.
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
⚜️از تگ textarea برای محیط متنی که قابلیت تغییر سایز دارد استفاده می کنیم. که attributes cols تعداد ستون و عرض را و attributes rows تعداد ردیف و ارتفاع را نشان می دهد.
دارای attribute placeholder نیز هست.
<textarea id="TEXT" name="TEXT" rows="NUMBER" cols="NUMBER" placeholder="TEXT"></textarea>
🧷(به جایی TEXT متنی می خواهید و به جای NUMBER عددی که مدنظرتان هست را قرار می دهید و جایگزین می کنید.)
⚜️از تگ button برای دکمه استفاده می کنیم که از نوع block است. که هم بیرون و هم داخل تگ form قابل استفاده است.
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
⚜️از تگ fieldset استفاده می کنیم تا یه تقسیم بندی داخل فرم داشته باشیم.
برای عنوان دادن به filedset از تگ legend در خط بعدی تگ باز filedset استفاده می کنیم.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
فرمت های فیلمی که توسط html5 پشتیبانی می شوند شامل mp4, WebM, Ogg است.
از تگ video برای اضافه کردن فیلم:clapper: استفاده می کنیم.
<video controls>
<source src=”PATH” type=”video/VIDEO_TYPE”>
</video>
(به جای PATH مسیر فیلم مدنظر و به جای VIDEO_TYPE فرمت فیلم را قرار دهید و جایگرین کنید.)
اگر داخل تگ video متنی بنویسیم در صورتی که فایل پشتیانی نشود و برای کاربر نمایش داده نشود این متن نمایش داده می شود.
برای تغییر اندازه ابعاد فیلم داخل تگ video از width ،attribute و height استفاده می کنیم.
فرمت های صدایی که توسط html5 پشتیبانی می شوند شامل mp3, wav, ogg است.
از تگ audio برای اضافه کردن صدا:loud_sound: استفاده می کنیم.
<audio controls>
<source src=”PATH” type=”audio/AUDIO_TYPE”>
</audio>
🧷(به جای PATH مسیر صدا مدنظر و به جای AUDIO_TYPE فرمت صدا را قرار دهید و جایگرین کنید.)
اگر داخل تگ audio متنی بنویسیم در صورتی که فایل پشتیانی نشود و برای کاربر نمایش داده نشود این متن نمایش داده می شود.
قبلا گفتیم برای عنوان دادن به صفحه از تگ title داخل تگ head استفاده می کنیم.
می توانیم از تگ style برای استایل و کد های css استفاه می کنیم.
از تگ link برای لینک:link: های فایل های css به فایل html استفاده می کنیم.
از تگ script برای نوشتن کد های js استفاده می کنیم.
تگ meta برا تنظیمات :gear: هست.
اگر صفحه وب شما فارسی:iran: است باید در تگ meta مقدار charset=”UTF-8” ،attribute قرار می دهیم.
برای فهماندن نوع سایت مان به موتور های جستجو:mag: باید به صورت زیر عمل کنیم.
<meta name=”keyword” content=”WORDS”>
🧷(به جای WORDS کلمات کلیدی را قرار می دهیم و با ',' از هم جداشان می کنیم)
برای توضیح دادن:page_with_curl: صحات وب به صورت زیر عمل می کنیم.
<meta name=”description” content=”SENTENCE”>
🧷(به جای SENTENCE جمله خلاصه ای در مورد سایت مان قرار می دهیم.)
برای مشخص کردن نویسنده:black_nib: صفحه به صورت زیر عمل می کنیم.
<meta name=”author” content=”NAME”>
🧷(به جای NAME اسم نویسنده را قرار می دهیم.)
🏷️هیچ وقت
<!DOCTYPE html>
یادتان نرود.
🏷️بزرگ و کوچک نوشتن تگ فرق ندارد ولی بهتر است کوچک نوشته شوند.
🏷️به باز و بسته بودن تگ ها دقت کنید.
🏷️در بخش attribute تگ ها با اینکه فرق ندارد ولی حروف را کوچک بنویسید.
🏷️مقدار مساوی attribute را حتما داخل ‘’ یا “” قرار دهید.
🏷️سعی کنید attribute هایی که بعد از زدن alt براتان می آورد را پر کنید.
🏷️برای عکس در تگ img حتما یک از attribute های width یا height را پر کنید.
🏷️تگ title و meta را فراموش نکنید.
🏷️فاصله اضافه الکی نزنید.
🏷️اسم فایل، عکس، صدا و ... را حتما به صورت کوچک و برای جدا کردند به جای فاصله از - یا _ استفاده کنید.
🏷️به جای حفظ کردن کد ها یاد بگیرید از آن ها چه طوری استفاده کنید و ذهن تان را خالی بزارید برای فکر کردن روی مسائل و پیدا کردن راه حل مناسب و کارآمد و هرجایی که گیر کردید یا نمی دانستید سرچ کنید
🏷️برخی از سایت های مناسب برای مطالعه و سرچ کردن
نصب قالب در VS Code
در بخش extension که در sidebar قرار دارد اسم قالب خودمان را سرچ می کنیم و روی install می زنیم.
قالب پیشنهادی: atom one dark
با سرچ می توانید قالب های دیگری نیز پیدا و استفاده کنید.
تغییر قالب در VS Code
از روی صفحه کیبورد Ctrl + shift + t را می زنیم و می نویسم >color و enter را می زنیم و بین قالب ها آن که می خواهیم انتخاب می کنیم.
تغییر فونت در VS Code
فونت را با کلیک راست روی ایکنش و سپس زدن روی install روی سیستم مان نصب می کنیم.
بعد داخل VS Code به قسمت File->preferences->settings می رویم و از بخش editor: font family اسم فونت موردنظر را جایگزین می کنیم.
فونت پیشنهادی: Cascadia(مخصوص برنامه نویسی)
نصب آیکن در VS Code
در بخش extension که در sidebar قرار دارد اسم آیکن خودمان را سرچ می کنیم و روی install می زنیم.
آیکن پیشنهادی: Vscode-icons
با سرچ می توانید آیکن های دیگری نیز پیدا و استفاده کنید.
نصب افزونه در VS Code
در بخش extension که در sidebar قرار دارد اسم افزونه خودمان را سرچ می کنیم و روی install می زنیم.
افزونه های پیشنهادی:
- HTML Snippets
- IntelliSense for CSS class names in HTML
با سرچ می توانید افزونه های دیگری نیز پیدا و استفاده کنید.
مخفف cascading style sheet است.
🤔زبان برنامه نویسی نیست بلکه زبان استایل دهی است.
به ما کمک می کند که نمایش کد های html را مشخص کنیم و مکمل خوبی برای html است.
💥معمولا اسم فایل css پروژه مان را style.css می گذاریم.
- ساختن فایل CSS و لینک کردن آن به فایل html (external)
- استفاده از تگ style در داخل تگ head (internal)
- استفاده از style ،attribute در تگ ها (inline)
✨برای لینک کردن فایل html و css داخل تگ head از تگ link استفاده می کنیم.
<link rel=”stylesheet” href=”ADDRESS/style.css”>
(به جای ADDRESS محل فایل style.css را قرار دهید.)
✨برای نوشتن چند خصیصه در حالت inline ; می زاریم و همه کد ها رو پشت سر هم داخل یک خط می نویسیم.
✨روش inline برای دادن یک استایل های کوچک به یک تگ داخل صفحه کاربرد دارد.
ٍُSELECTOR{
}
به چیزی که قبل از { است selector می گویند و هر چی داخل {} است attributes می گویند.
, به معنی "و" در css است.
h1, h2 یعنی h1 و h2 باهم یک استایلی داشته باشند.
برای دادن رنگ پس زمینه:red_square: در CSS از خصیصه backgrand-color استفاده می کنیم.
body{
background-color: red;
}
🔻اگر به کل تگ ها می خواهید بدهید اسم آن تگ را به عنوان selector می نویسید.
body{
}
a{
}
p{
}
🔻انتخاب تگ خاص برای استایل دادن
- به تگ موردنظر یک کلاس خاص می دهیم.
- به فایل css می رویم و برای بخش selector ".اسمی" که نوشته بودیم را می نویسیم.
- کروشه را باز و بسته می کنیم و کد های خودمان را می نویسیم.
به هیچ عنوان . یادتان نره.
.header{
}
.content{
}
, برای کلاس ها هم قابل استفاده است.
🔻به جای کلاس از id هم می توانیم استفاده کنیم. فقط به جای . از # استفاده می کنیم.
#image{
}
#title{
}
🔻کلاس به تگ های مختلف داده می شود ولی id را به یک تگ باید داد.
می شود از یک id چند جا استفاده کرد ولی استاندار نیست.
/* بخشی که کامنت می شود */
✅اگر بخشی از کد را انتخاب کنیم و ctrl + / را در VS Code بزنیم کامنت می شود.
- یه سری رنگ خاص داریم . red, green, yellow, ...
- کد hex
- rgb
پیدا کردن کد hex رنگ ها با سرچ color picker یا استفاده از نرم افزار های گرافیکی امکان پذیر است.
❌هیچ وقت # قبل از نوشتن کد hex فراموش نشود.
فرم rgb(NUMBER, NUMBER, NUMBER) بدین صورت است که شامل 3 عدد بین 0 تا 255 می شود و به ترتیب مقدار قرمز:red_circle:، سبز:green_circle: و آبی:large_blue_circle: بودن را مشخص می کند.
⚜️برای انتخاب رنگ می توانید 🔍flat color و 🔍material ui را سرچ کنید.
برای مشخص کردن عرض از خصیصه width استفاده می کنیم.
برای مشخص کردن ارتفاع از خصیصه height استفاده می کنیم.
.mydiv{
width: 200px;
height: 300px;
}
برای اندازه علاوه بر px می توانیم از % هم استفاده کنیم.
li{
width: 60%;
}
سریع نوستن تگ یا کلاس یا ای دی خاص در VS Code
🔰کلاس
TAGNAME.CLASSNAME
(به جای TAGNAME تگ موردنظر و به جای CLASSNAME اسم کلاس موردنظر را می نویسید)
بعد از نوشتن عبارت فوق کلید tab را می زنید و تگ با کلاس مدنظر ساخته می شود.
🔰ای دی
TAGNAME#IDNAME
(به جای TAGNAME تگ موردنظر و به جای IDNAME اسم ای دی موردنظر را می نویسید)
بعد از نوشتن عبارت فوق کلید tab را می زنید و تگ با ای دی مدنظر ساخته می شود.
⚜️با خصیصه border-style استایل بوردر را مشخص می کند.
با خصیصه border-top-style استایل بوردر سمت بالا را مشخص می کند.
با خصیصه border-left-style استایل بوردر سمت چپ را مشخص می کند.
با خصیصه border-right-style استایل بوردر سمت راست را مشخص می کند.
با خصیصه border-bottom-style استایل بوردر سمت پایین را مشخص می کند.
که اگر بهش مقدار solid را بدهیم خط ساده برایمان می کشد.
اگر بهش مقدار dotted را بدهیم نقطه برایمان می کشد.
اگر بهش مقدار dashed را بدهیم خط های فاصه دار برایمان می کشد.
اگر بهش مقدار double را بدهیم دو خطی برایمان می کشد.
اگر بهش مقدار groove را بدهیم حالت قاب برایمالن می کشد.
و بقیه مقادیر مثل ridge, inset, outset,…
⭕اگر none بدهیم بوردر پاک می شود.
div{
border-top-style: solid;
border-left-style: dotted;
border-bottom-style: groove;
border-right-style: inset;
}
⚜️با خصیصه border-color رنگ بوردر را برایمان مشخص می کند.
با خصیصه border-top-color رنگ بوردر سمت بالا را برایمان مشخص می کند.
با خصیصه border-left-color رنگ بوردر سمت چپ را برایمان مشخص می کند.
با خصیصه border-right-color رنگ بوردر سمت راست را برایمان مشخص می کند.
با خصیصه border-bottom-color رنگ بوردر سمت پایین را برایمان مشخص می کند.
div {
border-top-color: coral;
border-left-color: red;
border-bottom-color: green;
border-right-color: blue;
}
⚜️با خصیصه border-width ضخامت بوردر را نمایش می دهد.
با خصیصه border-top-width ضخامت بوردر سمت بالا را نمایش می دهد.
با خصیصه border-left-width ضخامت بوردر سمت چپ را نمایش می دهد.
با خصیصه border-right-width ضخامت بوردر سمت راست را نمایش می دهد.
با خصیصه border-bottom-width ضخامت بوردر سمت پایین را نمایش می دهد.
div{
border-top-width: 20px;
border-left-width: 2px;
border-bottom-width: 5px;
border-right-width: 10px;
}
⚜️می توانیم به border-width, border-style, border-color همزمان 4 تا مقدار بدهیم که به صورت TOP RIGHT BOTTOM LEFT(ساعتگرد) اعمال می شود.
می توانیم به border-width, border-style, border-color همزمان 2 تا مقدار بدهیم که به صورت TOP_AND_BOTTOM RIGHT_AND_LEFT(بالا پایین و چپ راست) اعمال می شود.
اگر برای چپ مقداری مشخص نکنیم از روی راست استایل ها را می گیرد.
به جای همه border-width, border-color, border-style می توانیم از border استفاده کنیم که اولش اندازه، بعدش استایل و در آخر رنگ (SIZE STYLE COLOR) را بهش می دهیم.
همچنین border-left, border-right, border-top, border-bottom داریم که فقط برای یک سمت استایل ها را تنظیم می کند.
div{
border-top: 20px solid coral;
border-left: 2px dotted red;
border-bottom: 5px groove green;
border-right: 10px inset blue;
}
🔅به وسیله خصیصه color رنگ متن📋 را تغییر می دهیم.
🔅با خصیصه text-align برای محل قرار گرقتن متن است که مقادیر آن left, right, center, justify است که پیش فرض آن left است.
🔅با خصیصه font-size اندازه و سایز فونت را تعیین می کنیم. مشخص کردن معیار اندازه گیری را فراموش نکنید.
🔅اگر متن🗄️ فارسی و انگلیسی باشد ترتیب به هم می خورد پس بهش direction می دهیم. که برای فارسی مقدارش را برابر rtl و برای انگلیسی که به صورت پیش فرض نیز هست ltr قرار می دهیم.
- rtl: right to left
- ltr: left to right
p{
color: red;
direction: rtl;
text-align: center;
}
🔅خصیصه text-decoration برای تغییر حاضر متن است.
مقدارش اگر underline باشد یک خط زیر متن می کشد.
مقدارش اگر line-through باشد یک خط روی متن می کشد.
مقدارش اگر overline باشد یک خط بالا متن می کشد.
مقدارش اگر none باشد همه خط ها را پاک می کند.
☢️بعضی از این کار ها را هم با css می شود اعمال کرد هم با تگ ها ولی فرق اینا در بحث سیگنال فرستادن به موتور های جستجو است که تگ این کار را انجام می دهند.
🔅خصیصه text-transform حالت حروف را در متن مشخص می کند.
اگر مقدار مساوی lowercase باشد همه حروف کوچک هستند.
اگر مقدار مساوی uppercase باشد همه حروف بزرگ هستند.
اگر مقدار مساوی capitalize باشد حروف اول همه کلمات بزرگ، بقیه حروف کوچک هستند.
p{
text-transform: lowercase;
}
🔅خصیصه text-indent مقدار فرورفتگی اول هر پاراگراف را مشخص می کند.
🔅خصیصه letter-spacing مقدار فاصله بین حروف را مشخص می کند.
🔅خصیصه line-height فاصله بین خطوط را مشخص می کند.
🔅خصیصه word-spacing فاصله بین کلمات را مشخص می کنند.
🔅با font-weight می توانیم ضخامت فونت را تغییر بدهیم که برای بولد کردن مقدارش را مساوی bold قرار می دهیم.
p{
text-indent: 10px;
letter-spacing: 2px;
line-height: -2px;
word-spacing: -10px;
font-weight: bold;
}
🔅خصیصه text-shadow سایه متن را مشخص می کند.
2 تا عدد می گیرد. اولین عدد سایه عمومی و عدد بعدی سایه افقی است.
عدد سومی که می توانیم بهش بدهیم میزان بلور شدن سایه است.
و در آخر رنگ سایه را مشخص می کنیم.
با سرچ 🔍text shadow generator می توانیم سایه متن را راحت بسازیم.
⭐با خصیصه margin فاصله از بیرون را مشخص می کنیم.
همچنین margin-top, margin-left, margin-right, margin-bottom داریم.
⭐با خصیصه padding فاصله از داخل را مشخص می کنیم.
همچنین padding-top, padding-left, padding-right, padding-bottom داریم.
نحوه مقدار دهی که border ها داشتیم برای margin و padding هم استفاده می شود.
div{
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}
p{
margin: 10px 20px 30px;
padding: 10px 20px 30px;
}
a{
margin: 10px 20px;
padding: 10px 20px;
}
li{
margin: 10px;
padding: 10px;
}
⚡می توانید برای درک بهتر box model را بررسی کنید.
a:hover{
}
☝️برای استایل دادن وقتی که موس می رود روی لینک استفاده می شود.
a:visited{
}
☝️برای استایل دادن به لینک هایی که رویشان قبلا کلیک کردیم.
a:active{
}
☝️برای استایل دادن به لینک ها وقتی رویشان کلیک کردیم.
⭐خصیصه border-radius برای گرد کردن گوشه ها استفاده می شود.
مثل border قابل مقدار دهی می شود.
div{
border-radius: 1px 2px 3px 4px;
}
.mydiv{
border-radius: 1px 2px 3px;
}
#navigation{
border-radius: 1px 2px;
}
a{
border-radius: 1px;
}
🔔اگر یک استایلی بین یک سری تگ یکسان است بهتر است به صورت مشترک و یک جا نوشته شوند تا اینکه همه جا قرار دهیم.
SELECTORONE SELECTORTWO{
}
✒️این یعنی برو داخل SELECTORONE دنبال SELECTORTWO باش و آن ها را انتخاب کن.
برای تغییر علامت قبل li در ul از خصیصه list-style-type استفاده می کنیم که مقدار disc, circle, square, … می گیرد.
⛔برای ol هم داریم ولی مقداریش فرق می کند.
برای دادن عکس به عنوان علامت قبل li ها از list-style-image استفاده می کنیم و از طریق url(“ADDRESS”) مسیر عکس را می دهیم.
(به جای ADDRESS آدرس عکس را قرار می دهیم.)
☢️لیست ها به صورت پیش فرض margin و padding دارند.
tr:nth-child(odd){
/* استایل سطر های فرد */
}
tr:nth-child(even){
/* استایل سطر های زوج */
}
دقیقا مثل border است ولی بعد از آن قرار می گیرد و مثل border تعریف می شود.
div{
outline: 10px solid #4CAF50;
}
یک سری تگ ها inline و یه سری دیگر block هستند.
برای تبدیل تگ های inline به block و برعکس از خصیصه display استفاده می کنیم.
⛔موردی که باید بهش توجه کنید این است که margin و height روی تگ های inline اعمال نمی شوند.
برای رفع این مشکل display را روی inline-block می زاریم.
span{
display: block;
}
و اگر مقدارش برابر none قرار دهیم حذف می شود.
❗فرق display: none و visibility:hidden در این است که در اولی کامل حذف می شود ولی در دومی جاش هست و نمایش داده نمی شود.
مقدار پیش فرض overflow برابر visible است.
اگر متن طولانی باشد از جایی که در برمی گیرد بیرون می زند که اگر به تگ دربرگیرنده ش overflow: hidden داده شود، چیزی که سرریز می کند و بیرون می زند را نمایش نمی دهد.
اگه مقدار overflow مساوی scroll باشد آن متنی که بیرون می زند حالت اسکرول می گیرد که هم اسکرول عمودی می گیرد و هم افقی.
برای اینکه فقط اسکرول عمودی داشته باشیم مقدار را مساوی auto قرار می دهیم.
div{
width: 200px;
height: 300px;
overflow: hidden;
}
مقدار تعیین موقعیت المان در حالت پیش فرض static است.
که برای تعیین موقعیت از 4 خصیصه top, bottom, right, left استفاده می کنیم.
⚜️relative
نسبت به حالتی که در حالت عادی دارد تغییر می کند.
⚜️fixed
همیشه یک جا(یک وضعیت و موقعیت ثابت در کل صفحه حتی با اسکرول) قرار می گیرد.
✅مناسب ساخت دکمه شناور برای صفحات اجتماعی می باشد.
⚜️absolute
نسبت به اولین پدری که position غیر static داشته باشد تعیین می شود.
⚜️sticky
وقتی به آن تگ می رسیم در موقعیتی که تعیین کردیم نسبت به صفحه نمایش قرار می گیرد.
✅مناسب درست کردن هدر چسبیده می باشد.
div{
position: relative;
top: 0;
right: 30px;
}
📛در حالت عادی تگ ها نسبت به ترتیب قرار گیریشان در فایل hmtl نمایش داده می شوند برای تغییر این ترتیب از z-index استفاده می کنیم.
هر چی عدد بزرگ تر رو تر قرار می گیرد.
p{
z-index: 4;
}
📛برای شناور کردن تگ ها از خصیصه float استفاده می کنیم که 3 تا مقدار دارد right, left, none را می گیرد.
مقدار پیش فرض آن none است.
#mydiv{
float: left;
}
وقتی تگی را float: left کنیم و بعدی را float: right کنیم محتوا زیر آن ها بالا می آید و زیر دوتا تگی که float کردیم می رود برای همین بعد از دوتا تگی که float می گذاریم و بهش div استفاد می کنیم یک clear: both; می دهیم. معمولا به div که ساخته شده کلاس clearfix می دهند.
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
📛برای تغییر وضوح تگ ها از خصیصه opacity استفاده می کنیم.
مقدار آن بین 0 تا 1 است.
img{
opacity: 0.5;
}
💢اگر opacity را کم کنیم آن تگ و تگ های داخلش کم رنگ می شوند. برای اینکه تگ های داخلش کم رنگ نشوند از background-color: rgba() استفاده می کنیم.
♻️برای سایه دادن به هرچیزی غیر از متن از box-shadow استفاده می کنیم.
♻️برای متن از text-shadow استفاده می کنیم.
مقداردهیش مثل text-shadow است با کمی تفاوت.
عدد اول سایه در حالت افقی را نشان می دهد.
عدد دوم سایه در حالت عمودی را نشان می دهد.
عدد سوم میران بلور شدن سایه را نشان می دهد.
عدد چهارم میزان پخش شدن سایه را نشان می دهد.
و اخر هم رنگ سایه را نشان می دهد.
برای ساخت راحت box-shadow می توانید داخل نت سرچ کنید 🔍box shadow generator
📌قرار دادن المان بلاکی در وسط صفحه
- عرض المان را مشخص می کنیم.
- بهش خصیصه margin: auto قرار می دهیم.
div{
width: 200px;
margin: auto;
}
📌برای وسط قرار دادن متن از text-align: center استفاده می کنیم.
وسط قرار دادن المان inline
- عرض المان را مشخص می کنیم.
- بهش خصیصه margin: auto قرار می دهیم.
- و مقدار را مساوی display: block قرار می دهیم.
span{
width: 300px;
margin: auto;
display: block;
}
📌راه دیگر برای کار فوق دادن text-align: center به تگ پدر است.
اگه فونت خاصی استفاده می کنید باید داخل فایل ها بگید و گرنه برای دیگران نماش داده نمی شود.
برای اضافه کردن باید از font-face استفاده کنیم.
از فونتی استفاده کنید که نسخه وب داشته باشد.
معمولا یک پوشه به اسم font درست می کنیم و فونت ها را انجا قرار می دهیم.
داخل فایل css به صورت زیر عمل می کنیم.
@font-face{
font-family: “NAME”;
src: url(“ADDRESS”) format(“TYPE”),
url(“ADRESS”) format(“TYPE”);
font-weight: WEIGHT;
font-display: swap;
}
📎از Truetype برای ttf به جای TYPE استفاده می کنیم.
📎از Woff برای woff به جای TYPE استفاده می کنیم.
📎از Woff2 برای woff2 به جای TYPE استفاده می کنیم.
و هرجا خواستیم font-family: “NAME” قرار می دهیم
معمولا داخل فونت های وب یک فایلی به اسم font-face.css وجود دارد که همه فایل ها را کامل مشخص کرده است که می توانیم import یا داخل فایل css اصلی مان کپی کنیم.
👀فونت arial را همه سیستم ها دارند.
داشتن چند کرسر برای نوشتن و پاک کردن همزمان در VS Code
یک جا کلیک می کنیم و بعدش alt را نگه می داریم و روی جاهای دیگر نیز کلیک می کنیم تا چند کرسر موس داشته باشیم.
از خصیصه background-image برای نمایش عکس:city_sunset: به عنوان پس زمینه استفاده می کنیم.
که آدرس عکس:cityscape: را توسط url به خصیصه background-image تگ مورد نظر می دهیم.
خصیصه background-repeat تکرار عکس را مشخص می کند و مقدار no-repeat(بدون تکرار), repeat-x(قرار در محور x ها), repeat-y(قرار در محور y ها), repeat(که مقدار پیش فرض است و یعنی تکرار در محور x و y ها) را می گیرد.
خصیصه background-size اندازه عکس پس زمینه را مشخص می کند که اگر مقدارش برابر cover باشد کل صفحه را پوشش می دهد.
با استفاده از background-attachment: fixed; پس زمینه را ثابت می کنیم حتی در حالات اسکرول صفحه.
div{
background-image: url("ADDRESS");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
(به جای ADDRESS آدرس عکس را قرار می دهیم.)
برای این کار از خصیصه background استفاده می کنیم.
اول جهت را مشخص می کنیم مثلا to right یا to left top
بعدش به ترتیب رنگ اول، رنگ دوم زنگ سوم و....
برای راحتی از سایت 🔍cssgradient.io استفاده کنید.
وقتی از گرادنت استفاده می کنید قبلش یک رنگ خالی به background بدید که اگر مرورگر پشتیبانی نکرد آن رنگ نمایش داده شود.
div{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1), rgba(9,9,121,1), rgba(0,212,255,1));
}
با استفاده از خصیصه transition می توانیم از یک استایل به استایل دیگر به صورت نرم برویم. بهش عدد می دهیم به صورت ثانیه که مدت زمان جابه جایی را نمایش می دهد.
با استفاده از transition-delay مدت زمان تا اجرای transition را مشخص می کند که با ثانیه مشخص می کنیم.
div{
width: 100px;
transition: 2s;
transition-delay: 0.5s;
}
div:hover{
width: 200px;
}
🔻برای ساخت انیمیشن دلخواه از keyframes استفاده می کنیم.
@keyframes NAME{
from{
}
to{
}
}
🔻بعد هرجایی که لازم بود بهش خصیصه animation-name را می دهیم با اسم keyfames مان.
🔻با خصیصه animation-duration مدت⏰ زمان انیمیشن را مشخص می کنیم.
🔻با خصیصه animation-iteration-count تعداد تکرار انیمیشن را مشخص می کنیم که اگر برایر infinite قرار دهیم یعنی بی نهایت بار اجرا شود.
🔻با خصیصه animation-delay تاخیر انیمیشن را مشخص می کنیم.
div{
animation-name: rotate;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-delay: 1s;
}
🔻به جای موارد بالا می توان از خصیصه animation استفاده کرد.
div{
animation: 0.5s rotate infinite;
}
🔻به جای from و to می توانیم از درصد استفاده کنیم.
@keyframes{
0%{
}
100%{
}
}
اگر بخواهیم این اتفاق نیوفتد و همیشه همان طوری که مشخص کردیم باقی بماند بهش box-sizing: border-box; می دهیم.
و مقدار پیش فرض آن content-box است.
div{
width: 200px;
height: 400px;
padding: 2px;
border: 3px solid red;
box-sizing: border-box;
}
هر مروگر یک سری استایل خاص برای تگ ها به صورت پیش فرض دارد و ممکن است این استایل ها باهم فرق داشته باشد ولی ما باید سایتی طراحی کنیم که همه جا یک شکل باشد حداقل در حد امکان
برای همین با css reset این استایل های پیش فرض را خنثی می کنیم.
برای همین داخل مرورگر مان سرچ می کنیم 🔍css reset و هر سایتی که خواستیم کد css را می گیریم و داخل یک فایل css که بهتر است اسمش reset.css باشد قرار می دهیم و به صفحه html مان لینک می کنیم.
مرورگر های مختلف موتور های گرافیکی مختلفی دارند برای همین قبلا بعد از نوشتن خط اصلی مثلا برای border-radius به صورت زیر عمل می کردند.
div{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-dorder-radius: 20px;
-ms-border-radius: 20px;
}
❓که moz برای mozila و webkit برای chrom و o برای opera و ms برای edge است که الان دیگر لازم نیست.
عکس هایی که بک گراند شان خالی است فرمت شان png است ولی همه عکس های png بدون بک گراند نیستند و ممکنه بک گراند داشته باشند.
ولی فرمت jpg بک گراند دارد.
برای پیدا کردن عکس بدون بگراند کافی است که آخر عبارتی که سرچ می کنیم بنویسیم png یا transparent.
همچنین می توانید از سایت 🔍flaticon و 🔍iconfinder برای این کار هستند
در پروژه ها بهتر است فایل ها به صورت زیر قرار دهید:
index.html
style file
style.css
reset.css
image file
*.jpg
*.png
...
font file
*.ttf
*.woff
*.woff2
....
⚡بهتر است ابدا و انتهای بخش های مختلف سایت را با کامنت گذاری مشخص کنید:
<!-- start SOMETHING -->
<!-- end SOMETHING -->
/* SOMETHING */
⚡با inspect element می توانیم کد های html و css را کامل مشاهده کنیم.
⚡بهتر است ترتیب کدنویسی css به ترتیب تگ ها و در برگیرنده هایشان باشد.
⚡تو طراحی وقتی چیزی نیست و در حالت خاص مثل hover می خوایم نمایش داده شود بهتر است در حالت عادی آن را قرار دهیم ولی مخفی کنیم تا بهتر نمایش داده شود. مثلا اگر در حالت hover بوردر داریم ولی در حالت عادی نداریم این حالت باعث می شود تا زمانی که hover می کنیم المان در صفحه جابه جایی شود برای همین در حالت عادی هم بهش بوردر می دهیم ولی هم رنگ با رنگ پس زمینه که معلوم نشود.
⚡وقتی می خواهید به تگی position: absolute بدهید، بهتر است به تگ پدرش position: relative بدهید تا نسبت به آن جا به جا شود.
⚡الکی خط کد زیاد نکنید؛ پس کد تکراری تا می توانید نزنید و کد های تکراری را یکی کنید.
⚡برای دادن چند تا کلاس به یک تگ اسم کلاس ها را با فاصله از هم جدا می کنیم.
<div class="box box-1"></div>
⚡برای راحتی بهتر با alt + tab بین صفحات مختلف سیستم عامل تان جا به جا شوید.
⚡فونتی که به body می دهید روی input ها اعمال نمی شود و باید به صورت جدا گونه به آن ها هم فونت مدنظرتان را بدهید.
⚡در مرورگر ها input submit به صورت پیش فرض border دارد.
⚡برای علامت کپی رایت از ©
استفاده می کنیم.
برای اطلاعات بیشتر می توانید داخل نت سرچ کنید 🔍html symbol
⚡اگر کد ها یادتان می رود عادی است فقط تمرین کنید، پروژه بزنید و سرچ کنید.
⚡اگر خواهید ارتفاع تگی را 100% کنید علاوه بر دادن height: 100% به آن تگ به html و body هم باید height: 100%; را بدهیم.
⚡برای متن تایپینگ از type js استفاده می کنیم.
⚡از کد js قرار اجرا شود اخر فایل قبل از تمام شدن تگ body قرار می دهیم.
⚡برای کاروسل از کتابخانه slick استفاده می کنیم.
⚡برای ارجعیت دادن از !important استفاده می کنیم.
⚡تو آدرس ایمیل به جای @ از [at] و به جای . از [dot] ااستفاده کنید.
*{
}
⚡یعنی همه تگ ها
⚡بهتر از داخل کد های css کد زیر را قرار قرار دهیم.
*{
box-sizing: border-box;
}
⚡با افزونه live server با اعمال تغییرات و بعد از آن ذخیره کردن، صفحه وب به صورت اتوماتیک بروزرسانی می شود.
بعد از نصب افزونه VS Code را می بندیم و دوباره باز می کنیم و برای اینکه فایل با live server کار کند روی اسم فایل کلیک راست کرده و open with live server را می زنیم یا روی دکمه پایین صفحه با ایکن live server کلیک کنیم.
⚡برای یادگیری بهتر کد ها رو کپی نکنید حداقل خودتان از روش بنویسید.
⚡خود VS Code هم color picker دارد برای استفاده کافی است روی مربعی که رنگ را نشان می دهد کلیک کنید.
⚡ساخت منو باز و بسته شونده با js
$(document).ready(function(){
$(‘.open-menu’).click(function(){
$.(‘.nav’).slideToggle();
});
});
با خصیصه vertical-align تراز بندی عمودی تگ را مشخص می کنیم که بهش عدد می دهیم با واحد مناسب.
img.a {
vertical-align: 20px;
}
برای عوض کردن عکس:city_sunset: بالا تاپ بار مرورگر برای صفحه مان خظ زیر را داخل تگ head اضافه می کنیم.
<link rel=”icon” type=”image-TYPE” href=”ADDRESS”>
فایل reset.css را در داخل فایل style.css import می کنیم تا اینکه بخواهیم داخل فایل html link کنیم.
نحوه import کردن فایل css در فایل css
@import ‘ADDRESS’;
CLASSNAME:first-chlid{
/* استایل دادن به اولین المان که این کلاس رو داره*/
}
CLASSNAME:last-chlid{
/* استایل دادن به اخرین المان که این کلاس رو داره*/
}
سایت 🔍dribbble برای ایده گرفتن سایت خوبی است.
از فونت ایکن برای قرار دادن ایکن استفاده کنید.
برای فونت ایکن 🔍font awesome گزینه خوبی است.
مزیت های font icon نسبت به عکس:
- ادیت راحت تر است.
- کاهش ترافیک سایت مان و سرعت لود بهتر می شود.
اول فونت ایکن را دانلود می کنیم بعد فایل all.min.js را به پروژه مان اضافه می کنیم.
<script src=”ADDRESS” defer></script>
در کد بالا defer یعنی بعد از لود شدن سایت این اسکریپت را اجرا کن.
🔰ایکن های free font awesome سه دسته هستند solid, regular, brand.
🔰اگر با Fas در font awesome شروع شود یعنی ایکن مان solid است.
🔰اگر با Far در font awesome شروع شود یعنی ایکن مان regular است.
🔰اگر با Fab در font awesome شروع شود یعنی ایکن مان brand است.
⚜️با استفاده از :before و خصیصه content می شود متنی به قبل از یک تگ اضافه کرد.
⚜️با استفاده از :after و خصیصه content می شود متنی به بعد از یک تگ اضافه کرد.
در CSS :not() یعنی ان هایی که این طوری نیستند.
a:not(.active){
}
یعنی لینک هایی که کلاس active ندارند.
.subUl{
position: absolute;
display: none;
}
.sunLi{
display: inline-block;
}
.liHasDropdwon:hover .subUl{
display: block;
}
طراحی وب واکنش گرا یا responsive web design یعنی سایت مان را طوری طراحی کنیم که روی انواع مختلف دستگاه ها به شکل مناسب نمایش داده شود. برای این کار ما در css مان به وسیله شرط ها به المان هایی مان در صفحه هات مختلف استایل های مختلف می دهیم.
✅مزایا
- سایت شما در همه جا در دسترس است -> کاربر لذت می برد
- قشر زیادتری از مخاطبان را دارید
- موثر در رتبه ی سایت
برای چک کردن ریسپانسیو بودن سایت صفحه مرورگرمان را تغییر می دهیم و کوچک و بزرگ می کنیم.
دو روش برای ریسپانسیو کردن:
- تغییر فقط در کد های css -> قبلا برای یک دستگاه طراحی کردیم
- استفاده از grid بندی -> وقتی از صفر داریم کد می زنیم
به اندازه صفحه ای که کاربر می بیند viewport می گویند.
برای شروع کد زیر را داخل تگ head مان قرار می دهیم.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
با mediaquery شرط می گذاریم برای اندازه صفحه هات وب
تو firefox برای فعال کردن مشاهده ریسپلنسیو سایت به صورت زیر عمل می کنیم Tools-> web developer -> responsive design mode
@media screen and (max-width: 500px){
}
یعنی وقتی رسید به 500 پیکسل و کمتر این استایل ها رو اعمال کن
عرض 768 پیکسل برای تبلت را در نظر می گیریم و 400 پیکسل برای موبایل که به این ها breakpoint می گویند.
تنظیم بخشی از سایت برای چاپ کردن
@media print{
}
در grid بندی صفحه ای که داریم را به 12 قسمت تقسیم می کنیم به طوری که کل صفحه را برایمان اشغال کنند و به هر المان تعدادی از این 12 قسمت را اختصاص می دهیم
100 دردصد صفحه به 12 قسمت می کنیم که هر قسمت می شود 8.33 درصد.
اندازه المان ها برحسب تعداد ستون ها
🔴1 = 8.33
🔴2 = 16.66
🔴3 = 24.99
🔴4 = 33.32
🔴5 = 41.65
🔴6 = 49.98
🔴7 = 58.31
🔴8 = 66.64
🔴9 = 74.97
🔴10 = 83.3
🔴11 = 91.63
🔴12 = 99.96
.col-1{
Width: 8.33%;
}
.col-2{
Width: 16.66%;
}
.col-3{
Width: 24.99%;
}
.col-4{
Width: 33.32%;
}
.col-5{
Width: 41.65%;
}
.col-6{
Width: 49.98%;
}
.col-7{
Width: 58.31%;
}
.col-8{
Width: 66.64%;
}
.col-9{
Width: 74.97%;
}
.col-10{
Width: 83.3%;
}
.col-11{
Width: 91.63%;
}
.col-12{
Width: 99.96%;
}
🚩و بعد به المان هایی که می خواهیم در attribute class col-N مدنظرمان را قرار می دهیم.
[class*=”col-”]{
}
یعنی داخل کلاس ها برگرد و آن هایی که col- داخل اسم شان وجود دارد را انتخاب کن.
کد زیر را در حالت grid بندی باید قرار دهید
[class*=”col-”]{
float: left;
}
💠مقدار هر col را برای ریسپانسیو کردن سایت باید مقدار col ها را با @media تغییر داد.
بدون flex box یک container قرار می دهیم سپس به المان های داخل متناسب با آن درصد می دهیم.
✅ویژگی flexbox
- کنار هم قرار دادن المان ها بدون استفاده از float
- کاملا ریسپانسیو هستند
- خیلی راحت و سریع هستند
- بدون درگیر شدن با margin و padding ها کار را پیش می بریم
- عوض کردن جای المان ها بدون عوض کردن کد html
در واققع flex box یعنی قرار دادن المان ها کنار هم دیگر
✅دو نوع flex box داریم
- عمودی
- افقی
به دربرگیرنده flex container می گوییم.
به ایتم های داخلش flex item می گوییم.
به صورت پیش فرض flexbox افقی و از چپ به راست هستند.
به محور عمودی cross axis می گوییم.
به محور افقی main axis می گوییم.
🔆برای ساخت flexbox به container خصیصه display: flex; را می دهیم بعدش مشخص می کنیم عمودی باشد یا افقی.
🔆خصیصه flex-direction را به container می دهیم و مشخص می کند که flex box عمودی هست یا افقی و مقدار پیش فرض آن row است.
مقادیرش برای حالت افقی row, row-reverse است و مقادیرش برای حالت عمودی column, column-reverse است.
نکته مهم وقتی flex box عمودی است جای main axis و cross axis عوض می شود.
🔆خصیصه justify-content را به container می دهیم و مرتب سازی المان ها در راستای محور اصلی main axis را انجام می دهد.
مقادیرش flex-start, flex-end, center, space-between, space-around, space-evenly است.
مقدار پیش فرض ان flex-start است.
توضیح مقادیر
- flex-start => اول قرار می دهد
- flex-end => اخر قرار می دهد
- center => وسط قرار می دهد
- space-between => بین ایتم فاصله می گذارد و پخش شان می کند
- space-around => بین اول و اخر ایتم فاصله می گذارد (فاصله اول و اخر کم است)
- space-evenly => بین اول و اخر ایتم فاصله مساوی می گذارد و پخش شان می کند
🔆خصیصه align-items را به container می دهیم و مرتب سازی المان ها در راستای محور عرضی cross axis را انجام می دهد.
مقادیرش flex-start, flex-end, center, stretch, baseline است.
مقدار پیش فرض آن stretch است.
توضیح مقادیر
- flex-start => اول قرار می دهد
- flex-end => اخر قرار می دهد
- center => وسط قرار می دهد
- stretch => انقدری می کشد تا دربرگیرنده ش را پر کند
- baseline => براساس متن شان مرتب می کند
🔆خصیصه flex-wrap را به container می دهیم و مشخص می کنیم المان ها در یک خط باشه یا نه.
مقادیرش nowrap, wrap, wrap-reverse است.
مقدار پیش فرض nowrap است.
توضیح مقادیر
- nowrap => در یک خط باشند
- wrap => در چند خط هم می توانند باشند
- wrap-reverse => همان wrap است ولی برعکس شده
با ریسپانسیو سایت هم اوکی است و با تغییر سایز صفحه جای المان ها تغییر می کند
🔆خصیصه align-content را به container می دهیم و برای جایگذاری المان هایی هست که در چند خط قرار می گیرند. پس این خصیصه با flex-wrap با هم استفاده می شود.
مقادیرش flex-start, flex-end, center, stretch, space-between, space-around, space-evenly است.
مقدار پیش فرض stretch است.
توضیح مقادیر
- flex-start => اول قرار می دهد
- flex-end => اخر قرار می دهد
- center => وسط قرار می دهد
- space-between => بین ایتم فاصله می گذارد و پخش شان می کند
- space-around => بین اول و اخر ایتم فاصله می گذارد (فاصله اول و اخر کم است)
- space-evenly => بین اول و اخر ایتم فاصله مساوی می گذارد و پخش شان می کند
🔆خصیصه align-self را به item هایمان می دهیم و برای تغییر align-item یک المان به صورت اختصاصی است.
توضیح مقادیر
- flex-start => اول قرار می دهد
- flex-end => اخر قرار می دهد
- center => وسط قرار می دهد
- stretch => انقدری می کشد تا دربرگیرنده ش را پر کند
- baseline => براساس متن شان مرتب می کند
🔆خصیصه order را به item های مان می دهیم و ترتیب قرار گیری المان ها را مشخص می کند.
پیش فرض آن صفر است.
عدد کمتر زودتر، عدد بزرگ تر دیرتر و عدد مساوی به ترتیب کد html می آیند.
🔆خصیصه flex-basis را به item های مان می دهیم و سایز پیش فرض یک المان در راستای main axis است.
اگر flex box در حالت row باشد نقش width را دارد و در حالت column حالت height را ایفا می کند
واحد یادتان نرود.
🔆خصیصه flex-grow را به item های مان می دهیم و مشخص می کند که یک المان تا چه میزان می تواند بزرگ شود و فضای خالی موجود چطور بین المان ها تقسیم شود.
این در حالی است که فضای خالی داریم.
عدد هایی که می نویسیم نسبی هستند و پیش فرض آن صفر است.
🔆خصیصه flex-shrink را به item های مان می دهیم و مشخص می کند زمانی که فضای کافی در دربرگیرنده وجود ندارد یک المان تا چه میزان می تواند کوچک شود.
عدد هایی که می نویسیم نسبی هستند و پیش فرض آن یک است.
🔆خصیصه flex را به item های مان می دهیم و برای اختصار و کوتاه کردن خط کد است.
اگر بهش فقط یک عدد بدهیم به عنوان flex-grow است.
اگر بهش عدد و واحد بدهیم به عنوان flex-basis است.
اگر بهش یک عدد بدون واحد و یک عدد با واحد بدهیم به عنوان flex-grow و flex-basis است.
اگر دو تا عدد بدون واحد بدهیم به عنوان flex-grow و flex-shrink است.
اگر سه تایی باشد اولی flex-grow بعدش flex-shrink و بعد از آن flex-basis است که آخری واحد دارد.