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

بایگانی برچسب‌ها : CSS خطی

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

آموزش CSS – پس زمینه در CSS

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

پس زمینه در CSS

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

چگونگی اضافه کردن رنگ در css:

 روش اول -از طریق کد HEX:

در این مثال ابتدا علامت # قرار می‌دهیم و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال” fd0000 #”

روش دوم – کد RGB رنگ:

در این حالت باید کد RGB‌ رنگ را بدهید. ابتدا کلمه RGB را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد RGB در پرانتز و بین "" می‌نویسیم.”(RGB (255,0,0″

روش سوم – نوشتن نام رنگ‌های پیش‌فرض:

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود.  – مثال : “red” برای رنگ قرمز

رنگ پس زمینه:

  • نام : background-color
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند.
  • نمونه نوشتن:  رنگ مورد نظر# : background-color
  •  مثال۲ –  background-color:  #ff0000
  •  مثال ۳- “(background-color: “rgb(255,0,0
  •  مثال ۴- background-color: blue

HTML

<div class=”bg-yelllow”><p>یک متن که داخل یک صفحه زرد قرار دارد</p></div>

CSS

bg-yellow {

background-color: yellow;

}

یک متن که داخل یک صفحه زرد رنگ قرار دارد

 

عکس پس‌زمینه:

شما در CSS و HTML می‌توانید تصویر پس زمینه یک المان را تغییر دهید. عکس پس زمینه درCSS  و HTML  بدین صورت نوشته می‌شود:

  • نام: background-image
  • این ویژگی چه کاری انجام می‌دهد؟‌   تغییر تصویر پس زمینه  هر نوع المانی در HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ در این جا باید آدرس عکس مورد نظرتان را به CSS بدهید.
  • نمونه نوشتن:    (‘آدرس دقیق و کامل عکس در اینترنت’) background-image:   url
  • مثال:  (“background-image:    url (“zoomit.ir/axshoma.jpg

background-image: url(“KIANART/PIC.jpg”);

HTML

<div class=”bg-img”><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url(‘http://www.kianart.ir/media/b/items/..pic.jpg’);”

}

یک متن که داخل یک صفحه با تصویر زمینه قرار دارد

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین “” نوشته شود. ("url.png")

 

تکرار تصویر پس زمینه:

شما می‌توانید عکس پس زمینه را به صورت افقی یا عمودی تکرار کنید.این قابلیت برای نمایش تصاویر با ابعاد کوچکتر استفاده می‌شود.

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-x;

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

برای تکرار تصویر در جهت عمودی نیز تنها کافیست تا این کد را برای راستای y بنویسیم.

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-y;

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

background-repeat:  no repeat;

 

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