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

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

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

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

 

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

 

تنظیم متن و نوشته CSS Styling Text

Text Color

ویژگی color برای تعیین رنگ عناصر می باشد. این ویژگی به سه روش مقداردهی می شود.

شیوه استفادهتوضیحمثال
استفاده از نام رنگ 147 نام رنگ تعریف شده در زبان CSS و Html به کار گرفته می شود.Green سبز
استفاده از کد ترکیبی یا همان عدد دهدهیدر این روش از کد رنگ به صورت (rgb(r,g,b است که r و g و b به ترتیب شدت رنگ های قرمز ، سبز و آبی می باشد، استفاده می شود که هر کدام مقادیری بین 0 تا 255 را می پذیرد و هر چه عدد انتخاب شده بیشتر باشد شدت آن رنگ در ترکیب رنگهای قرمز(r) سبز(g) آبی(b) بیشتر می باشد.(rgb(255,0,0 قرمز
استفاده از کد ترکیبی یا همان اعداد در مبنای 16در این روش که به علت ساده و مختصر بودن کد رنگ بیشترین استفاده را دارد و رنگ به صورت #5c90d2 نشان داده می شود و تنها تفاوت آن با روش قبل استفاده از اعداد مبنای 8 (HexaDecimal) به جای استفاده از اعداد دهدهی می باشد. که rr و gg و bb به ترتیب مقدار عددی شدت رنگ های قرمز ، سبز و آبی را نشان میدهد و مقادیر هگزادسیمال بین 00 تا FF که برابر با همان 0 تا 255 دهدهی است را می پذیرد.#5c90d2

 

Text Alignment

از این ویژگی برای تنظیم محل قرار گیری متن در حالت افقی استفاده می شود. و با مقادیر زیر مقدار دهی می شود:

  • Center

متن در وسط عنصر قرار می گیرد.

  • Right

متن در سمت راست عنصر قرار می گیرد.

  • Left

متن در سمت چپ عنصر قرار می گیرد.

  • Justify

تمامی متون دارای عرض یکسان می شوند.

h1 {text-align:center;}
p.name {text-align:right;}
p.article {text-align:justify;}

 

Text Decoration

این ویژگی برای اضافه نمودن فرمت خاصی به متن مورد استفاده قرار می کیرد. و با موارد زیر مقدار دهی می شود:

  • none
  • underline
  • overline
  • line-through
  • initial
  • inherit
h1 {
    text-decoration: overline;
}

اگر مقدار none به آن داده شود، اگر متن دارای خاصیت زیر خط دار (underline) باشد، این فرمت را پاک می نماید.

 

تنظیم لیست ها CSS Styling List

لیست UL و LI در سی اس اس

برای تنظیم لیست ها به کار گرفته می شود. در زبان html دو نوع لیست می توان ایجاد نمود:

  • An Unordered List

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

  • An Ordered List:

آیتم ها با اعداد لیست شده و نشان داده می شود.

اما با استفاده از زبان برنامه نویسی Css می توانیم نمایش آن ها راسفارشی نماییم این زبان این آیتم را دارد که لیست آیتم های خود را با اشکال زیبا، رنگی و حتی تصاویر نمایش دهیم که این موضوع تاثیر بسیار مهمی در طراحی سایت ما خواهد داشت. با استفاده از ویژگی list-style-type  می توانیم  marker  لیست های خود را به شکل های مختلف مورد نظر خود تغییر دهیم، این ویژگی شامل مقادیر زیر میباشد:

  • circle
  • square
  • upper-roman
  • lower-alpha
ul.b {
    list-style-type: square;
}

 

با ویژگی   list-style-image  می توانیم برای نشانه گر لیست خود تصویری تعیین نماییم.

ul {
    list-style-image: url('sqpurple.png');
}

همچنین می توانیم موقعیت لیست ها را بر روی inside و outside قرار دهیم.

ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}

 

نکته: به منظور پاک کردن نشانه گر لیست ها list-style-type: none; را قرار می دهیم.

 

 

تنظیم خواص باکس ها Border , Margin , Padding

 

border-padinng-margin-300x160 آموزش مقدماتی ویژگی های Css (قسمت دوم)

 

Border , Margin , Padding

این ویژگی برای هر عنصری که در زبان برنامه نویسی html تعریف می شود، می تواند در نظر گرفته شود.

ویژگی Border

ویژگی border مشخص کننده مرز خارجی Box برای تعریف حاشیه استفاده می شود و بهتر است در این ویژگی میزان ضخامت و رنگ و نوع آن را هم تعیین نمود.

div {
  border-bottom:2px solid #070;
  border-left:2px double #070;
  border-top:2px dashed #070;
  border-right:2px dotted #070;
  }

 

ویژگی Margin (حاشیه ی بیرونی)

فضای خالی در خارج از محیط Box و مرز Border می باشد که میتوان اندازه آن را برای ضلع های مختلف در جهات مختلف ( Top , Right , Bottom ,Left ) به صورت کل و یا به صورت جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نمی باشد وبه صورت یک فضا ی بدون پس زمینه در فضای اطراف Box قرار میگیرد.

به طور کی:

div {
  margin:20px;
  }

جزء به جزء:

div {
  margin-left:20px;
  margin-top:20px;
  margin-right:30px;
  margin-bottom:10px;  
  }

 

ویژگی Padding (حاشیه ی داخلی)

فضای خالی بین محتوا و Border داخلی Box می باشد که همانند ویژگی margin میتوان اندازه آن را برای ضلع های مختلف در جهات مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا به صورت جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی می نماید.

div {
  padding-left:10px;
  padding-top:20px;
  padding-right:10px;
  padding-bottom:20px; 
  }

و پس از آن Content یا محتوا قرار می گیرد که می تواند شامل هر عنصری مانند متن، تصویر و یا … باشد.

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

موفق باشید.

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

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

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

منبع : وبیت

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

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

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