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

بایگانی برچسب‌ها : آموزش CSS به زبان ساده

آموزش css - جعبه‌ها و قاب‌ها در css - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش css – جعبه‌ها و قاب‌ها در css

آموزش css – جعبه‌ها و قاب‌ها در cssطراحی سایت در کرج شرکت کیان تجارت فاوا

یکی ازمفاهیم ابتدایی ولی مهم css و html مدل جعبه‌ای است. در واقع می‌توان هر المانhtml را به صورت چند لایه تصور کرد. یک لایه‌ی اصلی در این المان‌ها محتوایی است که وجود دارد. لایه بعدی بردار یا قابی است که دور تا دور این المان کشیده شده است و در حالت پیش‌فرض نامرئی است، ولی شما می‌توانید با کمک دستور border آن را ظاهر کنید. لایه بعدی لایه پدینگ یا فضایی است که بین بردار و محتوا قرار می‌گیرد و این دو را از هم جدا می‌کند. لایه آخر نیز فضای بین بردار یک المان با بردار المان‌های دیگر است که به مارجین نامیده می‌شود.

در شکل زیر می‌توانید این موضوع را به وضوح مشاهده کنید:

box model ebef6

اضافه کردن قاب:

  • در حالت پیش‌فرض قابی که دور تا دور المان‌های html وجود دارد، دیده نمی‌شود. ولی شما هر زمان که بخواهید می‌توانید این قاب را با رنگ و ضخامت دلخواه نمایش دهید.
    • نام :‌ border-style و border-size
    • این ویژگی چه کاری انجام می‌دهد؟  برای تعیین قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.
    • چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه و نوع قاب دور المان‌ها را.
    • نحوه‌ی استفاده: border-style: solid و border-size: 1px را در بخش دستورات می‌نویسیم.
    • همانطور که گفتیم، هر المان اچ‌تی‌ام‌ال در واقع دارای یک قاب منحصر به فرد است که دور تا دور المان را اشغال کرده. برای همین موضوع معمولا این قاب به صورت نامرئی است؛ ولی همیشه وجود دارد.

 

تغییر رنگ و حالت قاب:

نام :‌ border-style و border-color

این ویژگی چه کاری انجام می‌دهد؟  برای تعیین رنگ قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.

چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه رنگ و نوع قاب دور المان را

نحوه استفاده: border-style: solid و border-size: 1px و border-color: red

دستور  border-style می‌تواند حالت‌های مختلفی داشته باشد. این دستور همانطور که گفتیم در واقع نوع بردار را مشخص می‌کند. نوع بردار می‌تواند به صورت خطی‌(solid)، به صورت خط چین (dashed) و یا به صورت نقطه‌چین (dotted) باشد.

 

HTML

<div class=”border”> المانی با ابعاد مشخص و قاب مرئی </div>

CSS

border {
border-style: solid;
border-color:  #۹۸bf21

    width:  ۲۰۰px;

   height: 300px;
}

المانی با ابعاد مشخص و قاب مرئی

 

Tagged
آموزش CSS - تغییرات فونت در CSS - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش CSS – تغییرات فونت در CSS

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

 

تغییر فونت‌ها در CSS:

در قدم اول به هر یک از سه روشی که دوست داریم و مناسب‌تر به نظر می‌رسد المان مورد نظر را انتخاب می‌کنیم. مثلا ما در این مثال المان‌های پاراگراف دارای کلاس text را با اندازه فونت بزرگ نشان دهیم. برای این کار مرحله‌ی زیر را طی می‌کنیم.

  • نام:‌ font-size
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر اندازه فونت
  • چه چیزهایی را در مقابلش بنویسیم؟  اندازه فونت بر اساس پیکسل یا em
  • نمونه نوشتن این دستور: font-size: 14px

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

