وبلاگ آسیا آی تی » css

تنظیم بخش های مختلف در css

وحید دولتی — Thu, 19 Nov 2015 10:30:29 +0000

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height : این ویژگی در تمام مرورگر ها پشتیبانی میشود.

p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-width:100px;
}

Background

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

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

background-color

background-image

background-repeat

background-attachment

background-position

Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

“generic family” مثل  “Serif” یا “Monospace”

“font family” مثل “Times New Roman” یا “Arial”

با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دو مقدار زیر میباشد :

normal :متن به صورت معمولی نمایش داده میشود

italic : متن به صورات ایتالیک نمایش داده میشود

oblique : متن به صورت مورب نمایش داده میشود

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال 16px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های
–
و تگ
برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید

لیست UL و LI در سی اس اسدر این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که List را در 3 حالت زیر نمایش دهیم.

تنظیم لیست یه صورت مرتب

تنظیم لیست به صورت نامرتب

تنظیم تصویر برای نشانگر لیست

در HTML دو نوع ار انواع لیست وجود دارد

unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند

ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.

مزایای Css

وحید دولتی — Thu, 19 Nov 2015 09:47:28 +0000

مزایای Css

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

به کمک CSS میتونیم از دوباره نویسی كدهای HTML که باعث مشکل شدن کدنویسی و همچنین كند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری كنیم.

برای مثال می تونیم یك بار نوع فونت مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به فونت را در صفحه به كارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

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

قوانین نام گذاری فایل های css

از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
نام فایل بایستی با یک حرف شروع شود.
برای نام گذاری فایل از حروف کوچک استفاده کنید.
نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

CSS خارجییکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

Css

Hamed — Sun, 22 Mar 2015 14:39:46 +0000

CSS مخفف عبارت Cascaded Style Sheet است که معنی کلمه به کلمه آن می شود شیوه نامه آبشاری!!!

فرض کنید برای یک مشتری سایتی طراحی نموده اید که دارای ۵۰ صفحه وب است، در دقایق آخر راه اندازی وب سایت، مشتری (یا حتی خود شما !) به این نتیجه می رسید که اندازه قلم به کار رفته برای مطالب سایت خیلی کوچک است و اگر بزرگتر باشد بهتر است! دست به کار می شوید و همه تگهای از تمامی ۵۰ صفحه را ویرایش نموده و اندازه قلم را بزرگتر می کنید! تازه شانس آورده اید که سایت را هنوزupload نکرده بودید وگرنه مجبور بودید تمام ۵۰ صفحه را پس از اصلاح اندازه قلم دوباره upload هم بکنید!

در صورتی که با CSS آشنائی داشتید و از ابتدا در طراحی سایت از آن به شیوه درست استفاده می کردید برای اصلاح اندازه قلم در تمام آن ۵۰ صفحه فقط کافی بود یک خط را آن هم فقط در یک فایل اصلاح نموده و فقط همان یک فایل را upload نمائید. این یکی از مهمترین دلایل کاربرد CSS در طراحی صفحات وب است. CSS نگهداری صفحات وب را ساده تر می نماید.

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

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