💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۰ emad ta
فصل css3 خلاصه مطالب جلسه 3 استایل دهی به متن بخش اول
جامعه Html & CSS ایجاد شده در ۱۱ خرداد ۱۳۹۹

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

 

معرفی پراپرتی‌های متن :

 

پراپرتی text-align : اگر خواستیم متن ما  بیایم و شیوه قرار گرفتن اشو در داخل المنت بلاکی تکس کنترل کنیم یا به عبارتی align  کردن اون رو انجام بدهیم میایم و از این پراپرتی استفاده میکنیم که مقادیر  Right and left and center اون به ترتیب اون متن رو در وسط  چپ و راست المان تکس امون قرار میدهد همچنین مقادیر دیگه هم میگیرد که مختصرا توضیح میدهیم  justify : هنگامی که ما اومدیم و یک متن طولانی رو قرار دادیم وخواستیم لبه‌های متن مارو برامون تراز میکند از این مقدار برای این پراپرتی استفاده میکنیم

 

پراپرتی line-height :  این  پراپرتی میاد و فاصله بین خطوط رو هم برای ما مشخص میکند که باعث خوانایی بیشتر متن امون برای کاربر می‌شود و برای مقدارش  سایز فونتمون هرچی هست ضرب در 1.5 برای متون فارسی بشه و 1.6 برای متون انگلیسی بشود تا مقدار بهتری رو بگیره

 

نکته : برای استایل دهی کردن‌ها همیشه چیز هایی که عمومی یا کلی هستند رو بیایم و در بالای استایل هامون قرار میدهیم برای مثال ما میخاهیم خطی که در زیر تگ های  a میاد و ایجاد می‌شود رو بیایم و پاک کنیم برای این کار باید از پراپرتی text-decoration استفاده میکنیم 

a {
text-decoration : none;
}

 

پراپرتی  text-decoration : این پراپرتی میاد و یک خط رو برای متن‌های ما قرار میدهد و مقادیری که می‌گیرد به شرح زیر هست overline میاد و یک خط در بالای متن ما قرار میدهد underline میاد و یک خط در زیر خطوط ما می‌کشد و آخری line-through میاد و یک خط بر روی متن ما میکشد

 

پراپرتی text-transform که بیشتر برای متون انگلیسی کاربرد دارد که مقادیر مختلفی دارد که به شرح اونا می‌پر دازیم 

مقدار capitalize میاد و کاراکترهای اول کلمات رو بزرگ در نظر میگیرد یعنی به ازای هرکلمه ای که اسپیس می‌خورد بزرگ میکند مقدار UpperCase همه ی کاراکتر‌ها رو بزرگ میکند مقدار lowerCase میاد و همه ی کاراکترها رو کوچک میکند

 

پراپرتی text-indent میاد و برای خط اول متن امون عمل میکند و یک جورایی جایگزین  padding-right هستش یعنی فاصله داخلی از المان پرنت که از سمت راست اعمال می‌شود

 

پراپرتی letter-spacing فاصله بین کاراکتر هامون رو مشخص میکند که مقدار‌های عددی مثبت و منفی هم میگیرد

پراپرتی word-spacing مثل  پراپرتی بالایی هست فقط برای کلمه‌ها میاد و اعمال می‌شود

 

پراپرتی text-shadow که میاد و یک افکتی رو در داخل متن امون ایجاد میکند و 4 تا ورودی میگیرد که سه تاش عددی و آخری رنگ هستش که اولین مقدار فاصله هست که این سایه از محور x‌ها میاد و میگیرد و مقدار دومی فاصله ای هست که از محور y میگیرد و مقدار سومی blur میاد و محو بودن سایه رو مشخص میکند و مقدار چهارم هم رنگ سایه امون رو برامون مشخص میکند