%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

فرمت دهی متن در CSS

ویژگی های متن در CSS

Wiki

قالب بندی متن

این متن بوسیله چند خصوصیت مربوط به متن، قالب بندی شده است، در عنوان، از خصوصیت text-align و color و text-transform استفاده شده است، البته خصوصیت text-transform برای حروف فارسی کارایی ندارد. برای این پاراگراف نیز، تورفتگی خط ابتدایی ، ترازبندی متن و فاصله بین حروف تنظیم شده است. همچنین underline از لینک روبرو حذف شده است."خودتان امتحان کنید"

رنگ متن (Color)

Wiki

خصوصیت color رنگ متن را تنظیم می کند.

در CSS رنگ، به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در این مثال رنگ پیشفرض برای صفحه در گزینشگر body تنظیم شده است:

مثال (فرمت دهی متن در CSS)

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
خودتان امتحان کنید »

تراز بندی متن (Alignment)

Wiki

خصوصیت text-align برای تراز بندی متن در جهت محور X استفاده می شود.

متن را می توان در مرکز یا چپ یا راست و یا کل فضای اختصاص داده شده قرار داد.

زمانی که خصوصیت text-align با مقدار justify تنظیم می شود، با کش آمدن خطوط پاراگراف، خطوط یکسان خواهند شد. (مانند متن روزنامه ها و مجله ها)

مثال (فرمت دهی متن در CSS)

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
خودتان امتحان کنید »

آذین بندی متن (Decoration)

Wiki

خصوصیت text-decoration برای تنظیم و یا حذف Decorationهای یک متن استفاده می شود.

این خصوصیت معمولاً برای حذف underline لینک ها استفاده می شود (به صورت پیشفرض یک لینک دارای underline می باشد):

مثال (فرمت دهی متن در CSS)

a {text-decoration:none;}
خودتان امتحان کنید »

این خصوصیت همچنین برای آذین بندی یا Decoration متن استفاده می شود:

مثال (فرمت دهی متن در CSS)

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
خودتان امتحان کنید »

توجه: توصیه می شود برای متن های معمولی که لینک نیستند، از underline استفاده نشود، چون اغلب، کاربران را به اشتباه می اندازد.


حروف کوچک و بزرگ (Transformation)

Wiki

خصوصیت text-transform حروف یک متن را به حروف بزرگ یا کوچک تبدیل می کند، بنابراین برای حروف فارسی کاربرد ندارد.

  1. uppercase: تمام حروف یک متن را به حروف بزرگ تبدیل می کند.
  2. lowercase: تمام حروف یک متن را به حروف کوچک تبدیل می کند.
  3. capitalize: حروف ابتدایی کلمات یک متن را به حروف بزرگ تبدیل می کند.

مثال (فرمت دهی متن در CSS)

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
خودتان امتحان کنید »

تو رفتگی ابتدای پاراگراف (Indentation)

Wiki

خصوصیت text-indent تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند.

مثال (فرمت دهی متن در CSS)

p {text-indent:50px;}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

مشخص کردن فاصله بین حروف
این مثال نشان می دهد که چگونه فاصله بین حروف یک متن را افزایش و یا کاهش دهیم.

مشخص کردن فاصله بین خطوط
این مثال نشان می دهد که چگونه فاصله بین خطوط یک پاراگراف را مشخص کنیم.

مشخص کردن جهت متن
این مثال نشان می دهد که چگونه جهت یک متن (راست به چپ یا چپ به راست) را تغییر دهیم.

افزایش فاصله خالی بین کلمات
این مثال نشان می دهد که چگونه فاصله بین کلمات یک پاراگراف را افزایش دهیم.

غیر فعال کردن wrapping یک متن
این مثال نشان می دهد که چگونه یک پاراگراف چند خطی، فقط در یک خط نمایش داده شود.

تراز بندی یک عکس در جهت محور Y
این مثال نشان می دهد که چگونه ترازبندی عمودی یک عکس که داخل یک متن است را تنظیم کنیم.


کلیه خصوصیات مربوط به متن

Wiki

خصوصیت توضیحات
color رنگ متن را تنظیم می کند
direction

