فصل css3 خلاصه مطالب جلسه 3 استایل دهی به متن بخش اول

پرسیده شده
فعالیت 1434 روز پیش
دیده شده 1124 بار
14

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

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

 

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

 

پراپرتی 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 میاد و محو بودن سایه رو مشخص میکند و مقدار چهارم هم رنگ سایه امون رو برامون مشخص میکند

فایل پیوست

emad ta
emad ta

11 خرداد 99