امروز : پنج شنبه ۲۶ مرداد ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

Css-attributes-vebeet آموزش مقدماتی ویژگی های Css (قسمت اول)

ویژگی های Css: در این قسمت به آموزش مقدماتی ویژگی های Css می پردازیم. با ما همراه باشید.

تنظیم طول و عرض ( Height , Width ) عناصر در CSS

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

برای تنظیم ابعاد المان های ایجاد شده توسط زبان برنامه نویسی Css می توانیم از ویژگی های مختلفی استفاد نماییم که مهمترین آن ویژگی Width و Height می باشد.

در این قسمت از آموزش Css برخی ویژگی های تعریف شده در CSS را برای شما معرفی می نماییم و مثال هایی را ارائه می دهیم.

height و width

این دو ویژگی در تمامی  مرورگر ها پشتیبانی می شود و برای تعییین طول و عرض استفاده می شوند.

.right-side

{
height:100px;

}

عرض استاندارد برای طراحی سایت :

برای تعیین عرض استاندارد در طراحی وب سایت بهتر است که با توجه به رزولیشن استاندارد صفحات وب که به طور معمول استفاده می شود (768*1024) بهتر است تا عرض را روی 980px تنظیم نماییم.

دو ویژگی max-height و max-width نیز وجود دارد که توسط آن ها میتوانیم حداکثر مقدار را برای هر عنصر تنظیم نماییم. این ویژگی توسط تمامی مرورگرها به استثتا IE6 و ورژن های پایین تر پشتیبانی می شود.

p

{
max-height:50px;
}

min-height و min-width

دو ویژگی min-height و min-width نیز وجود دارد که توسط آن ها میتوانیم حداقل مقدار را برای هر عنصر تنظیم نماییم. این ویژگی توسط تمامی مرورگرها به استثتا IE6 و ورژن های پایین تر پشتیبانی می شود.

p

{
min-height:100px;
}

تنظیم پس زمینه Background در CSS

Background

این ویژگی برای تعریف نمودن افکت های پس زمینه برای هر عنصر در زبان Css  به کار گرفته می شود. و در زیبا سازی ظاهری سایت به شما طراحان وب سایت کمک شایانی می کند. این ویژگی انواع مختلفی دارد:

  • background-color

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

table {background-color:#b0c4de;}
  • background-image

از طریق این ویژگی تصویری برای پس زمینه هر عنصر در وب سایت در نظر گرفته می شود. به طور مثال برای یک div می توان کلاسی را تعریف نموده و با استفاده از این ویژگی برای آن تصویری تعیین نمود.

.social {background-image:url('paper.gif');}
  • background-repeat

از طریق این ویژگی میتوان مشخص نمود که تصویرمان چگونه تکرار شود.می توانیم تعیین نماییم که تصویرمان در جهت افقی(x) و یا عمودی (y) برایمان تکرار شود. به طور مثال برای تعیین تصوصری با تکرار در جهت افق برای بدنه سایت دایم:

 body

{
background-image:url('garden.jpg');
background-repeat:repeat-x;
}

نکته: در صورتی که بخواهیم تصویرمان بدون تکرار باشد می نویسیم:

background-repeat:no-repeat;

  • background-attachment

برای اینکه بتوانیم تصویر پس زمینه انتخابی را به صورت ثابت انتخاب نماییم و از scroll خوردن که حالت پیشفرض آن است جلوگیری نماییم، از این ویژگی استفاده میکنیم.

body

{
background-image:url('garden.jpg');
background-repeat:repeat-x;background-attachment:fixed;
}
  • background-position

این ویژگی برای تعیین موقعیت یک عنصر می باشد، به طور مثال برای تنظیم موقعیت تصویر به گوشه سمت چپ و بالا  از کد زیر استفاده می نماییم:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top left;
}

تنظیم قلم و فونت CSS Styling Font

Font Family

یکی از نکات مهم در طراحی وب سایت استفاده از فونت مناسب و استاندارد برای شکیل تر نشان دادن صفحات سایت میباشد. در این قسمت به استایل فونت و قلم در زبان Css می پردازیم. در زبان Css دو نوع فونت وجود دارد:

  • “generic family” مانند “Monospace”
  • “font family” مانند “Arial”

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

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

Font Style
با این ویژگی نوع نمایش متن تعیین می گردد.برای این ویژگی مقدار های زیر تعریف شده است:

  1.  normal   : نمایش متن به صورت معمولی
  2.  italic   : نمایش متن به صورت ایتالیک
  3.  oblique  : نمایش متن به صورت مورب

Font Size
این ویژگی Css سایز متن را مشخص می نماید. اندازه متن ها در طراحی سایت بسیار مهم و با اهمیت می باشد. این ویژگی به صورت مطلق یا نسبی مقداردهی می شود. هر جند که در زوم و رزولیشن های مختلف این مقدار تغییر میکند. البته این تغییر برای کل صفحه بوده وشامل یک بخش نمی باشد. سایز پیش فرض برای یک متن نرمال 16px می باشد.
نکته: برای متن هایی که در قسمت بالای صفحه یا همان header نمایش داده میشوند از تگ های <h1> – <h6> یا همان heading ها استفاده می شود که در سئو سایت ماثر می باشد. و تگ <p> برای پاراگراف های موجود استفاده می شود،

h1 {font-size:40px;}
p {font-size:16px;}

امیدواریم آموزش مقدماتی ویژگی های Css برای شما عزیزان که قصد آموزش و پیشرفت در زمینه طراحی وب را دارید مفید بوده باشد. در جلسه بعد از آموزش مقدماتی به آموزش تنظیم متن و نوشته (CSS Styling Text) ، تنظیم لیست ها (CSS Styling List)، تنظیم خواص باکس ها (Border , Margin , Padding) و پس از آن آموزش پیشرفته آن می پردازیم.

موفق باشید.

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 156 بار دسته بندی : آموزش ، آموزش css دیدگاه : ۱ تاريخ : ۱۷ خرداد ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
حانیه فراهانی

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

دیدگاه کاربران تعداد دیدگاه : ۱