جهت متن (راست به چپ یا چپ به راست) را تنظیم می کند

letter-spacing

فاصله بین حروف متن را تنظیم می کند

line-height

فاصله بین خطوط یک پاراکراف را تنظیم می کند

text-align

تراز بندی متن در جهت محور X را تنظیم می کند

text-decoration

آذین بندی یا decoration یک متن را تنظیم می کند

text-indent

تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند

text-shadow

به یک متن افکت سایه اضافه می کند

text-transform

کوچکی یا بزرگی حروف یک متن را تنظیم می کند

unicode-bidi  
vertical-align

تراز بندی یک عنصر در جهت محور Y را تنظیم می کند.

white-space

مشخص می کند که با فضاهای خالی داخل یک عنصر چگونه برخورد شود

word-spacing

فاصله بین کلمات یک متن را افزایش یا کاهش می دهد

دیدگاه‌ها  

+6 # amin. 1394-06-28 13:35
چگونه با استفاده از خصوصیت vertical-align متن یک div را در وسط قرار دهیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # شهربانو دوستی 1394-06-28 20:59
با سلام کد لازم برای انجام این کار vertical-align: middle; هستش اما این کد رو وقتی قرار میدید کاری روی متن تگ شما انجام نمیده چون استفاده نمیشه و تقریباً منسوخ شده. برای این کار از padding استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+18 # هادی 1394-05-04 20:52
سلام
بخدا دمتون گرم هرچی تشکر کنم ازتون کمه
ایننارو به زور میخوندم از سایتش تا امروز ترجمشو پیدا کردم
واقعا دمتون گرم خیلی خیلی زیاااااااااااااااد
اگه یه منبعی واسه msdn فارسی منبع android فارسی باشه خیلی خیلی خیلی خوب می شه
اصن من نمیدونم چجوری ازتون تشکر کنم
فقط خوب شد یدونه تگو سرچ کردم رسیدم به اینجا وگرنه تواون سایته انگلیسیه داشتم به فنا میرفتم اصلا نمی فهمیدم چی نوشته
بازم ممنونم ازتون خیلی زیاد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # فربد 1394-03-28 11:28
عالی بود
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+14 # center 1394-01-30 11:08
حقيقتا خسته نباشيد امير پهلوان صادق و مظاهر نصوحي ارجمند ، درود بي پايان ...
درود بر اين سايت ؛ اميدوارم هر روزتون بهتر از ديروز باشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # mohammadmoradi 1394-01-29 17:53
خیلی عالی بخدا من ک حال میکنم دستتون درد نکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mohsen moardi 1393-12-24 22:39
سلام...من يه div دارم كه ميخوام شبيه به سيستم ثبت ديدگاه شما باشه كه حتي اگه چن خط هم نظر بنويسيم باز هم مرتب ميشه و نمايش داده ميشه اما تو اين div وقتي متن زياد باشه به جاي اينكه ارتفاع زياد بشه و تو چن خط نمايش بده از div ميزنه بيرون!چكار بايد بكنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مظاهر نصوحی 1393-12-25 09:10
در قسمت مرجع خصوصیت های css خصوصیت سرریز شدن را توضیح داده ایم:
http://beyamooz.com/cssref/227-css-properties/857-overflow
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # rezax 1393-12-16 13:45
سلام خیلی خیلی خسته نباشید
لطفا تفاوت بین direction و align-text را توضیح دهید به نظرم هر دو دستور مشابه هستند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-12-16 14:06
سلام
خیلی وقت ها شده که اگر بین متن تان یک کلمه انگلیسی باشه، کل متن بهم ریخته نشان داده می شود، در این مواقع تنظیم خصوصیت direction با مقدار rtl (راست به چپ) مشکل را برطرف می کند. و بیاد داشته باشید که برای سایت هایی که محتوای فارسی دارند، تنظیم این خصوصیت بصورت زیر الزامی است:body
{
direction:rtl;
}

