طراحی وب سایت در کرج
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 قبل از نام کلاس نیز انجام دهیم. منتها تفاوتی که بوجود می‌آمد این بود که تغییرات نه تنها بر روی پاراگراف‌ها بلکه روی هر چیزی که دارای آن کلاس باشد (مثل عناوین، لینک‌ها و یا …) اعمال می‌شد.

پست مرتبط
سی اس اس | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
۸ اسرار آموزش CSS سریع

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

ادامه مطلب
سی اس اس 3 | طراحی سایت در کرج | طراحی وب سایت در کرج |کیان تجارت فاوا
سی اس اس۳ آیا هنوز هم باید به صورت دستی کد گذاری کنیم؟

سی اس اس۳ آیا هنوز هم باید به صورت دستی کد گذاری کنیم؟ عصر طراحی وب سایت با تغییر سی اس اس۳ تغییر کرد. سی اس اس ۳ توانایی طراحان وب را برای طراحی و محتویات جداگانه به ارمغان آورد، صرفه جویی در کارهای زیادی در قالب بندی و کنترل صفحات وب. پس از تغییر […]

ادامه مطلب
آموزش جی‌کوئری - jQuery + دانلود - شرکت طراحی سایت در کرج - شرکت کیان تجارت فاوا
آموزش جی‌کوئری – jQuery + دانلود

آموزش جی‌کوئری – jQuery + دانلود – شرکت طراحی سایت در کرج – شرکت کیان تجارت فاوا   جی‌کوئری یا jQuery یک کتابخانه جاوا اسکریپت سبک وزن چند مرورگری می‌باشد که برای ساده کردن نوشتن اسکریپ‌های سمت-مشتری در  (HTML) طراحی شده است. تعداد کدهای مورد نیاز انجام یک فرآیند به وسیله جی‌کوئری در مقایسه با جاوااسکریپت بسیار کمتر خواهد […]

ادامه مطلب

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