این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با متن ها یا Texts در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با متن ها یا Texts در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 کار با متن ها یا Texts در CSS
- 2 آموزش کار با ویژگی Color در CSS
- 3 آموزش کار با ویژگی Text-align در CSS
- 4 آموزش کار با ویژگی Text-Decoration در CSS
- 5 آموزش کار با ویژگی Text-Transform در CSS
- 6 آموزش کار با ویژگی Letter-Spacing در CSS
- 7 آموزش کار با ویژگی line-height در CSS
- 8 آموزش کار با ویژگی direction در CSS
- 9 آموزش کار با ویژگی Word-Spacing در CSS
- 10 آموزش کار با ویژگی Text-Shadow در CSS
کار با متن ها یا Texts در CSS
در این بخش از آموزش مقدماتی زبان CSS میخواهیم با ویژگی های که مخصوص کار با متن ها هستن کار کنیم، یاهم در واقع میخواهیم با قالب بندی متن ها در CSS آشنا شویم.
یسری از ویژگی های CSS هستن که با استفاده از آنها میتوان با متن ها کار کرد :
- color : رنگ متن
- text-align : تراز متن
- text-decoration : زیرخط دار کردن متن
- text-transform : برای تبدیل کردن متن
- letter-spacing : فاصله بین حروف
- line-height : فاصله بین سطرها
- direction : برای تنظیم جهت متن
- word-spacing : فاصله بین کلمات
- text-shadow : سایه متن
Free-Learn
آموزش کار با ویژگی Color در CSS
در زبان CSS با استفاده از ویژگی Color میتوان رنگ متن یک عنصر رو مشخص کرد، که این رنگ میتونه از روش های مختلف رنگ دهی مشخص شود. ( حتما آموزش رنگ هارو مشاهده نمایید )
- استفاده از نام رنگ مثه ( blue و.. )
- استفاده از کدهگزادسیمال مثه ( #۵db616 )
- استفاده از مقدار rgb مثه rgb(123,31,222)
مثال شماره ۱ : مشخص کردن رنگ زمینه و رنگ متن
|
1 2 3 4 5 6 7 8 9 |
<style> body{ background-color:#5db616; color:#fff; text-align:center; } </style> |
Free-Learn
آموزش کار با ویژگی Text-align در CSS
با استفاده از ویژگی Text-align میتوان تراز افقی متن رو در صفحه مشخص کرد.
- left : سمت چپ
- center : در وسط
- right : سمت راست
- justify : کشیدگی متن
مثال شماره ۱ : قرار دادن متن در سمت چپ ، وسط و راست
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .m1{ text-align:left; } .m2{ text-align:center; } .m3{ text-align:right; } </style> |
مثال شماره ۲ : استفاده از مقدار justify ( سعی میکنه متن رو بِکِشه تا بتونه تمام فضای باکس رو پُر کنه )
|
1 2 3 4 5 6 7 |
<style> .m2{ text-align:justify; } </style> |
Free-Learn
آموزش کار با ویژگی Text-Decoration در CSS
با استفاده از این ویژگی در CSS میتوان دکوراسیون یک متن رو مشخص کرد، منظور از دکوراسیون میتونه مثلا یک خط به زیر یک متن باشه یا یک خط بروی متن و یا دیگر حالت ها که در ادامه با آنها آشنا خواهید شد.
- overline : کشیدن خط در بالای متن
- line-through : کشیدن خط روی متن
- underline : کشیدن خط زیر متن
- none : حذف خط
مثال شماره ۱ : کشیدن خط به بالا، رو و زیر متن
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .m1{ text-decoration:overline; } .m2{ text-decoration:line-through; } .m3{ text-decoration:underline; } </style> |
مثال شماره ۲ : بصورت پیش فرض زیر لینک ها ( یعنی تگ a ) خط کشیده شده، میخواهیم اون خط رو حذف کنیم
|
1 2 3 4 5 6 7 |
<style> .m1{ text-decoration:none; } </style> |
Free-Learn
آموزش کار با ویژگی Text-Transform در CSS
با استفاده از این ویژگی میتوان حروف یک متن را تبدیل کرد، منظور از تبدیل کردن یعنی مثلا تمام حروف یک متن را بزرگ کنیم یا کوچک کنیم و یا مثلا فقط حرف اول هر کلمه را بزرگ کنیم.
- uppercase : تمامی حروف را بزرگ میکند
- lowercase : تمامی حروف را کوچک میکند
- capitalize : حرف اول هر کلمه را بزرگ میکند
مثال شماره ۱
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .m1{ text-transform:uppercase; } .m2{ text-transform:lowercase; } .m3{ text-transform:capitalize; } </style> |
Free-Learn
آموزش کار با ویژگی Letter-Spacing در CSS
با استفاده از این ویژگی میتوان بین حروف یا کاراکترهای یک متن فاصله انداخت.
|
1 2 3 4 5 6 7 |
<style> .m1{ letter-spacing:5px; } </style> |
Free-Learn
آموزش کار با ویژگی line-height در CSS
با استفاده از این ویژگی میتوان یک فاصله یا یک فضای خالی را بین سطرهای متن ایجاد کرد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .m1{ line-height:30px; } .m2{ line-height:7px; } </style> |
Free-Learn
آموزش کار با ویژگی direction در CSS
با استفاده از این ویژگی میتوان جهت متن / محتوارو در یک تگ خاص یا هم کل صفحه مشخص کرد.
- ltr : گزینه پیش فرض / از چپ به راست
- rtl : از راست به چپ
مثال شماره ۱ : استفاده در یک تگ خاص ( مثلا در تگ P )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .m1{ direction:ltr; } .m2{ direction:rtl; } </style> |
مثال شماره ۲ : مشخص کردن جهت کل صفحه ( باید در تگ body استفاده کنیم )
|
1 2 3 4 5 6 7 |
<style> body{ direction:rtl; } </style> |
Free-Learn
آموزش کار با ویژگی Word-Spacing در CSS
با استفاده از این ویژگی میتوان یک فاصله را بین کلمات یک متن ایجاد کرد.
|
1 2 3 4 5 6 7 |
<style> .m1{ word-spacing:25px; } </style> |
Free-Learn
آموزش کار با ویژگی Text-Shadow در CSS
با استفاده از این ویژگی میتوان برای یک متن سایه ایجاد کرد.
|
1 2 3 4 5 6 7 |
<style> h2{ text-shadow: 0 8px pink; } </style> |
خب دوستان خسته نباشید به پایان این جلسه ( آموزش کار با متن ها یا Texts در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید. لطفا در جلسات بعدی همچنان با بنده همراه باشید.
