آموزش مقدماتی CSS خواص مقدماتی (استایل دهی متن نوشته) – جلسه اول

در این سری از مطالب آموزشی قصد آموزش css که تکنیک استایل دهی قالب وبسایت می باشد را داریم ، در مطلب قبلی در مورد سی اس اس در مورد مفهوم این زبان ، تاریخچه ، کاربرد ، مزایا و روش های تعریف این زبان در HTML ، صحبت کردیم ، پیشنهاد می شود قبل از شروع این آموزش ، “CSS جادوگر ظاهر وبسایت شما” را مطالعه کنید.

در این بخش ، روش جدید قالب بندی و اعمال خواص به عناصر اچ تی ام ال مطرح شده است . در این قسمت نحوه کد نویسی و انواع حالت های ممکن را برای خواص مقدماتی و اصلی css ، در قالب مثال های عملی همراه با کد برنامه و خروجی واقعی ارائه شده است.

آشنایی با کلاس و آی دی

 

آموزش مقدماتی CSS خواص مقدماتی

یکی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل ها است ، کلاس و آی دی الگوهایی مشخصی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری تگ های html استفاده می شود.

برای تعریف کلاس از کاراکتر ‘.’ و برای تعریف آی دی از کاراکتر ‘#’ استفاده می کنیم

#IdName{Attribute:Value}

.ClassName{Attribute:Value}

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#main{
  background-color:red;
}

.text{
color:blue;
}

پس از تعریف کلاس و آی دی در css ، برای استفاده از آن در HTML به صورت زیر عمل میکنیم :

< p id="main" >آموزش سی اس اس< /p >
<  p class="text" >آموزش سی اس اس< /p >

خروجی دستورات بالا :

آموزش سی اس اس

آموزش سی اس اس

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

در ادامه به خواص مقدماتی سی اس اس و در ابتدا به خواص متن و نوشته می پردازیم که به وسیله این خواص در css ، می توان ظاهر نوشته را تغییر داد . این خواص برای تغییر رنگ نوشته ، جهت چیدمان ، اندازه و … متن به کار می روند.

خاصیت color :

این خاصیت تعیین کننده رنگ نوشته می باشد که مقدار دهی به این خاصیت به سه شیوه : نام رنگ ، rgb و عدد هگزادسیمال می باشد که در ادامه به صورت یک مثال این سه روش را توضیح خواهیم داد :

< p style="color:red" >رنگ نوشته یک< /p >
< p style="color:rgb(50, 55, 60)" >رنگ نوشته دو< /p >
< p style="color:#7AD03A" >رنگ نوشته سه< /p >

خروجی دستورات بالا :

رنگ نوشته یک

رنگ نوشته دو

رنگ نوشته سه

 

خاصیت direction :

این خاصیت جهت نوشته را مشخص می کند ، که مقدار این خاصیت می تواند یکی از دو حالت زیر باشد :

  • rtl : حالت راست به چپ برای زبان هایی مثل فارسی
  • ltr : حالت چپ به راست برای زبان هایی مثل انگلیسی

خاصیت line-height :

توسط این خاصیت می توان فاصله بین خطوط را در پاراگراف یا نوشته تعیین کرد . برای این کار یکی از حالات زیر استفاده می شود :

  • حالت normal : در این حالت فاصله بین خطوط نرمال و معمولی می باشد که حالت پیش فرض نیز همین مقدار است
  • number : در این حالت یک عدد معمولی تعیین می شود که این عدد در اندازه استاندارد فاصله خطوط ضرب شده و اندازه جدید را ایجاد می کند
  • length : توسط این حالت یک اندازه بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و … را برای فاصله خطوط تعیین می کنیم
  • درصد % : توسط این حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط تعیین می کنیم

 

خاصیت letter-spacing :

از خاصیت برای تعیین اندازه فاصله بین حروف در نوشته استفاده می شود ، که یکی از ۲ حالت زیر می تواند باشد :

  • حالت normal : در این حالت فاصله بین حروف نرمال و معمولی می باشد که حالت پیش فرض نیز همین مقدار است
  • length : توسط این حالت یک اندازه بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و … را برای فاصله حروف تعیین می کنیم

به مثال زیر و خروجی آن توجه بفرمایید :

< p style="color: Blue; letter-spacing:normal" >نوشته با فاصله حروف استاندارد< /p >
< p style="color: Green; letter-spacing:5px" >نوشته با فاصله حروف ۵ پیکسل< /p >

خروجی دستورات بالا :

نوشته با فاصله حروف استاندارد

نوشته با فاصله حروف ۵ پیکسل

خاصیت text-align :

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

  • left : جهت چیدمان چپ
  • right : جهت چیدمان راست
  • center : جهت چیدمان میانه
  • justify : این حالت هر دو طرف نوشته را تراز می کند

 

خاصیت text-decoration :

این خاصیت برای اعمال جلوه های تصویری به نوشته استفاده می شود ، این خاصیت می تواند یکی یا هر سه حالت زیر را داشته باشد :

  • none : نوشته به صورت ساده و یدون جلوه نمایش داده می شود
  • underline : نوشته به صورت زیر خط دار نشان داده می شود
  • overline : در بالای نوشته یک خط به نمایش در می آید
  • line-through :نوشته به صورتی که یک خط از وسط آن گذشته است ، نمایش داده می شود
< p style="text-decoration: underline overline line-through" >
در این حالت هر سه جلوه باهم اعمال شده است
< /p >

خروجی دستورات بالا :

در این حالت هر سه جلوه باهم اعمال شده است

 

خاصیت text-indent :

به وسیله این خاصیت میران تو رفتگی و نقطه شروع اولین خط از یک پاراگراف را به یکی از دو حالت length یا % درصد می توان تعیین کرد.

 

خاصیت text-transform :

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

  • none : نوشته به صورت استاندارد و همانطور که نوشته شده نمایش داده می شوده
  • capitalize :  در این حالت حرف اول نوشته به صورت بزرگ و ما بقی به صورت کوچک نشان داده می شود
  • uppercase : در این حالت تمام حروف به صورت بزرگ نشان داده می شود
  • lowercase : در این حالت تمام حروف به صورت کوچک نشان داده می شود

این حالت بیشتر در نوشته های لاتین کاربرد دارد و در زبان فارسی بی معنی است

به مثال زیر توجه بفرمایید  :

< p style="color: blue; text-transform: capitalize " >
   Capitalized
< /p >
< p style="color: Green; text-transform: uppercase " >
   Uppercase
< /p >
< p style="color: Red; text-transform: lowercase " >
   Lowercase
< /p >

خروجی دستورات بالا :

Capitalized

Uppercase

Lowercase

 

خاصیت word-spacing :

به وسیله این خاصیت می توان فاصله بین کلمات را در یک نوشته یا پاراگراف مشخص کرد ، که می تواند یکی از ۲ حالت normal یا length را داشته باشد . که نحوه مقدار دهی به آن ها در بالا  گفته شده است.

به مثال زیر در باره این خاصیت توجه بفرمایید :

< p style="color: Green" >
 نوشته با فاصله کلمات استاندارد
< /p >
< p style ="color: Red; word-spacing: 8px" >
   نوشته با فاصله کلمات ۵ پیکسل
< /p >

خروجی دستورات بالا :

نوشته با فاصله کلمات استاندارد

نوشته با فاصله کلمات ۵ پیکسل

نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.