و اما با استفاده از خصوصیت text-align، می توانید متن را ترازبندی کنید، یعنی می توان متن را "راست چین"، "چپ چین"، "وسط چین" و یا بقدری متن را بکشیم که تمام طول سطر را اشغال کند:www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_text-align
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mahdighb 1393-09-28 02:46
سلام و خسته نباشید
یه سوال دارم
میشه تو خاصیت hoverکه برا یه divتعریف کردم میشه خواص یه div دیگه مثلا موقعیت مکانیش رو عوض کنم؟
سپاس
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-28 08:26
سلام، متأسفانه چنین قابلیتی در CSS نیست ...! اما با استفاده از jQuery براحتی قابل انجام است. به مثال زیر توجه فرمایید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slide_toggle_hover
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mahdighb 1393-09-28 12:18
متشکر از زحماتتون
من css , html رو تازه از همین سایت یاد گرفتم و با تکنیکها و شگردهاش زیاد آشنا نیستم
الان دارم یه اسلاید شو میسازم که تو کادرش6 تا عکس با فاصله روی هم چیده شدن میخوام وقتی موس رو یکیش میره بقیشون برن کنار امکانش بدون استفاده از زبان دیگه ای نیست؟
باز هم سپاس از وقتی که میذارید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-28 18:27
خواهش می کنم، بنظرم با CSS3 بتونیم یه کارایی بکنیم. مثال زیر رو ببیند: (داخل هر کدام از divها می تونه عکس مورد نظر شما بصورت background تعریف بشه ...!)
beyamooz.com/try_it_yourself/tryit.php?filename=trycss3_transition_multiple_div
پیشنهاد می شه قبل از بررسی مثال، مطلب "آموزش CSS3-انتقال یا Transition" رو بررسی نمایید:
http://beyamooz.com/css3/656
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mahdighb 1393-09-28 23:18
باز هم ممنونم
اما تو این مثال عرض مجموع divها بعد hover زیاد میشه که با قالب کلی که 900pxهست جور در نمیاد

من 6 تا div باعرض550xpوposi tion:absolute; و بک گراند عکس رو با فاصله 150px از هم داخل یه divبا عرض 900pxوposition: relative; چیدم حالا با در زمان hover روی یکی از عکسا باید عرض اون ،بشه عرض واقعیش یعنی 550px و باقی 900pxبه بقیه تقسیم شه یعنی هر کدوم 70px

به هر حال ممنونم فکر میکنم باید jQuery رو هم یاد بگیرم
به امید پیشرفت روز افزونتوت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-09-29 09:46
خواهش می کنم، بله همان طور که متوجه شدید، چاره ای جز استفاده از jQuery نیست...!
اما برای اینکه کار سریع تر انجام بشه، می تونید از پلاگین liteAccordion استفاده کنید، به مثال زیر توجه کنید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_liteAccordion_basic_example
اما برای اطلاعات بیشتر در مورد این پلاگین به لینک زیر مراجعه کنید:
http://beyamooz.com/jquery/340-jquery-plugin/2603
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # mahdi قاسمی 1393-09-30 17:26
سلام و سپاس دوست و استاد گرامی
این اسلایدر رو با راهنماییهای شما آماده کردم خواستم لود کنم تا هم با نقات ضعفم آشنا شم هم اگه بقیه دوستان خواستن استفاده کنن
سپاس
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-10-01 07:40
خدا رو شکر، زحمت بکشید، کارتون رو تحت یک فایل Zip به [email protected] ارسال کنید ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # دادمهر صفاييان پور 1393-08-21 10:11
سلام وخسته نباشید خیلی ممنون از سایت خوبتون من از سایت شما بسیار استفاده کردم تمام اطلاعات نامنظم در ذهنم طبقه بندی و مرتب شد و نکات ریزی که توجه داده بودید بسیار مفید بودنمیدونم چطور از شما تشکر کنم فقط برای همه فعالان درسایتتون آرزوی موفقیت میکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # محسن_م 1392-12-28 17:11
سلام عالییییییییییه.....
لطفا برای همه خصوصیات مقادیری که میتونن بگیرن را داخل جدول ذکر کنید
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-08-21 14:35
سلام، با کلیک روی لینک مربوط به هر خصوصیت، می توانید مقادیر آنها را بررسی نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی