سایر
2 دقیقه پیش | جمهوری آذربایجان با گرجستان و ترکیه مانور مشترک نظامی برگزار می کندایرنا/ جمهوری آذربایجان روز یکشنبه قبل از آغاز مذاکرات وین با حضور نمایندگان منطقه قره باغ کوهستانی، اعلان کرد که قصد دارد تمرین های نظامی با مشارکت گرجستان و ترکیه برگزار ... |
2 دقیقه پیش | ژنرال فراری سوری از رژیم صهیونیستی درخواست کمک کردالعالم/ ژنرال سابق و فراری ارتش سوریه که به صف مخالفان بشار اسد پیوسته، از رژیم صهیونیستی خواست که در مقابله با رییس جمهوری سوریه، مخالفان مسلح (تروریست ها)را یاری کند!.به ... |
آموزش 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 تنظیم شده است:
مثالbody {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
خودتان امتحان کنید »
تراز بندی متن (Alignment)Wiki
خصوصیت text-align برای تراز بندی متن در جهت محور X استفاده می شود.
متن را می توان در مرکز یا چپ یا راست و یا کل فضای اختصاص داده شده قرار داد.
زمانی که خصوصیت text-align با مقدار justify تنظیم می شود، با کش آمدن خطوط پاراگراف، خطوط یکسان خواهند شد. (مانند متن روزنامه ها و مجله ها)
مثالh1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}
خودتان امتحان کنید »
آذین بندی متن (Decoration)Wiki
خصوصیت text-decoration برای تنظیم و یا حذف Decorationهای یک متن استفاده می شود.
این خصوصیت معمولاً برای حذف underline لینک ها استفاده می شود (به صورت پیشفرض یک لینک دارای underline می باشد):
مثالa {text-decoration:none;}
خودتان امتحان کنید »
این خصوصیت همچنین برای آذین بندی یا Decoration متن استفاده می شود:
مثالh1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}
خودتان امتحان کنید »
توجه: توصیه می شود برای متن های معمولی که لینک نیستند، از underline استفاده نشود، چون اغلب، کاربران را به اشتباه می اندازد.
حروف کوچک و بزرگ (Transformation)Wiki
خصوصیت text-transform حروف یک متن را به حروف بزرگ یا کوچک تبدیل می کند، بنابراین برای حروف فارسی کاربرد ندارد.
uppercase: تمام حروف یک متن را به حروف بزرگ تبدیل می کند. lowercase: تمام حروف یک متن را به حروف کوچک تبدیل می کند. capitalize: حروف ابتدایی کلمات یک متن را به حروف بزرگ تبدیل می کند. مثالp.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}
خودتان امتحان کنید »
تو رفتگی ابتدای پاراگراف (Indentation)Wiki
خصوصیت text-indentation تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند.
مثال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ویدیو مرتبط :
آموزش طراحی سایت با CSS | آموزش استایل دهی متن های انتخاب شده (highlighted) با استفاده از CSS