.p {

کروشه را باز و بسته  می‌کنیم و برای ایجاد فضای مناسب یک اینتر وارد می‌کنیم.

.p {

در مرحله‌ی بعد تغییرات مورد نظر را در بین کروشه می‌نویسیم. در اینجا ما قصد داریم تا اندازه‌ی پاراگراف را تغییر دهیم؛ پس از دستور :font-size استفاده کرده‌ایم. در اینجا باید مقدار فونت دلخواه را بر حسب پیکسل بیان کنیم. مثلا اینجا فونت ما ۱۸px است که اندازه‌ی متوسطی است. با آزمون و خطا می‌توانید مقدار اندازه‌ی فونت دلخواهتان را پیدا کنید.

HTML

<p class=”text”> این متن با فونت اندازه ۱۸ پیکسل است</p>

CSS

.text {
font-size: ۱۸px;
}

این متن با فونت اندازه۱۴ پیکسل است.

تغییر نوع فونت:

  • نام: font-family
  • این ویژگی چه کاری انجام می‌دهد؟‌ تغییر نوع فونت
  • چه چیزهایی را در مقابلش بنویسیم؟  نام فونت‌ دلخواه
  • نمونه نوشتن این ویژگی: font-family: tahoma

برای تغییر نوع فونت نیز در مرحله‌ی اول، المان مورد نظر را انتخاب می‌کنیم. سپس در بین کروشه دستور font-family را می‌نویسیم و در جلوی آن نام فونتی که قصد انتخاب آن را به عنوان فونت المان داریم انتخاب می‌کنیم. مثال زیر این کار را نشان می‌دهد.

HTML

<p> این متن با فونت تاهما نوشته می‌شود</p>

CSS

p {
font-family: “Times New Roman”, Times, serif;
}

این متن با فونت تاهما نوشته می‌شود

نکته: می‌توانیم چندین فونت را در جلوی font-family بنویسیم. بدین ترتیب در صورتی که اولین فونت‌ها در سیستم موجود نباشد، فونت بعدی استفاده خواهد شد.

 

حالت فونت:

برای تغییر استایل فونت نیز از دستور font-style استفاده می‌شود. این دستور در واقع فونت شما را به حالت italic، oblique و یا معمولی در می‌آورد.

  • نام: font-style
  • این ویژگی چه کاری انجام می‌دهد؟‌ تغییر حالت فونت
  • چه چیزهایی را در مقابلش بنویسیم؟ حالت مورد نظر مثل ایتالیک
  • نمونه نوشتن این ویژگی: font-style: normal|italic|oblique;

HTML

<p class= “normal”>متن با حالت معمولی و پیش فرض </p>

<p class=”italic”> متن با حالت ایتالیک </p>

CSS

p.normal {
font-style: normal;
}

p.italic {
font-style:  italic;
}

متن با حالت معمولی و پیش فرض

متن با حالت ایتالیک

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

Tagged

آموزش اولیه CSS

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

CSS یا Cascading Style Sheets چیست؟

برای درک بهتر اهمیت css، فرض کنید قصد طراحی صفحه web دارید که بیش از ۱۰۰ پاراگراف متن دارد. اگر روزی بخواهید رنگ متون خود را مثلا به قرمز تغییر دهید، با روش‌هایی که در دوره قبلی آموخته‌ایم، ناچارید تا استایل تک تک المان‌های صفحه را به صورت جداگانه تعریف کنید و به آن‌ها رنگ بدهید.

 

مزایای وجود CSS:

در روزهای ابتدایی وجود html  قرار نبود که این تگ‌ها هیچ ظاهر بخصوصی به خود بگیرند.

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

اما با روی کار آمدن سی‌اس‌اس همه چیز عوض شد و حالا می‌توانیم یک سایت کامل را با تمامی صفحاتش تنها با یک خط کد تغییر دهیم.

 

نمونه CSS:

body }
background-color: linen;
}h1  }
color: maroon;
margin-left:  ۷۰px;

   }

 

چگونه می‌توانیم در صفحات وب از CSS استفاده کنیم؟

ما در اولین قسمت تنها نحوه اضافه کردن css به صفحه را آموزش می‌دهیم. پس نگران اینکه برخی دستورات به کار رفته در نمونه‌ها را نمی‌دانید نباشید.

روش اول: CSS خطی

