آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش متن CSS

دوره های مرتبط با این مقاله

رنگ متن

خاصیت رنگ یا color property همان طور که از اسم آن پیدا است، ویژه ی انتخاب رنگ نوشته یا متن مورد نظر مورد استفاده قرار می گیرد .

در CSS، رنگ غالباً توسط مقادیر فهرست شده در زیر تعیین می شود :

  • مقدار HEX (شانزده شانزدهی) – مثل "#ff0000"
  • مقدار RGB (RED BLUE GREEN) – مانند "rgb(255،0،0)"
  • یک اسم رنگ (color name) – مانند "red"

رنگ پیش فرض برای یک صفحه در بدنه ی انتخاب گر (body selector) تعریف می گردد .

مثال:

نمونه یک

       body {
            color: blue;
        }

        h1 {
            color: #00ff00;
        }

        h2 {
            color: rgb(255,0,0);
        }
امتحان کنید

نکته : برای ایجاد CSS ی که با استانداردهای W3C مطابقت داشته باشد : چنانچه خاصیت رنگ (color property) را تعریف کردید، در آن صورت لازم است خاصیت background-color را نیز تعریف کنید .

تراز بندی متن (text alignment)

خصوصیت text-align در واقع یک متن را به صورت افقی تراز می کند (جهت چيدمان نوشته را در صفحه با نمای افقی تنظیم می کند) .

نوشته می تواند در وسط صفحه قرار گیرد (وسط چین شود)، همچنین در سمت چپ یا راست قرار داده شود و یا حتی از هر دو سمت راست و چپ تراز (justify) شود .

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

مثال:

نمونه دو

        h1 {
            text-align: center;
        }

        p.date {
            text-align: right;
        }

        p.main {
            text-align: justify;
        }
امتحان کنید

اعمال جلوه های بصری به متن ( (Text Decoration

خاصیت text-decoration به منظور اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته ی مورد نظر بکار گرفته می شوند .

خاصیت text-decoration به منظور اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته ی مورد نظر بکار گرفته می شوند .

مثال:

نمونه سه

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

از آن همچنین برای افزودن جلوه های بصری (decoration) به نوشته نیز استفاده می شود :

مثال:

نمونه چهار

        h1 {
            text-decoration: overline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: underline;
        }
امتحان کنید

توجه : توصیه می شود از کشیدن خط زیر متنی که لینک نیست خودداری کنید، زیرا با انجام این کار کاربر دچار سردرگمی می شود .

تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس (Text Transformation)

خاصیت text-transform به منظور تعیین کوچکی و بزرگی حروف (مدیریت اندازه ی حروف) در متن استفاده می شود .

از آن می توان برای تبدیل هر نوشته ی به حروف بزرگ یا کوچک استفاده کرد و یا حتی به کمک آن حروف اول هر کلمه را به حرف بزرگ تبدیل کرد :

آموزش css مثال:

نمونه پنج

        p.uppercase {
            text-transform: uppercase;
        }

        p.lowercase {
            text-transform: lowercase;
        }

        p.capitalize {
            text-transform: capitalize;
        }
امتحان کنید

تنظیم تو رفتگی متن (TEXT INDENTATION)

خاصیت text-indent را می توان به منظور تنظیم و مدیریت میزان تو رفتگی اولین خط متن مورد استفاده قرار داد (ميزان تو رفتگی و نقطه شروع اولين خط از يک پاراگراف نوشته را اداره می کند).

مثال:

نمونه شش

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

کلیه ی خاصیت های مربوط به متن در CSS در جدول زیر با ذکر عملکرد آن ها فهرست شده :

خصوصیت (PROPERTY)
شرح عملکرد
color
رنگ نوشته را تعیین می کند
direction
جهت نوشتن / قرارگیری متن را تعریف می کند
Letter-spacing
فاصله ی بین کاراکترهای یک متن را کاهش یا افزایش می دهد
Line-height
فاصله ی بین خطوط یک پاراگراف توسط این این خاصیت مشخص می شود
Text-align
نحوه ی چیدمان (افقی) متن را مشخص می کند
Text-decoration
افزودن جلوه های تصویری به نوشته را امکان پذیر می سازد (به شما اجازه می دهد دکر یا تزیینات متن را کنترل کنید)
Text-align
نحوه ی چیدمان و تراز بندی یک متن را تعیین می کند
Text-shadow
جلوه یا ایفکت سایه که به نوشته اضافه می شود را تعیین می کند
Text-transform
کوچک و بزرگی حروف را تعیین می کند
Unicode-bidi
به همراه خاصیت direction به منظور تعیین این که آیا متن باید برای پشتیبانی از چندین زبان در یک سند واحد بازنویسی (override) شود یا خیر
Vertical-align
یک المان را به صورت یا با نمای عمودی تراز بندی می کند (می چیند)
White-space
به واسطه ی این خاصیت می توان نحوه ی نمایش فاصله بین حروف را در متن تنظیم کرد
Word-spacing
فاصله ی بین کلمات در یک نوشته توسط این خصوصیت تعیین می شود (فاصله ی بین کلمات در یک نوشته را کاهش یا افزایش می دهد) .
  • 4616
  •    2602
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .