آموزش حرفه ای CSS قسمت دوم

تعداد نظرات 2 عدد برچسب ها: , , , , , , , , ,

آموزش حرفه ای CSS

آموزش CSS به صورت حرفه ای ، با عرض سلام و احترام خدمت شما کاربران عزیز سایت استورنت با یکی دیگه از مطالب سایت استورنت در خدمت شما عزیزان هستیم!

آموزش حرفه ای CSS قسمت اول

آموزش CSS به صورت حرفه ای

در قسمت اول این آموزش با CSS آشنا شدید و روش های کدنویسی CSS رو یاد گرفتید؛ همچنین با چند دستور مهم و پرکاربرد نیز آشنا شدید؛ در این قسمت با چند دستور جدید آشنا میشید و دستوراتی که در قسمت قبلی با آنها آشنا شدید رو بیشتر توضیح میدم و شما رو با قابلیت های این دستورات بیشتر آشنا می کنم؛ همچنین روش بهینه کدنویسی رو هم بهتون آموزش میدم!

دستور Direction

از این دستور بیشتر در تگ ها <body> و <p> استفاده میشه، این دستور جهت قرارگیری اشیاء و متون رو در صفحه وب مشخص می کنه؛ اگه دقت کنید می بینید که سایت های خارجی چپ چین هستند اما سایت های فارسی راست چین؛ این دستور دو مقدار داره، RTL (مخفف Right To Left به معنی راست به چپ) و LTR (مخفف Left To Right به معنی چپ به راست). آموزش CSS به صورت حرفه ای

در مثال زیر، صفحه وب برای زبان فارسی (راست به چپ) تنظیم شده:

<html>
<head>
</head>
<body style="direction: rtl;">
</body>
</html>

البته در آخر آموزش مثالی رو مشاهده می کنید که تمامی موارد آموزش داده شده در اون بکار رفته…

دستور Border

این دستور نوع، رنگ و اندازه حاشیه (خط دور) اشیاء رو تعیین میکنه؛ این دستور چهار مشخصه رو دریافت می کنه: اندازه حاشیه، رنگ حاشیه و نوع آن؛ به مثال زیر دقت کنید:

border: Color Size Type;
border: #F00 1xp Solid;

نکته های مهم

1- مکان قرارگیری مشخصه ها فرقی نداره
2- هر مشخصه با یک فضای خالی (Space) جدا میشه
3- نوع حاشیه به ده نوع تقسیم میشه:

dotted , dashed , double , groove , ridge , inset , outset , none , hidden , solid

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

یکی از زیرمجموعه های دستور Border، دستور Radius هست؛ این دستور میزان گرد بودن گوشه های هر شی رو بر حسب پیکسل مشخص میکنه؛ زیرمجموعه ها به این صورت نوشته میشن(توسط دش یا خط تیره (-) از دستور اصلی جدا میشه):

border-radius: 5px;

یکی دیگه از زیرمجموعه های این دستور، مکان حاشیه است؛ برای مثال: حاشیه بالا (Top)، حاشیه سمت راست (Right)، حاشیه پایین (Bottom) و حاشیه سمت چپ (Left)

مثلا میخوام حاشیه بالا قرمز، حاشیه سمت راست آبی، حاشیه پایین سبز و حاشیه سمت چپ مشکی باشه؛ به مثال زیر دقت کنید:

border-top: #F00 1xp Solid;
border-right: #00F 1xp Solid;
border-bottom: #0F0 1xp Solid;
border-left: #000 1xp Solid;

حالا اگر بخوام میزان گرد بودن یک گوشه از شی رو مشخص کنم، باید بعد از دستور ابتدا جهت عمودی و سپس جهت افقی رو تعیین کنم؛ برای مثال من میخوام میزان گرد بودن گوشه بالا سمت چپ رو مشخص کنم، به این صورت عمل می کنم:

border-top-left-radius: 5px;

آشنایی با برخی از زیرمجموعه های دستور Backgrpund

اگه یادتون باشه در قسمت قبلی با دستور background آشنا شدید؛ این دستور میتونه رنگ زمینه و تصویر زمینه رو تعیین کنه:

background: url("Address") #FFF;

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

background-color: #FFF;

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

background-image: url("address");

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

یکی دیگه از زیرمجموعه های این دستور، Repeat هست؛ این دستور مشخص می کنه که تصویر زمینه تکرار بشه یا نه، یا مثلا فقط به صورت افقی (در محور X ها) تکرار بشه؛ این زیرمجموعه سه مقدار داره: Repeat-x (تکرار به صورت افقی)، Repeat-y (تکرار به صورت عمودی) و No-Repeat (بدون تکرار)، بهتره به صورت عملی با این زیرمجموعه آشنا بشید؛ مثال زیر بدون زیرمجموعه Repeat کدنویسی شده:

body {
    background-image: url("bg.png");
}

نتیجه مثال:

آموزش حرفه ای سی اس اس
آموزش CSS به صورت حرفه ای

همونطور که مشاهده می کنید تصویر زمینه بی نهایت بار تکرار میشه؛ حالا زیرمجموعه Repeat رو اضافه می کنیم:

body {
    background-image: url("bg.png");
    background-repeat: repeat-x;
}

نتیجه:

آموزش CSS به صورت حرفه ای
آموزش CSS به صورت حرفه ای

