طراحی وب سایت در کرج
026-34204893
09101013858

آموزش CSS – تغییر استایل متون HTML

آموزش CSS – تغییر استایل متون HTML

آموزش CSS – تغییر استایل متون HTMLطراحی سایت در کرج شرکت کیان تجارت فاوا

 رنگ متن:

  • نام :‌ color
  • این ویژگی چه کاری انجام می‌دهد؟‌  رنگ متن‌ها را تغییر می‌دهد!
  • چه چیزهایی را در مقابلش بنویسیم؟  انواع رنگ‌ها را !
  • نمونه نوشتن این ویژگی: color: red   یا  color: #44444   یا   (“۲,color: rgb(“2,2,2

یادآوری از گذشته: شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است. مثلا با انتخاب المان body تمامی متن‌های موجود در صفحه شما به استایل داده شده در می‌آید. مثال‌های زیر را نگاه کنید.

HTML

<h2>عنوان با رنگ نارنجی نوشته می‌شود</h2>

<p>متن با رنگ طوسی نوشته می‌شود.</p>

CSS

h1 {
color:  red ;
}

p  {
color:  gray;
}

عنوان با رنگ نارنجی نوشته می‌شود

متن با رنگ طوسی نوشته می‌شود.

text-align

  • نام :‌ text-align
  • از این ویژگی چه کاری انجام می‌دهد؟  نحوه و محل قرار گیری متن‌ها را مشخص می‌کند !
  • چه چیزهایی را در مقابلش بنویسیم؟ انواع جهت‌ها را! راست، چپ و وسط.
  • نمونه نوشتن این ویژگی: text-align: center  یا  text-align : right  یا  text-align: left

با کمک این دستور شما می‌توانید متن‌های خود را به صورت راست چین، چپ چین یا وسط چین منظم کنید. دستورات مربوط به این موضوع را در زیر مشاهده می‌کنید:

HTML

<h1class=”center”>متن وسط چین</h1>

<p class=”right”>متن راست چین</p>

<p class=”left”>متن چپ چین</p>

CSS

 

center {
text-align: center;
}

p.right{
text-align:  right;
}

p.left {
text-align:  left;
}

متن وسط چین

متن راست چین

متن چپ چین

Text Decoration

  • نام :‌ Text Decoration
  • از این ویژگی چه کاری انجام می‌دهد؟ نوع نوشتن متن را تغییر می‌دهد
  • چه چیزهایی را در مقابلش بنویسیم؟ نوع استایل مورد نظر! خط کشیدن زیر متن، خط کشیدن روی متن و …
  • نمونه نوشتن این ویژگی: text-decoration: none|underline|overline|line-through|initial|inherit

گاهی المان‌های html  صفحه، استایل‌های مخصوص خود را دارند. مثلا لینک‌ها درhtml به صورت پیش‌فرض با رنگ آبی نشان داده می‌شوند و همچنین یک خط در زیر آن‌ها کشیده می‌شود. بدین ترتیب شما اگر بخواهید آن‌ها را به صورت ساده در بیاورید می‌بایست برای این کار از دستور Text Decoration استفاده کنید. این دستور را در زیر مشاهده می‌کنید.

a {
text-decoration: none;
}

برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب می‌کنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگراف‌ها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحه‌یhtml به المان مورد نظر اتریبیوت  “نام دلخواه برای ایجاد گروه”=class اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم.

HTML

<p> متن با فونت تاهما </p>

CSS

p {
font-family: “tahoma”;
}

متن با فونت تاهما

یا بدین صورت که اسم کلاس یا id را بنویسیم. یعنی در اینجا ما با تمامی پاراگراف‌ها کاری نداریم و تنها پاراگراف‌هایی با کلاس‌های بخصوص فلان و فلان و فلان را کار داریم. همچنین می‌توانستیم این کار را بدون نوشتن کلمه p قبل از نام کلاس نیز انجام دهیم. منتها تفاوتی که بوجود می‌آمد این بود که تغییرات نه تنها بر روی پاراگراف‌ها بلکه روی هر چیزی که دارای آن کلاس باشد (مثل عناوین، لینک‌ها و یا …) اعمال می‌شد.

پست مرتبط
HTML | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
زبان HTML

زبان HTML زبان HTML زبان نشانه گذاری است که برای توسعه صفحات وب هر زمان که بخواهید یک صفحه وب را طراحی کنید HTML مورد نیاز است. محصور شده توسط براکت زاویه (<>). HTML (زبان نشانه گذاری Hyper Text) زبان نشانه گذاری برای اسناد وب است. عناصر HTML برای نوشتن کد های HTML استفاده می […]

ادامه مطلب
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
قالب جی کوئری در مقابل قالب های استاتیک

قالب جی کوئری در مقابل قالب های استاتیک همانطور که صنعت توسعه وب به سرعت و بدون درنگ پیشرفت می کند، دیر یا زود ما درباره خلاقیت های گذشته خود را فراموش می کنیم و سعی می کنیم تکنولوژی های نوآورانه را برای تجربه بهتر تجربه کنیم. امروزه، زمانی که دینامیک و عمل زنده روند […]

ادامه مطلب
css | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
طراحی وب سایت CSS

طراحی وب سایت CSS Cascading Style Sheets (یا CSS برای کوتاه) به آرامی، اما قطعا تبدیل به یک استاندارد طراحی وب سایت در طول چند سال گذشته شده است. سالها پیش این کار را نکردم که مردم از Frames استفاده کنند تا محتوای آنها را در صفحات وب خود قرار دهند و جداول به تدریج […]

ادامه مطلب

دیدگاهتان را بنویسید