خلاصه و چکیده از استایل ها و مطالب مانده از css و HTML
نکته : ما به زبانی میایم و میگیم زبان برنامه نویسی که بتوانیم در داخل آن یک login رو پیاده سازی کنیم و در آن از آرایه ها و متغیر ها استفاده بکنیم
یک زبان نشانه گزاری ابر متن که از آن برای مشخص کردن ماهیت Html : Hyper Text markup lanquage
عناصر و المان هامون در داخل صفحه ی وب میایم و استفاده میکنیم
یک شیوه نامه اجباری برای دادن رنگ و لواب به وب سایت امون هستش :CSS : Sheet Style Cascading
ساختار درختی مرورگرمون که دارای مفاهیم زیر هستش : ( DOM ( Document Object Model
1- Document : به سند وب ما یا همون سند html امون میگویند که حکم زمین که درختمون درش قرار داره رو میگیره
نکته »
<!DOCTYPE html>زمانی که ما میخاهیم از html۵ استفاده بکنیم باید بیایم و از این تگ استفاده بکنیم نوع رو مشخص میکنیم که چه ورژنی هستش و به مرورگر ما کمک میکند که صفحه پیج و غالب ما رو چطوری بیاد و به درستی نمایش بدهد و کلن یک بارم از این تگ بیشتر استفاده نمیکنیم و قبل همه تگ ها هم هستش
2- تگ html
<html></html>
این تگ ریشه کل تگ های موجود در سندهامون که همه اون هارو در بر میگیرد همچنین میگوید ریشه ی سند ما html هست و طبق مثال ریشه درختمون هستش
<html lang="en" dir="ltr" >
این تگ دو تا پراپرتی مهم دارد که طبق مثال بالا اولی برای مشخص کردن زبان وب سایت ما هستش و دومی برای مشخص کردن جهت سند وب سایت ما هستش
3- تگ head
<head></head>این تگ شاخه های درختمون هستش و بیشتر جنبه ی مفهومی برای موتور های جست و جو مرورگرا داره برای مثال تگ های مربوط به title یا عنوان میاد و در داخل اون قرار میگرد همچنین تگ های مربوط به meta خلاصه کدهایی که نیازی نیست که کاربرمون بیاد و اون ها رو ببینه در داخل این تگ هست
<meta charset="UTF-8">
این ویژگی یا خاصیت میاد و نوع کاراکترهای مارا مشخص میکند که کاراکترهای برنامه مارو بیاد و درست نمایش بده
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1 2 3ویژگی یا خاصیت name هنگامی که میخاهیم طراحی ریسپانسیو انجام بدهیم از این ویژگی استفاده میکنیم
ویژگی یا خاصیت content میگوید که بیا و به اندازه عرض سندمون بیا و عرض بگیرد
ویژگی یا خاصیت inital برای جلوگیری از درگ کردن و قالبمون برای چپ و راست رفتن و نشه فوکوس کرد بزرگ نمایی کرد
4- body
<body></body>تنه ی درختمون هستش و اون کد ها و مطالبی که نیاز هست تا کاربرمون اون هارو ببینه و تنها محتواهای این تگ به کاربرامون نمایش داده می شود
مفهوم Box Model : به ترکیب طول و عرض و margin و padding و border یک عنصر میگویند که باعث ایجاد این مفهوم میشود و تمام عناصر در داخل صفحات وب امان این ماهیت را دارد و یک مربع و یک مستطیل هستش
تگ های formating
------------------------
1- strong : برای بولد کردن یک تگ میایم و از آم استفاده میکنیم
2- i : برای درست کردن یک نوشته به صورت ایتالیک هستش
3- del : این تگ میاد و یک خط روی متن امون قرار میدهد مثال اش برای تخفیف ها هستش که مثلا ۵۰۰ هزار با این تگ روش خط کشیده و ۴۵۰ رو نشون مید
4- ins : میاد و یک خط رو زیر متن امون قرار می ده
5- sub & sup : از این تگ ها برای امور مربوط به ریاضیات استفاده میکنیم
6- abbr : این تگ برای خلاصه و کوتاه کردن هستش و یک Atribute میگیرد به نام title که توضیح کاملون رو در این جا قرار میدهیم وقتی از این تگ استفاده میکنیم یک نقطه چین برای متن امون نشون میدهد و وقتی کاربر اومد و روی اون متن امون هاور کرد تایتل امون رو بهش نشون مید
7- span و p
8- a از این تگ برای لینک ها استفاده میکنیم و دو تا ویژگی یا صفت مهم دارد href : همون لینک وب سایتی که در داخل اون قرار میدهیم target : و مقدار _blank که این ویژگی با این مقدار به ما میگوید که وقتی روش کلیک شد و بیا و یک صفحه ی جدید برامون درست کن
نکته :
تگ div : از این تگ موقعی که میخاهیم از یک محدوده کلی برای عناصرمون در نظر بگیریم استفاده میکنیم این تگ ها در بر گیرند یک سری تگ دیگه هستند و ماهیت بلاک دارند
تگ span مشابه تگ div هست با این تفاوت که به صورت inline هستش و عرض رو پر نمیکنن
style ---------------------------------------
1- font-size & font-color و font-family برای مشخص کردن نوع فونت و اندازه و رنگ فونت امون میایم و استفاده میکنیم
نکته : برای استفاده از فونت ها در داخل صفحات وب امون ما دو تا راه داریم یک بیایم و از CDN ها استفاده بکنیم که فضاهایی در بستر وب که یک چیز مشابه مثلا یک پکیج رو یا فایل مشابه در جاهای مختلف دنیا رو سرو های مختلفی قرار گرفته و زمانی که ما از اون استفاده میکنیم زمانی که یک درخواست به سمت سرور ارسال می شود به نزدیک ترین سرور که اون فایل رو داره میره و در اون جا اون فایل رو میخونه و باعث افزایش سرعت لود وبسایت امون می شود و یا این که بیایم و از فایل های فونت در داخل پروژه امون استفاده بکنیم
که به شیوه زیر از آن ها استفاده میکنیم حال font-face های مختلفشون
@font-face{
font-family: sahel;
src: url('../fonts/Sahel.eot') format('eot'),
url('../fonts/Sahel.woff')format('woff'),
url('..fonts/Sahel.woff2') format('woff2');
}
نکته : فرمت های از نوع TTF قالبا برای سیستم عامل ها مثل مک و ویندوز هستند و برای وب ما باید بیایم و از فرمت های woff و فرمت eot که ماکروسافت طراحی کرده استفاده میکنیم همچنین برای استفاده از فونت های گوگل هم میتوانیم از وب سایت fonts.google.com بیایم و استفاده بکنیم
2- text-align : اگر خواستیم متن ما بیاید و شیوه قرار گرفتن اشو در داخل المنت بلاکی تکس کنترل کنیم یا به عبارتی align کردن اون رو انجام بدهیم میایم و از این پراپرتی استفاده میکنیم که مقادیر center and left and Right اون به ترتیب در وسط چپ و راست المان تکس امون قرار میدهد همچنین مقادیر دیگه هم میگیرد که مختصرا توضیح میدهیم
justify : هنگامی که ما اومدیم و یک متن طولانی رو قرار دادیم وخواستیم لبه های متن مارو برامون تراز میکند از این مقدار برای این پراپرتی استفاده میکنیم
3- line-height : این پراپرتی میاد و فاصله بین خطوط رو هم برای ما مشخص میکند که باعث خوانایی بیشتر متن امون برای کاربر می شود و برای مقدارش سایز فونتمون هرچی هست ضرب در ۵.۱ برای متون فارسی بشه و ۶.۱ برای متون انگلیسی بشود تا مقدار بهتری رو بگیره
4- text-decoration : این پراپرتی میاد و یک خط رو برای متن های ما قرار میدهد و مقادیری که می گیرد به شرح زیر هست overline میاد و یک خط در بالای متن ما قرار میدهد underline میاد و یک خط در زیر خطوط ما می کشد و آخری through-line میاد و یک خط بر روی متن ما میکشد و none هم میاد و هیچ مقداری را نمیگیرد
5- text-transform : این پراپرتی بیشتر برای متون انگلیسی کاربرد دارد که مقادیر مختلفی دارد که به شرح اونا می پر دازیم مقدار capitalize میاد و کاراکترهای اول کلمات رو بزرگ در نظر میگیرد یعنی به ازای هرکلمه ای که اسپیس می خورد بزرگ میکند مقدار UpperCase همه ی کاراکتر ها رو بزرگ میکند مقدار lowerCase میاد و همه ی کاراکترها رو کوچک میکند
6- text-indent : میاد و برای خط اول متن امون عمل میکند و یک جورایی جایگزین padding-right هستش یعنی فاصله داخلی از المان پرنت که از سمت راست اعمال می شود
7- letter-spacing : این پراپرتی فاصله بین کاراکتر هامون رو مشخص میکند که مقدار های عددی مثبت و منفی هم میگیرد
8- word-spacing : مثل پراپرتی بالایی هست فقط برای کلمه ها میاد و اعمال می شود
9- text-shadow : این پراپرتی میاد و یک افکتی رو در داخل متن امون ایجاد میکند و ۴ تا ورودی میگیرد که سه تاش عددی و آخری رنگ هستش که اولین مقدار فاصله هست که این سایه از محور x ها میاد و میگیرد و مقدار دومی فاصله ای هست که از محور y میگیرد و مقدار سومی blur میاد و محو بودن سایه رو مشخص میکند و مقدار چهارم هم رنگ سایه امون رو برامون مشخص میکند
10- white-space : no-wrap : اگر ما بیایم و یک متن طولانی رو قرار بدهیم و ارتفاع برای اون قرار ندهیم و فقط عرض مشخص کرده باشیم میاد و به طور خودکار طول المان امون رو زیاد میکند تا متن ما به طور کامل درون اون جا بشه حال با قرار دادن این پراپرتی و قرار دادن این مقدار میاد و جلو ی این کار خودکار رو میگیره و مقدار عرض رو به طور خودکار زیاد میکند
11- word-wrap : break-word : یک موقع هست ما یک کلمه ای رو داریم که میاد و طول این کلمه از عرض المان داخلش بیشتر میشه و میزنه بیرون برای شکستن این کلمه باید بیایم و این پراپرتی رو قرار بدهیم
12- word-break : break-all : یک جورایی جاگزین justify : text-align هست با این تفاوت که برای تراز کردن میاد و کلمه ها رو هم میکشونه
13- over-flow : اگر برای یک المان شرایط بالا صدق کنه از این پراپرتی استفاده میکنیم که مقادیر مختلفی میگیرد auto این مقدار میاد و برای متن یک اسکرول ویو درست میکند تا اضافه متن با رعایت عرض المان دیده شود hidden این مقدار اون قسمت از متن رو که میاد و عرض المان رو رد میکنه یا بیشتر از اون نشون میده رو پنهان میکند حال برای اینکه متن امون وقتی نزدیک به انتهای المان امون رسید بیاد و یک سه نقطه نشون بدهد باید ویژگی زیر رو براش -overflow : ellipsis بکنیم لحاظ
vertical-align -14 : این پراپرتی میاد و خاصیت align کردن عنصر کناری اون رو مشخص میکند مثلا bottom or top میاد المنت کناری در پان ترین و بالاترین جای عنصر پرنت اش قرار میدهد middle میاد و وسط اش میکند ما این خاصیت رو برای بزرگ ترین عنصر از نظر ارتفاع در کنار سایر اعضا در نظر میگیریم مثلا baseline میاد در جایی که ارتفاع اون عنصر تموم شده قرار اش میدهد ما میتوانیم مقدار عددی هم بدهیم برای بالا پان کردنش که هم مثبت هم منفی
baseline : خط پایه عنصر را با خط پایه عنصر والدش هم تراز می کند. این مقدار پیش فرض است.
top : لبه بالایی عنصر هم تراز با بلندترین عنصر خط می شود.
middle : عنصر در وسط عنصر والدش قرار می گیرد.
bottom : لبه پانی عنصر هم تراز با پان ترین عنصر خط می گ
-------------------------------------------------------------------------------------------------------------------------------------
نکته » معرفی پراپرتی important !برای مهم عنوان کردن استایل هامون تا استایلی که داده ایم بیاد و اعمال بشود متناسب با اون طبقه بندی اولیوت اعمال شدن استایل ها میایم و از این ویژگی استفاده میکنیم
تگ table جدول ها
جدول ها سئو اشون ضعیف هستند زیرا موتور های جستجو نمی تونند بیان و محتوای داخل اون هارو بخونن و حجم بالایی دارند و سنگینی صفحات وب رو به دنبال دارند و سرعت لود رو پان می آورند و رندراشون هم سنگین هستش و موارد استفاده اونها در داخل پنل های کاربری هستش و در داخل صفحه های اصلی مون سعی شود که از اون ها استفاده نکنیم
تگ tr برای درست کردن ردیف در داخل جدول هامون از این تگ استفاده میکنیم
تگ th برای هر سلول میاد و یک هدر رو برای ما مشخص میکند و در داخل تگ های tr امون استفاده میکنیم
تگ td به اضای هر تگ بالایی که درست کردیم برای نشون دادن محتواش باید بیایم و از این تگ استفاده بکنیم و در داخل تگ های tr امون استفاده میکنیم
تگ caption یک از تگ های سماتیک هستش و برای عناوین میایم و از این تگ استفاده میکنیم و این تگ در سئو اهمیت داره عنوان ها رو میشه در تگ های p و h و span و div هم نوشت ولی بهتره از کپشن استفاده کنیم و در داخل جدول هامون هم برای عنوان جدول از این تگ استفاده میکنیم
تگ thead اگر ما مجموعه ای از ردیف هارو داشته باشیم که مربوط به هدر جدولمون باشد ما میایم و از این تگ ها استفاده میکنیم
تگ tbody ما میایم و بدنه جدولمون رو در داخل این تگ قرار میدهیم
تگ tfooter برای قسمت های پانی جدولمون و فوتر جدولمون میایم و از محدوده این تگ استفاده میکن
تگ های مولتی مدیا ( video and audio ) مشابه یک دیگر هستند
تگ video از این تگ برای قرار دادن کلیپ ها و فیلم هامون در داخل وب سایت استفاده میکنیم که یک سری Attribute دارد که اون ها رو توضیح میدهیم
Src = در این ویژگی باید بیایم و آدرس فایل ویدیویی امون رو قرار بدهیم
control = این ویژگی میاد و یکسری از ویژگی های کنترلی رو برای فیلم امون قرار میدهد مثل نوار ابزار های فیلم دکمه استاپ و ....
loop این ویژگی کار که انجام میدهد این هست که وقتی فیلم به انتها رسید دوباره بیاد و از اول شروع به اجرا کردنش کنه
autoplay این ویژگی میاد و موقعی که صفحه وب ما بالا میاد به طور خودکار و بدونه تاد کاربر فیلم رو اجرا میکند
نکته : ما میتوانیم از دو تا منبع برای تگ video امون استفاده کنیم که باید به صورت زیر باشد که اگه فرمت اولی رو نتونست بخونه بره سراغ دوم
------------------------------------------------------------------------------------------------------------------------------------
تگ img ما از این تگ برای قرار دادن تصویر در داخل سندمون میایم و استفاده میکنیم
استایل های مربوط
background-color : برای دادن رنگ به پس زمینه المان هامون استفاده میکنیم
background-image : برای دادن یک تصویر به عنوان پس زمینه به المان هامون میایم و استفاده میکنیم
background-repeat : تکرار شدن اون پس زمینه ای که داریم رو میاد و انجام میدهد که مقدار های repeat و -no میگیرد رو repeat - x و repeat - y و
background-position میاد و موقعیت قرار گیری پس زمینه ما رو مشخص میکند که به طور پیش فرض سمت چپ هست و میتوانیم به آن مقدار های بالا پان راست و چپ و وسط هم بدهیم همچنین ما میتوانیم به آن دو مقدار رو هم بیایم و بدهیم
background-attachment : میاد و تصویر ما رو برای پس زمینه فیکس و ثابت اش میکنه و برای یک سبک از طراحی به نام پارالکس از این استفاده میکنیم برای ثابت بودنه باید مقدار fixed رو بهش بدهیم
نکته : زمانی که ما برای یک عنصر در یک فایل css میایم و background رو در نظر میگیریم باید برای اون یک ارتفاع رو هم در نظر بگیریم همچنین برای این که این عکس بیاد و تمام عرض مارو بپوشنه باید از پراپرتی زیر با مقدار زیر استفاده بکنیم cover : background-size که از تکرار جلو گیری میکنه
background-clip-: میاد و محدوده ی باکس مارو درست میکنه که مقدار box-border اون به طور پیش فرض هست که میگه محدوده تو همون بوردر تو هست اگه میایم و مقدار box-padding قرار دهیم میاد و محدوده باکس مارو padding اش قرار میدهد و مقدار box-content میاد و در جایی که محتوا شروع میشه رو محدوده باکس ما اعمال میکنه
نکته : اگر خواستیم برای یک المان بیایم و هم یک رنگ و یک تصویر رو به عنوان پس زمینه بهش اعمال کنیم برای خلاصه نویسی بهتر از پراپرتی background استفاده میکنیم به طوری که مقدار اول رنگ اون و مقدار دوم تصویر میاد و قرار میگیرد و مقدار بعدی تکرار پذیری اون و مقدار بعدی پوزیشن یا موقعیت اون هس
-------------------------------------------------------------------------------------------------------------------------------------
استایل های مهم
border : میاد هاشیه برای اون المنت امون ایجاد میکند و دارای اجزایی هم هست برای استفاده از اون هم اولین مقداری که میگیرد ذخامتش هستش دومین مقدار نوع اون هست که میتونه Solid یا dash و ... سومین مقدار هم رنگ اون
border : border-width border-style border-color
ویژگی border-style دارای انواعی می باشد
none : هیچ لبه ای نمایش داده نمی شود dotted : لبه ها به صورت نقطه نقطه ای نمایش داده می شود dashed : لبه ها به صورت خط تیره نمایش داده می شود double : دو لبه نمایش داده می شود groove : یک لبه سه بعدی گود دار نمایش داده می شود ridge : یک لبه سه بعدی برجسته نمایش داده می شود inset : یک لبه سه بعدی inset نمایش داده می شود outset :یک لبه سه بعدی outset نمایش داده می شود
border-Radius : برای گرد کردن هاشیه های اون المنت امون میاد و استفاده میشه
border-image : برای استفاده از آن در ابتدا باید بیایم و از یک border معمولی استفاده بکنیم و مقدار رنگ اون رو برابر با transparent بکنیم همچنین با استفاده از اون مقدار عددی که میدهیم میتوانیم زخامت رو هم کنترل بکنیم و به طور کلی جدا جدا می توانیم به صورت زیر ازش استفاده بکنیم
border-image-style : تعداد تکرار های تصاویر border رو میاد و انجام میدهد
border-image-source : منبع عکس مورد استفاده مارو میاد و در داخل یک url میگیرد
border-image-repeat : میاد و سه حالت میگیرد اولی مقدار round هست که میاد و حالت تکرار پذیری در وسط ها انجام میدهد و راس هارو کاری ندارد دومی stretch که میاد و می کشه اون border های مارو یعنی راس هارو کاری نداره و وسط رو میاد و می کشه space بین دو مقادیر قبلی هست
حال برای خلاصه نویسی هم image-border میاد مورد اول url و مورد دوم مقدار slice رو میگیرد و مورد سوم repeat تصاویر ما برای استفاده باید به صورت png باشد
padding : برای انواع جهت ها هست جهت های بالا و پان و راست و چپ و به معنی حاشیه یا فاصله داخلی محتوا از لبه ها یا حاشیه های والد اون است عنصر درونی به نسبت حاشیه های والدش میاد و فاصله میگیرد
padding : padding_top padding_right padding_bottom padding_left
margin : عنصر کلی المنت ما که نسبت به عناصر یا المنت های کناریش میاد و فاصله ایجاد میکند از لحاظ جهت ها شبیه به بالایی هس خلاصه نویسی آن شبیه به بالایی هستش
مفهوم Box-sizing : ما در کد نویسی وقتی طرح رو از طراح میگیریم به ما یک طول عرض خود المان رو میاد و میده و این طول عرض جدا از اون پدینگ و مارجین و بوردر هاست و ما باید طوری طراحی کنیم که این طول عرض این عنصر در نهایت همون اندازه ای باشه که طراح گفته برای همین باید بیایم و از مفهوم باکس سایزینگ استفاده بکنیم Sizing-Box که وقتی این ویژگی رو قرار میدهیم مرورگر دیگه کاری به اضافه کردن بوردر و پدینگ به عنصرمون به صورت پیش فرض دیگه نداره ویژگی borderBox رو برای تمام عناصر امان در نظر بگیریم box-border : Box-sizing این شکلی همون طول عرض اصلی رو قرار میده
نکته : ما از تگ های ul و li برای لیست هامون استفاده میکنیم که برای حدف کردن بولت های لیست هامون ما میتوانیم بیام و از دو ویژگی استفاده بکنیم یکی list-style : none و دومی ویژگی none = list-style-type که این پراپرتی ها مقادیر دیگه ای هم دارند که باید امتحان بکنیم حال اگر بخاهیم به جای این بولت از یک تصویر جایگزین استفاده بکنیم باید بیایم و از پراپرتی list-style-image استفاده بکنیم که با url ادرس بدهی
ماهیت عناصر به صورت استایت ک هستند حال برای تغیر آن ها باید از استایل position استفاده بکنیم که مقادیر زیر را میگیرد
fix : میاد و اون المان یا عنصر ما ثابت در داخل صفحه امون نگه میداره و اجازه نمی دهد که اسکرول بخورد
absolute : میاد و یک قابلیت شناوری نسبت به عناصر والد خودش پیدا میکند که میتوانیم با مقادیر , right , left , top bottom اون عنصر رو بیایم و جابه جا کنیم
relative : میاد و جا به جایی نسبت به عنصر والد رو برای ما در نظر میگیر
ما هنگامی که میخاهیم بیایم و برای یک عنصر از absolute استفاده بکنیم میاد و دنبال relative عنصر والد خودش میگردد و وقتی که عنصر والد اون relative نداشته باشه میاد و برای pareent یا روت صفحه میره و در نظر میگیرد
معرفی filter ها : یک سری توابع رو در داخل خودش دارد
۱-blur این تابع در واقع میاد و صفحه رو مات میکند و مقادیر عددی به صورت پیکسل میگیرد
۲-brightness این تابع میزان نور و روشنایی در تصویر مشخص میکند
۳-contrast میزان غلظت و اشباع شدگی بین رنگ هارو انجام میدهد پر رنگ کردن و تیره کردن و به صورت درصدی مقدار مگیرد تضاد رنگی
۴-grayscale میزان سیاه و سفیدی و مردگی تصویر رو میاد و مشخص میکند از رنگی بودن به سمت سیاه و سفید بودن و مقادیر بین صفر تا ۱۰۰ درصد مقدار می گیرد
۵-rotate-hue چرخش رنگ ها به منظور نقطه مقابلشون مثلا آبی به قرمز و درجه میگیرد
۶-invert میاد و بین تصویر اصلی و حالت نگاتیو اون تغیر ایجاد میکند و مقادیر درصدی میگیرد
۷-opacity میزان وضوح تصویر رو میاد و مشخص میکند و مقادیر درصدی میگیرد
۸-saturation میزان اشباع شدگی رنگ رو میاد و مشخص و مقادیر درصدی میگیرد
۹-sepia بین رنگ خودش و یک رنگ قهوه ای شروع به پیمایش میکند
۱۰- Shadow-drop برای سایه ما ی جور ایجاد سایه میکند و در تصویرمون سایه درست میکند وسه مقدار به صورت پیکسلی میگیرد
و به عنوان خلاصه نوشتن در ابتدا میتوانیم از تابع ( ) contrast و بعد از تابع ( ) brightness و .. استفاده بکنیم همان
طور که قبلا هم گفتیم زبان Css یک زبان برنامه نویسی نیست چون در آن ما نمیتوانیم توابع و متغیرهارو بیایم و تعریف بکنیم و برای حل این مورد پیش پردازنده هایی مثل sass و less معرفی شده اند که وظیفه اشون این بود که بعضی از قابلیت هایی مثل تعریف توابع یا متغیر هارو بیاین خود css به تنهایی برای رفع این موضوع یک سودوکلاس به نام روت رو اومد و درست کرد که بتوانیم یک چیزایی شبیه به متغیر ها در اون ایجاد بکنیم شیوه کار به این صورت هست که ما یک استایل به صورت root {} :تعریف میکنیم بعد در داخل اون میایم و متغیر هامون رو اضافه میکنیم و هرجا که خواستیم بیایم واز این ها استفاده بکنیم به این صورت که در داخل ( نام متغیری که نوشتیم قرار میدهیم ) v
-------------------------------------------------------------------------------------------------------------------------------------
elements semantic ها در سئو تاثیر کمی دارند اما بهتر هستش بیایم و از این ها استفاده بکنیم و حدودا ۱۳ تا هست
۱ -section : هر موقع ما خواستیم بیایم و یک محدوده ای رو مشخص بکنیم برای یکسری از المان هامون باید بیایم و از این تگ استفاده بکنیم که جایگزین تگ div هستش و ماهیت بلاکی دارد این تگ به موتور جستجو میگوید که این یک بخش در داخل وب سایتمون هست و ماهیت بلاکی دارد
۲ -nav : هر جا در داخل وب سایتمون قرار بود و یک منویی ( چه به صورت افقی و چه عمودی ) بیاد و قرار بگیرد باید بیایم و از این تگ استفاده بکنیم و ماهیت بلاکی دارد
۳ -aside : ما از این تگ برای سایت بار وب سایتمون میایم و استفاده میکنیم کناره های صفحه وب امون از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۴ -header : برای قسمت های بالایی وب سایتمون میایم و از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۵ -footer : برای قسمت های پانی وب سایتمون میایم و از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۶ -main : زمانی که به موتور جستجو میخایم بگیم که این قسمت از محتوای سایت من محتوای اصلی وب سایت من هستش در این تگ قرارش میدهیم
۷ - figure : بخشی از وب سایت امون که در داخل اون تصویر هستش پیشنهاد شده که بیایم و از این تگ استفاده بکنیم هرجا قرار بود تصویر به همراه توضیحی برای اون قرار بدهیم از این تگ استفاده میکنیم figCaption میگوید در داخل تگ بالا یی اگه خواستیم توضیحاتی رو برای تصویرمون قراربدهیم از این تگ استفاده میکنیم
۸ -Article : این تگ برای مقاله هست یعنی هرجا که ما تکس داشتیم و توضیحات داشتیم مثل تگ p و تگ های های فرمتینگ متن باید بیایم و از این تگ استفاده بکنیم و اون هارو در داخل اون قرار بدهیم
۹ - Summary and detail جفت تگ ها : ما در داخل سامری میایم و یک خلاصه از متنی که میخایم رو قرار میدهیم و بعد در داخل دیتیل میایم و اون متن رو به طور کامل قرار میدهیم و یک جور دراپ برای نشون دادن محتوا بهمون نشون میده که بهتر حتما استفاده کنین چیز جالبی هست
-------------------------------------------------------------------------------------------------------------------------------------
Attribute input
۱ -accept : با استفاده از این ویژگی میتوانیم مشخص کنیم که اینپوت ما بیاد و چه فرمت های بگیره مثلا اگر قرار بود بیاد و فقط فرمت عکس بگیره میتونه به شکل زیر مقدار دهی بشه یا هم اگه قصد ما استفاده کردن از تصاویر بود میتونیم از تایپ تصویر استفاده بکنیم
۲-autoComplete : این ویژگی میاد و در داخل کچ مرورگر مارو میگرده و اگه چیزی بود به عنوان کلمات رزوی در اینپوتمون نمایش میده که انتخابشون کنیم و دو مقدار میگیره یا off یا on
۳-autofocus : این ویژگی رو وقتی قرار میدهیم میاد و وقتی صفحه ی مرورگرمون لود شده به طور خودکار اینپوت مارو فعالش میکند
۴-checked این ویژگی برای نوع چک باکس هست که به طور خودکار میاد و اون رو فعالش میکند
5-maxlength : مشخص میکند که طول کاراکترهایی که در داخل اون ها میایم و مینویسیم چقد باید باشد بیشترین مقدار برای یک اینپوت رو مشخص میکند
7-minlength : حدقل کاراکترهایی که میگیرد چقد باید باشد رو مشخص میکند
8-pattern : برای استفاده بهتر از ری جکس میایم و از این استفاده میکنیم و الگوی ری جکس خودمون رو مشخص میکنیم
9-title : ما میتوانیم بیایم و یک عنوان برای هشدارمون قرار بدهیم که اگه قبول نکرد اون هشدار مارو نشون بده
10-require : کاربر رو ملزم میکند که فیلد مربوطه رو بیاد و پرش بکند و اگه نکنه مثل قبلی بهش پیام خطا میدهد
11-readonly : این نوع اینپوت ما رو فقط خوندنی میکند و اجازه تغیر درون اون رو به ما نمی دهد و اجازه تغیر نمیدهد
12-disable : این ویژگی میاد و به طور خود کار اینپوت مارو غیر فعال میکند
13- text type input این ویژگی ها مال موقعی هست که تایپ ما برابر تکس یا متنی باشه
button اینپوت ما رو میاد و تبدیل به یک دکمه میکند
checkbox اینپوت ما رو میاد و تبدیل به یک چک باکس میکندش
color میاد و اینپوت تبدیل به یک باکس انتخاب رنگ میکند
number یک اینپوت که فقط نوع عددی میاد و میگیرد
password یک اینپوت که فرمت چیز هایی که داخلش میایم و وارد می کنیم رو شبیه به پسورد نشون میدهد
radio یک اینپوت شبیه رادیوباتن ها برامون درست میکنه
email میاد و فقط متن های که فرمت ایمیل دارند رو برای ما قبول میکند و اگه فرمت ایمیل نداشته باشه خطا میدهد
file برای ارسال فایل باید بیایم و این نوع قرار دهیم که در بالا گفتیم شیوه عملکردشو
hidden یک اینپوت ایجاد میکند که از دید کاربرمون مخفی هستش
range یک اینپوت به شکل خطی که برای قیمت ها استفاده میشه بیشتر
reset یک دکمه که با کلیک بر روی اون مقدار همه اینپوت هامون رو خالی میکنه یا اصطلاحا پاک میکند
search یک اینپوت برای جست جو کردن برای ما میاد و درست میکند
۱۷-submit یک اینپوت برای ارسال اطلاعات که شبیه به دکمه ها هست
۱۹-text برای نوشتن یک متن
معرفی پراپرتی object-fit که برای کار کردن با صفحات وب هستش که برای استفاده از آن تصاویر ما باید دارای یک ابعادی رو پیش فرض داشته باشند یعنی باید بهش یک طول و عرضی داده باشیم
مقدار پیش فرض fill هستش
موقعی که ما یک تصویر رو میایم و بهش ابعادی رو میدهیم که از اندازه طبیعی خودش کوچک تر هستش این میاد و خودکار اون عکس مارو کوچک میکنه و شاید بعضی جاهاش رو اصلا نمایش ندهد
مقدار contain میاد و میگوید که همان تصویر اصلی رو با همان جزعیات اصلیش با نسبت طول عرض اش بیاد و درست نمایشش بده در مقدار ابعادی که ما دادیم که به نسبت اون ابعادی که دادیم با حفظ ساختارش میاد و کوچک تر می شود
مقدار cover میاد وقتی ابعاد تصویرمون بزرگ تر بهش داده باشیم میاد و در داخل ابعاد بزرگ ترش می کند ولی شاید بعضی از قسمت های تصویر رو نتونیم بیایم و ببنیم
مقدار scale-down میاد و تصویر ما رو در داخل وسط اون محدوده ای که طول و عرض رو بهش دادیم قرار میدهد
مقدار none هم میاد از مرکز تصویر به اندازه اون طول و عرض که بهش دادیم رو بیا و قرار بده که
برای وسط چین کردن یک عنصر ما میتوانیم بیایم و از پراپرتی margin : auto استفاده بکنیم
معرفی پراپرتی initial به معنی اولیه inherit برای ارث بری که یک عنصر بخواد یک خاصیت رو از والد خودش به ارث ببرد و initial میگه اگه اون عنصر یک والدی داشت اون مقدار اولیه که قبلا براش مشخص شده باشه رو بیایم و پیروی بکند یعنی رنگ اولیه که در html برابر با مشکی هستش
مقدار initial رنگ اولیه هستش که در صفحات وب این رنگ اولیه مشکی رنگ هستش