زیرمجموعه بعدی که قصد دارم بهتون معرفی کنم Posation هست؛ این زیرمجموعه مشخص می کنه که موقیت تصویرزمینه در کجای صفحه باشه؛ به مثال زیر دقت کنید:

body {
    background-image: url("bg.png");
    background-repeat: repeat-x;
    background-position: right top;
}

نتیجه:

CSS3
آموزش CSS به صورت حرفه ای

همچنین میتونید مشخص کنید که تصویر زمینه چند درصد یا چند پیکسل به سمت بالا یا به سمت راست هدایت بشه؛ برای مثال من به صورتی کدنویسی کردم که 50 درصد به سمت بالا و 70 درصد به سمت راست هدایت بشه، البته میتونید از مقادیر منفی مثل 50- نیز استفاده کنید:

body {
    background-image: url("bg.png");
    background-repeat: repeat-x;
    background-position: 70% 50%;
}

نتیجه:

آموزش CSS به صورت حرفه ای
آموزش CSS به صورت حرفه ای

اگه بخواهیم زیرمجموعه هایی که با آنها آشنا شدید رو در حالت جامع دستور background کدنویسی کنیم باید به صورت زیر نوشته بشه:

body {
    background-image: url("bg.png") #FFF right top no-repeat;
}

لطفا توجه داشته باشید که قرار گیری مکان مشخصه ها فرقی نداره

کدنویسی بهینه

در حقیقت کدنویسی به روشی که کمترین حجم رو داشته باشه به عنوان کدنویسی بهینه شناخته میشه، البته این تنها متد کدنویسی بهینه نیست…

برای مثال من می خوام برای چند کلاس استایل هایی رو کدنویسی کنم:

h2 {
    Font: Tahoma 12px;
    color: #F0F;
}
h3 {
    Font: Tahoma 12px;
    color: #F0F;
}
h4 {
    Font: Tahoma 12px;
    color: #F0F;
}
h5 {
    Font: Tahoma 12px;
    color: #F0F;
}
h6 {
    Font: Tahoma 12px;
    color: #F0F;
}

همونظور که مشاهده می کنید همه استایل هایی که برای این کلاس ها کدنویسی کردم یکسان هستند، اما یک روش بهینه و بهتر هست:

h2, h3, h4, h5, h6 {
    Font: Tahoma 12px;
    color: #F0F;
}

حالا بهتر نشد؟ شما در هنگام کدنویسی می تونید چندین کلاس رو به صورت همزمان کدنویسی کنید که این کار باعث بهینه شدن کدنویسی شما میشه.

به مثال زیر توجه کنید:

.myclass{
    background-color: #FFF;
    background-image: url("Address");
    background-repeat: repeat-x;
    background-position: right top;
    border-top: #F00 1xp Solid;
    border-right: #F00 1xp Solid;
    border-bottom: #F00 1xp Solid;
    border-left: #F00 1xp Solid;
}

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

.myclass{
    background:url("Address") #FFF repeat-x right top;
    border: #F00 1xp Solid;
}

همانطور که در مثال بالا مشاهده می کنید، استفاده از حالت جامع بهینه تر و کوتاه تر است؛ سعی کنید تا حد ممکن از حالت جامع استفاده کنید.

روش درج توضیح در CSS

در برخی مواقع لازمه که در قستمی از کدنویسی توضیحی قرار بدیم تا در صورتی که بخوایم در آینده اون بخش از کد رو ویرایش کنیم راحت تر اون قسمت از کد ها رو ویرایش کنیم، البته توضیح یا Comment یکی از امکانات پر استفاده CSS هست؛ برای درج توضیح ابتدا */ تایپ می کنیم سپس توضیح مورد نظر رو هم تایپ می کنیم و در آخر /* رو تایپ می کنیم؛ به مثال زیر دقت کنید:

.myclass{
/* comment - توضیح شما */
    background:url("Address") #FFF repeat-x right top;
}

به نظرم میزان آموزش برای این قسمت کافی هست، حالا به مثال های آخر این قسمت میرسم:

.mydiv{
   border-top: #F00 1xp Solid;
   border-right: #00F 1xp Solid;
   border-bottom: #0F0 1xp Solid;
   border-left: #000 1xp Solid;
   padding: 5px;
   background: #CCC;
}
<div class="mydiv">این یک مثال است</div>

نتیجه را به صورت زیر مشاهده می کنید:

این یک مثال است

 

مثال دوم:

.mydiv{
   border: #000 1xp dotted;
   padding: 5px;
   background: #CCC;
   border-radius: 5xp;
}
<div class="mydiv">این یک مثال است</div>

نتیجه را به صورت زیر مشاهده می کنید:

این یک مثال است

مثال سوم:

.mydiv{
   border: #000 1xp dashed;
   padding: 5px;
   background: #CCC;
   border-radius: 100xp;
   direction: ltr;
}
<div class="mydiv">این یک مثال است</div>

نتیجه را به صورت زیر مشاهده می کنید:

این یک مثال است

خارج از آموزش

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

سعی کردم که در این قسمت توضیحات بهتری ارائه بدم، امیدوارم که این آموزش برای شما مفید بوده باشه؛ منتظر نظرات ارزشمند شما عزیزان هستم، تا مطلب دیگه سایت استورنت شما رو به خدای مهربان می سپارم، لحضه هایتان زیبا…

 

نظرات (2)

لطفا نظر خود را مطرح کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *