آموزش صفات در CSS
آموزش صفات در css – در این مقاله معروف ترین صفت ها در css را با ذکر مثال برای شما گفته ایم.
البته قبل از اینکه این مقاله برای شما سودمند به نظر برسد،لازم است مقدمات کار با html و css را بدانید
شناسه width ،برای تعیین عرض هر قسمت صفحه به کار می رود .مقادیر این پارامتر می تواند بر حسب پیکسل یا درصد باشد .
شناسه height ،برای تعیین ارتفاع بخش مشخصی از صفحه است .مقادیر این پارامتر مانند width است .برای مثال وقتی این شناسه را در یک تگ div به کار می بریم و مقدار آن را برابر 100px قرار می دهیم ،تا وقتی که متن داخل div از این مقدار کمتر باشد ،ارتفاع همان 100px خواهد ماند .ولی وقتی که متن داخل div بیشتر از 100px باشد ،ارتفاع div هم از 100px بیشتر می شود تا تمام متن نمایش داده شود .اگر بخواهیم ارتفاع همان عددی که تعیین کردیم بماند و تغییر نکند باید از پارامتر over flow در style استفاده کنیم .این پارامتر به ما امکان می دهد که تعیین کنیم وقتی محتویات div از عرض یا ارتفاع تعیین شده بیشتر شود ،چگونه نمایش داده شود .
به عنوان مثال اگر برای آن مقدار hidden را تعیین کنیم باعث می شود که متن خارج از محدوده نمایش داده نشود .مقادیر دیگری که شناسه over flow می گیرد عبارت است از :
Over flow : visible
باعث می شود که تمام محتویاتی که عرض یا طول بیشتر داشته باشند نمایش داده شود .
Over flow : scroll
باعث می شود که در صورتی که محتویات فضایی بیشتر از طول و عرض تعیین شده لازم دارن با استفاده از scroll bar قادر به مشاهده باشند .
آموزش صفت border در CSS
ایجاد کار :
با استفاده از پارامتر border – style می توانیم مشخص کیم که آیا می خواهیم کادر داشته باشیم یا خیر .
برای یادگیری کامل این صفات ، کلاس آموزش طراحی سایت در آموزشگاه پرتو را از دست ندهید
| Border – style : none نمی خواهیم کادر داشته باشیم . |
| کادری با خط ممتد می کشد . Border – style : solid ; |
| کادری با خط چین می کشد . Border – style : dashed ; |
| کادری با نقطه می کشد . Border – style : dotted ; |
کادری 2 خط می کشد . Border – style : double ;
کادر را سه بعدی میکند . Border – style : groove ;
Border – style : inset ; Border – style : outset; Border – style : ridge ;
کادری نمایش داده نمی شود . Border – style : hidden;
پارامتر بعدی استفاده از border – width در ایجاد کادر هاست .این پارامتر ضخامت کادر را مشخص می کند .و مقادیر متفاوتی را دریافت می کند .
border – width مقداری بر حسب پیکسل ;
در این روش مقدار ضخامت کادر را بر حسب پیکسل تعیین می کنیم .
border – width : thin ;
کادر ما باریک می شود .
border – width : thick ;
کادر ضخیم را نمایش می دهد .
پارامتر بعدی درباره ترسیم کادر ها border – color است .برای مقادیر این پارامتر می توانیم از نام رنگ ها یا کد هگزای آن استفاده کنیم .
Border – color : green ;
به طور مختصر می توان خصوصیات width ،style ، color را با هم نوشت .
Border : 1px solid pink ;
تنظیم حاشیه و فاصله از لبه :
برای حاشیه ها از پارامتر margin استفاده می کنیم . این پارامتر برای تعیین حاشیه عناصر و یا فاصله از هر یک از لبه ها به کار می رود .مثلا margin – left به ما اجازه می دهد که برای اجزای صفحه حاشیه چپ مشخص را تعیین کنیم .در حقیقت فاصله اجزا را از سمت چپ صفحه مشخص می کند .این پارامتر مقداری بر حسب پیکسل دریافت می کند .
margin – top :مقدار حاشیه از سمت بالا
margin – right : مقدار حاشیه از سمت راست
margin – botton :مقدار حاشیه از سمت پایین
پارامتر بعدی در تعیین حاشیه ها padding است .این شناسه را برای بالا ،پایین ،چپ و راست به طور جداگانه تعریف می شود .و فاصله متن از کادر را تعیین می کند .
در صرتی که پارامتر های padding , margin بدون عبارت های left ، top و…..به کار می رود ، مقدار وارد شده برای هر 4 جهت مورد استفاده قرار می گیرد .
تعیین موقعیت عناصر با استفاده از css :
برای این کار از پارامتر position استفاده می کنیم .این ویژگی به ما اجازه می دهد که تعیین کنیم آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا خیر .اگر بخواهیم که موقعیت مشخصی داشته باشد این پارامتر آن را تعیین خواهد کرد .
Position : static ;
این مقدار پیش فرضی است که در صورت تعیین نشدن مقادیر position در صفحه استفاده می شود .با این مقدار اجزا در همان جایی که کد آنها را می نویسیم نمایش داده می شود .
Position : absolute ;
این مقدار به ما اجازه می دهد که هر عنصر را نسبت به بالا ،راست ،پایین یا چپ صفحه که بخواهیم نمایش دهد .
Position : fixed ;
این مقدار به ما اجازه می دهد که موقعیت تک عنصر را در پنجره مرورگر مشخص کنیم ،در صورتی که برای یک عنصر از این مقدار استفاده کنیم ،موقعیت این عنصر در صورتی که به بالا یا پایین صفحه برویم و یا حتی با کوچک شدن پنجره مرورگر باز هم در جای قبلی خود باقی بماند .
ویژگی های متن در css :
اولین ویژگی letter – spacing است .این ویژگی به ما اجازه می دهد تا فاصله حروف در یک متن را تعیین کنیم .می توانیم مقادیر را بر حسب پیکسل به آن بدهیم یا از مقدار نرمال برای آن استفاده کنیم .
اگر به این موارد علاقمندید ، در کلاس آموزش html/css شرکت نمایید
: مثال
Letter – spacing : 5px ;
پارامتر بعدی text – align است .این ویژگی به ما اجازه می دهد تا نحوه قرار گیری قسمتی از متن را از لحاظ راست چین ،چپ چین یا وسط چین بودن تعیین کنیم .
: مثال
Text – align : right / left / center / justify ; متن را از 2 طرف تراز می کند
آموزش صفت text-decoration در CSS
پارامتر بعدی text – decoration است . این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیت هایی از قبیل زیر خط و …..اعمال نماییم.
Text – decoration : none ;این گزینه به طور پیش فرض بر روی متن اعمال می شود .
Text – decoration : underline ;این گزینه برای زیر خط کردن متن استفاده می شود .
Text – decoration : overline ;این گزینه برای نمایش خطی بر بالای متن استفاده می شود .
Text – decoration : line – through ;متن را به صورت خط خورده نمایش می دهد .
Text – decoration : b link ;برای چشمک زدن متن استفاده می شود .
پارامتر بعدی Text – transform است که تعیین می کند متن با حروف بزرگ نوشته شود یا کوچک یا معمولی .
Text – transform : lower case ;متن با حروف کوچک نمایش داده می شود .
Text – transform : upper case ;متن را با حروف بزرگ نمایش داده می شود .
Text – transform : capitaliza ;حروف اول کلمات را با حروف بزرگ و بقیه را با حروف کوچک نمایش می دهد .
پارامتر بعدی line – height است که به ما اجازه می دهد. تا ارتفاع سطرها را تعیین کنیم . می تواند مقادیری بر حسب درصد یا پیکسل به خود بگیرد .
آموزش صفت font-family در CSS
تعیین font با استفاده از style :
اولین پاراکتر font – family ،این ویژگی مشخص می کند که متن با چه فونتی نمایش داده شود .این ویژگی در حقیقت جانشین ویژگی face در تگ فونت در html است .
در تنظیم فونت اگر کاربر در سیستم خود font تعیین شده را نداشته باشد ،متن را با فونت پیش فرض که معمولا times naw roman است می بینید .
: مثال
Font – family : Tahoma ;
پارامتر بعدی font – size است .این ویژگی مشخص کننده اندازه فونت در صفحه است .مقدار پیش فرض در آن medium است .
پارامتر بعدی font – style است .این ویژگی تقریبا مانند تگ i عمل می کند .و مقادیری از قبیل normal ،italic ،
Oblique را می گیرد .
متن را به صورت مورب نمایش می دهد و در اکثر فونت ها تفاوت ظاهری چندانی با italic ندارد .
پارامتر بعدی font – weight ،این ویژگی مقدار ضخامت متن را تعیین می کند .برای این پارامتر علاوه بر مقدار عددی می توانیم از عبارت normal ،bold ،bolder ،tighter ،نیز استفاده کنیم .
تنظیم رنک متن :
از ویژگی color برای تعیین رنگ قسمت های مختلف استفاده می شود .
در این قسمت به معرفی تگ span که برای مشخص کردن قسمتی از متن به کار می رود می پردازیم .این تگ دارای دو قسمت ابتدایی ئ انتهایی بوده و متن مورد نظر بین آن 2 نوشته می شود .این تگ به ما اجازه می دهد که در قسمت انتخاب شده بتوانیم با تعیین style خاصی اعمال تغییرات کنیم و ویژگی های را برای آن قسمت معین کنیم .
: مثال
<div> this is a test <span style = “ color : red “ >
this is a test </span > this is a test </div>
چیزی که به نمایش در می آید :
this is a test this is a test this is a test
شناسه بعدی در تعیین رنگ background – color می باشد .این ویژگی برای تعیین رنگ زمینه هر چیزی در صفحه است .اگر بخواهیم از این ویژگی فقط برای قسمتی از متن استفاده کنیم می توانیم از این ویژگی در یک تگ span در اطراف متن مورد نظر استفاده کنیم .
تصویر زمینه :
ویژگی اول background – mage است .این ویژگی برای مشخص کردن تصویر زمینه به کار می رود .کاربرد آن همانند background color است .برای نوشتن این پارامتر می بایست عبارت url : نوشته و سپس در داخل پرانتز آدرس تصویر را می نویسیم .
: مثال
Background – image : url ( آدرس عکس ) ;
به وسیله پارامتر background repeet می توانیم تصویر زمینه را به گونه ای تعریف کنیم که ثابت باشد یا تکرار شود .
Background – repeat :تصویر زمینه در صورت کوچک بودن هم افقی هم عمودی تکرارمی شود
Repeat / norepeat / repeat – x (-y)تصویر به صورت افقی (عمودی) تکرار می شود
پارامتر بعدی background – attachment است که با دو مقدار fixed و scroll تعیین می کند که آیا تصویر زمینه با scroll کردن صفحه ثابت بماند یا حرکت کند .
و در نهایت پارامتر background – position که موقعیت تصویر زمینه در صفحه را مشخص می کند .این ویژگی بیشتر در زمانی استفاده می شود که از پارامتر background – repeat استفاده نکرده باشیم .که مقداری که میگیرد تعیین کننده موقعیت تصویردر زمینه است .
نکات کاربردی در طراحی سایت با html ، css :
در تعیین فونت در css ، اگر نام فونت شامل فضای خالی باشد ،آنگاه باید نام آن فونت در بین کوتیشن قرار گیرد .همچنین می توان از چندین فونت به صورت همزمان استفاده کرد .که این فونت ها با کاما از هم جدا می شوند در این حالت اگر فونت اول در سیستم کاربر موجود نباشد ،دومین فونت اعمال می شود و الی آخر .
: مثال
Font – family : “ times new roman “ , Tahoma , gecrgia
Margin :
این خاصیت فضای خالی بیرونی عناصر را مشخص می کند .(یعنی فضای خالی بین عنصر پنجره مرورگر و یا فضای خالی بین دو عنصر ).از مقادیر منفی نیز می توان در تعیین فاصله استفاده کرد .اگر هر 4 مقدار را در یک دستور قرار دهیم ترتیب آنها به صورت زیر می شود .
Top ، right ، bottom ، left
: مثال
Margin : 5px , 5px , 5px , 2px ;
- استفاده از مقدار auto برای margin افقی باعث وسط چین شدن عنصرمی شود .
: مثال
Margin : 0 auto ;
Padding :
این خصوصیت مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می کند .استفاده از مقادیر منفی در padding مجاز نیست .همچنین کلمه کلیدی auto هیچ تاثیری روی این ویژگی ندارد .
Float :
از این خاصیت برای قرار دادن محتوا یا عناصر کنار یکدیگر استفاده می شود .
Float : left ;
عنصر در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود قرار می گیرد و عناصر پس از آن کنارش شناورند .
Float : right ;
Clear :
خاصیت clear وابسته به float است و برای کنترل آن خاصیت به کار می رود .این خاصیت برای cancel کردن تاثیر یک یا تعداد بیشتری از عناصر floated بر روی دیگر عناصر استفاده می شود .
خاصیت float : left را از بین می برد .clear : left ; خاصیت float : right را از بین می برد .clear : right;
هر 2 خاصیت را از بین می برد .clear : both ;
List – style – type :
با استفاده از این ویژگی می توان برای لیست های مرتب و نامرتب bullet تعریف کرد .
ما در بهترین آموزشگاه طراحی سایت ، در کنار شماییم.
: مثال
List – style – type : circle ;در لیست های نا مرتب
List – style – type : circle ;در لیست های مرتب
List – style – image :
این خاصیت یک عکس را برای استفاده به عنوان bullet در کنار عناصر لیست قرار می دهد .
: مثال
List – style – image : url (آدرس عکس) ;
List – style – position :
موقعیت و نحوه قرار گرفتن bullet در کنار آیتم های لیست را مشخص می کند .
: مثال
List – style – position : inside / outside ;
Inside : bullet در داخل قرار گیرد .
Outside : bullet در خارج قرار گیرد .
Display :
Display : block / inline
Block :به صورت بلاک نمایش می دهد . inline :به صورت خطی نمایش می دهد .
امیدواریم از این آموزش از آموزشگاه کامپیوتر پرتو، لذت برده باشید.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید ؟در گفتگو ها شرکت کنید!