نحوه استفاده از css در وب به چند صورت متفاوت است. یک حالت استفاده از مشخصه استایل در تگ HTML است که آن را در دوره HTML یادگرفته‌ایم. این حالت تنها برای تغییرات محدودی که قصد داریم یک المان را تغییر دهیم مناسب است و در کل بهتر است برای جلوگیری از شلوغی صفحه و کدها و همچنین افزایش سرعت  از این نوع استایل دادن خودداری کنیم. به این نوع  CSS اصطلاحا inline یا خطی گفته می‌شود(چون در همان خط HTML نوشته می‌شود)

 

مثال:‌  <p style="color: red; ">متن با رنگ قرمز </p>

روش دوم: CSS داخلی

نحوه دیگر استفاده از css ، استفاده از تگ <style> </style> در صفحه و در بین تگ <head></head> است. این نوع css را internal یا همان داخلی می‌نامند. در استفاده از این نوع css باید توجه داشته باشید که استایل‌های شما تنها در همان صفحه خوانده می‌شود و نمی‌توانید از آن‌ها در دیگر صفحات استفاده کنید.

<head>
<style>
body {
background-color: red;
}

h1 {
color: blue ;
margin-left:  ۳۰px;
}
</style>
</head>

روش سوم: فایل خارج از صفحه CSS:

بهترین نحوه استفاده از CSS که ما در این دوره آن را آموزش خواهیم داد و به شما هم پیشنهاد می‌کنیم که در پروژه‌هایتان از آن استفاده کنید، استفاده از یک فایل مجزای CSS  است. برای ساخت یک فایل CSS، ابتدا در ادیتور کد خود (که در اولین جلسهhtml آن‌ را معرفی کرده‌ایم)، یک فایل جدید ایجاد کرده و آن را با نام دلخواه و با پسوندCSS. ذخیره کنید.

خب حالا صفحه HTML جدیدی را باز کنید. در بین دو تگ <head></head> باید کد زیر را ا ضافه کنید و آدرس فایل CSS را در آن وارد کنید.

نکته: برای به دست آوردن آدرس فایل ذخیره شده در ویندوز، بر روی فایل .css کلیک راست کرده و در منوی باز شده وارد تب general شوید و آدرس فایل را کپی کنید. سپس در انتهای این آدرس علامت / قرار داده و نام فایل را با پسوند.css وارد کنید. برای درک بهتر به مثال زیر توجه کنید:

<link rel="stylesheet" type="text/css" href="آدرس فایل CSS شما">

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

تمام! شما حالا یک CSS خارجی دارید که صفحه HTML شما قوانین را از روی این صفحه می‌خواند. مزیت این کار به روش‌های دیگر سرعت لود بهتر صفحه و رندر شدن بهتر صفحه و همچنین امکان استفاده از این فایل برای دیگر صفحات است. اما صبر کنید! چگونه می‌توانیم از این CSS در صفحات دیگر استفاده کنیم؟‌ برای این کار نیز تنها کافی است تا آدرسی که در بالا وارد کردیم را در بین تگ <head></head> صفحات دیگر قرار دهیم.

نکته: استفاده از CSS خارجی  به چند دلیل نسبت به روش‌های دیگر برتری دارد. از دلایل برتری این روش، امکان استفاده از این فایل در تمامی صفحات است. بدین ترتیب شما می‌توانید با یک بار نوشتن قوانین و استایل‌های مورد نظر آن‌ها را در تمامی صفحاتتان مورد استفاده قرار دهید. در کنار این‌ها از شلوغ و طولانی شدن صفحات اچ‌تی‌ام‌ال شما نیز جلوگیری می‌شود.

کدام روش بهتر است؟

فرض کنید که قصد طراحی یک وب‌سایت با ده صفحه متفاوت دارید و قرار است در تمامی این صفحات رنگ متن را تغییر دهید. همانطور که گفتیم یک راه حل استفاده از اینلاین سی‌اس‌اس با کمک مشخصه استایل است که در دوره html آموخته‌ایم. اما زمانی که بفهمید این روش چقدر طاقت فرسا و  زمان‌بر است شرط می‌بندیم که پروژه را تعطیل خواهید کرد و پول مشتری خود را باز خواهید گرداند.

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

Tagged