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

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

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

ادامه مطلب
آموزش html 5 + دانلود کتاب - طراحی سایت در کرج شرکت کیان تجارت فاوا
آموزش html 5 + دانلود کتاب

آموزش html 5 + دانلود کتاب – طراحی سایت در کرج شرکت کیان تجارت فاوا   HTML5 یا زبان نشانه‌گذاری ابرمتنی ۵ یا اچ‌تی‌ام‌ال۵ (به انگلیسی: HyperText Markup Language5 یا HTML5) زبانی برای ساختن و ارائهٔ محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان […]

ادامه مطلب
برندینگ در شبکه های اجتماعی - شرکت طراحی سایت در کرج - کیان تجارت فاوا
برندینگ در شبکه های اجتماعی

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

ادامه مطلب

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