زمان کنونی: 2018/10/16، 06:55 PM درود مهمان گرامی! (ورودثبت نام)
کاربران عزیز برای طرح هر گرونه سوال مرتبط با موضوع انجمن لطفا ابتدا در انجمن عضو شده و سپس با ورود ب بخش مورد نظر سوالتان را مطرح کنید.


امتیاز موضوع:
  • 3 رأی - میانگین امتیازات: 2
  • 1
  • 2
  • 3
  • 4
  • 5
همه چیز درباره CSS
#1
استايل (CSS) چيست؟

- CSS مخفف کلمه Cascading Style Sheets ميباشند.
- اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
- ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.
- فايل استايلها با فرمت CSS ذخيره ميشوند.

انواع استايلها:

۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد. 

HTML:

<tag style="Style Declarations">

Example:
<p style="font-family: Tahoma">This is a paragraph</p>
در مثال بالا با استفاده از حالتهاي مختلف در استايلها نوع فونت آنرا تغيير داديم و همانطوري که در تعريف اين نوع استايل نوشتم اين استايل فقط و فقط تغييرات را بروي همين پاراگراف اعمال خواهد کرد.

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد. 



HTML:

<style>
<!--
Style Declaration
-->
</style>

Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>
اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از ([تصویر:  clear.png] حالتهاي مختلف آن از هم جدا شدند.
اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما (,) از هم جدا کنيد براي مثال:


HTML:


h1, h2, h3, h4 { color: gold; font-family: sans-serif }
۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

HTML:

<link href="url" rel="relation type" type="link type">

Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمت CSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورت Internal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ (<style></style>) را در نت پد کپي کرده و آنرا با فرمت CSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد. 
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.

می‌توان گفت که امروزه CSS طراحی صفحات وب را در جهان متحول کرده است. این فناوری به طراحان وب کمک می‌کند که طراحی‌های خود را با بالاترین کیفیت و کاربرپسندترین شکل ارائه کنند. پیش از این، انجام این کار تنها با فایل‌های سنگین گرافیکی قابل انجام بود.
به جرات می‌توان گفت که اگر شما بدانید که با CSS چه کارهایی می‌توانید بکنید، قطعا از آن استفاده خواهید نمود. امروزه اکثر قریب به اتفاق سایت‌های حرفه‌ای از CSS بهره می‌برند. بنابراین برای یک طراح صفحات وب یادگیری این زبان بسیار مهم خواهد بود.
بسیاری از طراحان وب در زمینه‌ای که در آن به فعالیت مشغول هستند (یعنی طراحی) از اطلاعات ریشه‌ای و پایه‌ای برخوردار نیستند. اکثر آنها با خواندن یک کتاب در مورد HTML و یا JavaScript چیزهایی در مورد این زبان‌ها می‌دانند. همچنین بسیاری از آنها به نرم‌افزارهایی مانند Photoshop و Flash مسلط هستند. اما تعداد بسیار کمی هستند که تحصیلات دانشگاهی در این زمینه‌ها دارند. اما CSS برای هر دو گروه (چه آنهایی که تجربی و یا با خواندن یک کتاب طراحی را بلدند و چه آنهایی که به طور پایه‌ای به این زبان‌ها مسلط هستند) مفید و شاید لازم است.
اما به راستی با CSS چه کاری می‌شود کرد؟ به طور خلاصه می‌توان گفت مهم‌ترین کار آن، راحت‌کردن شما از یک سری کد است که علاوه بر خسته‌کردن شما، باعث پایین‌آمدن سرعت لود صفحات شما می‌شوند. CSS دست طراحان را به قدری باز گذاشته است که قطعا کسی با بهره‌گیری از CSS تمایلی به استفاده از جداول نخواهد داشت. CSS زمانی کاربرد خود را نشان می‌دهد که شما صفحه‌ای با حجم نسبتا زیادی از متن و عکس دارید (مانند یک وبلاگ) و نیاز است که صفحه زود لود شود. اگر شما از جداول استفاده کنید، بیننده باید منتظر شود تا زمانی که کل جدول لود شده و به نمایش درآید. اما با استفاده از CSS، هرچقدر اطلاعات لود شده باشد، در همان لحظه بر روی مانیتور بیننده درج خواهد شد.
اما چرا CSS مانع از خستگی شما در کدنویسی می‌شود؟ شما با CSS می‌توانید ویژگی‌های یک بخش را فقط یک‌بار تعریف کنید و دیگر مجبور نباشید این کار را تکرار کنید. مثلا شما دوست دارید که متون داخل کادری که در همه‌ی صفحات سایتتان وجود دارد، به رنگ قرمز باشد. برای این کار بدون CSS شما لازم است هربار تگ font را نوشته و ویژگی color را ذکر کنید. اما با CSS آن‌طور که بعدا خواهید آموخت، تنها لازم است یک‌بار این کار را انجام دهید.
اما بهتر است بیشتر شما را هیجان‌زده و مشتاق نکنم و به سراغ شروع داستانی با نام آموزش CSS بروم. یادگیری CSS همانند HTML است؛ اما باید بدانید که برای یادگیری CSS لازم است که شما HTML را بلد باشید. اگر به زبان HTML مسلط هستید با من برای یادگیری CSS همراه باشید.

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

با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟
با اين عنصر شما ميتوانيد مدل، اندازه، رنگ و نوع آرايش متن ، رنگ زمينه و حاشيه صفحات و جدولها ، تنظيمات ليستها و همچنين عکسها را کنترل کنيد.

تعيين الگو و style
هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.
براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:
ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،
h1 { color:green }
اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ميگذاريم،
h1 { color:green; text-align:center }

روشهاي تعريف ااگو و style
Style ها را به سه روش ميتوان تعريف کرد:

  • <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته ميشود و با پسوند .css ذخيره ميشود که در تگ <link> داخل قسمت head آدرس دهي و فراخوانده ميشود. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">روش دوم: style را ميتوانيم در قسمت head نوشته و جاسازي کنيم که با تگهاي<style></style> مشخص ميشوند.


  • روش سوم: با قرار دادن style به عنوان خصوصيت در يک تگ و مقدار دهي آن. مانند تگ زير:
<div style=”color:green”>

نکته: اگر براي يک selector به چند روش style تعيين شود، آن الگويي که به تگ نزديکتر است اجرا خواهد شد، پس طبق اين اصل روش سوم نسبت به بقيه موثرتر است. در ضمن هيچ محدوديتي در تعيين selector ها ويا خصوصيات آنها نيست. به مثال زير توجه کنيد:
<style> 
body { color:yellow; background-color:red } 
h1,h2, h3, p { color:green } 
</style>
تعريف الگو از طريق class
گاهي اوقات يک style به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن الگو در همه جا اعمال شود، پس مياييد يک اسم واحد برايselector انتخاب ميکنيد ، بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=” “ را مينويسيم و برابر با آن اسم قرار ميدهيم،
<head> 
<style>
p.name { color:green } 
</style> 
</head> 
<body> 
<p class=”name”>……..</p> 
</body>
<A name=link>فراخواني فايل css در تگ <link>
ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را انجام دهيد، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي وب سايتتان قرار ميدهيد. css مخفف Cascading Style Sheet است.

نکته: در اين روش نيازي به نوشتن تگهاي<style></style> نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.

پس از ذخيره فايل style sheet ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ <link> را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=” “ است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=” " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=” “ فايل را آدرس دهي ميکنيد،
<link rel=”stylesheet” type=”text/css” href=”آدرس فايل “>
اين تگ نيازي به پايان دهنده ندارد.

فونتها و خواص آنها:
۱. خانواده فونتها (Font-families)
خواص font-family اين ميباشد که مي توانيد فونت صفحه خود را انتخاب کنيد. استايلها با دو نوع فونت کار خواهند کرد:
- فونتهاي خاص (Specific): اين فونتهاي عبارتند از: Arial, Garamond, Times New Roman. اين فونتها در واقع بروي کامپيوتر اشخاص به صورت پيش فرض موجود ميباشد.
- فونتهاي عام (Generic): اين فونتها عبارتند از: Serif, Sans-serif, monospace, cursive, & fantasy که اين فونتها توسط استايلها ساپورت ميشوند.
براي تعريف صورت (اشکال) فونتها در استايلها از فرمول زير استفاده ميشوند:


کد: 

کد:
font-family: font_name1, font_name2, ...
براي اينکه در نحوه نمايش فونتهاي بروي نمايشگرهاي متفاوت مشکل نداشته باشيد مي توانيد چند فونت دلخواه خود را بنويسيد تا اگر يکي از آنها توسط مرورگر ساپورت نشد به فونت بعدي برود، براي اينکار مي توانيد فونتها را با کاما از هم جدا کنيد. براي مثال:

کد: 

کد:
font-family: tahoma, times new roman, arial, serif


۲. اندازه فونتها (Font Size)
در حالت استاندارد براي کنترل اندازه فونتها در HTML، با استفاده از SIZE دز تگ <FONT> ميباشد. در استايلهاي براي تعريف اندازه فونتها بايد از فرمول زير استفاده کنيد:

کد: 

کد:
font-size: size


براي تعريف واحد در فونتهاي به چهار روش استفاده ميشوند:

- واحدهاي طول(Unit of length): اين واحدها عبارتند از: mm, cm, in, pt, pc, em, ex

- توضيحات کليدي (Keyword Description): اين واحدها عبارتند از: xx-small, x-small, small, large, x-large, xx-large

- واحد به صورت درصد (٪)

- نوع آخر بيان کردن حالتهاي کليدي در آن همانند: larger, smaller

حال اين اندازه ها به دو حالت منطقي (Absolute) و نسبي (Relative) تقسيم ميشوند. تفاوت اين دو نوع در اين ميباشد که در حالت منطقي اندازهاي را برحسب واحدهاي استاندارد اندازه گيري ميباشد اين اندازه مي اندازه را به صورت عدد و يا اعشاري تعيين کرد و واحدها در اين نوع عبارتند از: mm(millimeter), cm(centimeter), in(inch), pt(point), pc(pica) در حالت نسبي اندازه فونتها برحسب نوع کارکترها (حروف) ميباشد. براي اين حالت تنها دو واحد em, ex ميباشند. که اندازه em معادل حرف بزرگ M و ex معادل حرف کوچک x ميباشند. 

بهترين نوع واحدها در اندازه گيري فونتها px ميباشد که برحسب تعداد پيکسلهاي مانيتور ميباشد.

۳. فاصله در بين کلمات، حروف و خطها
با استفاده از فومولهاي زير مي توانيد سه حالت بالايي رو مشخص کنيد:

کد: 

کد:
word-spacing: size
letter-spacing: size
line-height: size

در حالتهاي بالا به ترتيب فاصله بين دو کلمه، فاصله بين دو حرف، فاصله بين دو خط را مشخص مي کنيد.

۴. جهتهاي افقي و عمودي متنها:


کد: 

کد:
text-align: alignment
vertical-align: alignment

در حالت اولي (حالت افقي) جهتها عبارتند از: left, center, right و در حالت دومي (حالت عمودي) جهتها عبارتند از: baseline, bottom, middle, sub, super, text-top, text-bottom, top

۵. حالتهاي خاص


کد: 

کد:
1. text-decoration: decoration
decoration: blink, line-throught, overline, underline, none
2. text-transform: transform
transform: capitalize, lowercase, uppercase, none
3. font-variant: variant
variant: small-caps, none

خواص رنگها:
رنگها را مي توان به چند حالت در استايلها تعريف کرد. براي مثال:


کد: 

کد:
body { color: teal }
body { color: #008080 }
body { color: rgb(0, 128, 128) }
body { color: rgb(0%, 50%, 50%) }


همانطوري که در بالا مشاهده کرديد به چهار روش مي توانيد رنگها را تعريف کنيد. در روش اول شما مي توانيد اسم رنگهايي که توسط HTML پشتيباني ميشوند را بنويسيد. در روش دوم رنگها را به صورت اعداد هگزا استفاده شده اند و در دو روش بعد که مقادير سه رنگ قرمز، سبز و آبي را به صورت ارقام و درصد استفاده شده اند.


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



کد: 

کد:
background-image: url(IMAGE)

در اينجا IMAGE آدرس عکس ميباشد براي مثال:

کد: 

کد:
B { background-image: url(d:\tem\images\bold_bg.gif) }

در مثال بالا شما زماني که تگ BOLD به کار برديد عکس زمينه براي آن تگ bold_bg.gif خواهد بود.

تکرار عکس در صفحه:


کد: 

کد:
background-repeat: repeat_value


در اينجا مقدار repeat_value مي توان گزينه هاي از قبيل repeat, repeat-x, repeat-y, no-repeat باشند. مثال:



کد: 

کد:
body { 
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat }

body { 
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat-x }

body { 
background-image: url(d:\tem\images\eagles.jpg);
background-image: repeat-y }

body { 
background-image: url(d:\tem\images\eagles.jpg);
background-image: no-repeat }


در مثالهاي بالا به ترتيب به صورتهاي مختلف نمايش داده ميشوند.: ۱. تکرار عکس در تمامي صفحه، ۲. تکرار عکس در جهت محور xها (افقي)، ۳. تکرار عکس در جهت محور yها (عمودي)، و ۴. بدون تکرار ميباشد. که به صورت شکل زير ميباشند.
امضاء SaaRaa
پاسخ
 سپاس شده توسط hamzeh
#2
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
کفپوش اپوکسی| اجرای کفپوش اپوکسی| ملات ضد اسید فوران|
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.

وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.

LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است: 
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js:
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.

قابلیت های کلیدی LESS:
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.

دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها :

متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.

/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}

Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.

نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.

Wikipedia این طور CSS3 را تعریف می نماید:

"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحی سایت را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."

فواید css3 :

در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:

1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت


اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.


یک انتقال (Transition) دقیقا چیست؟ :

یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند

محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.


امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟

LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.

LESS دارای دو نوع پیاده سازی است: 
سمت کاربر
سمت سرور

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

برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
طراحی فروشگاه اینترنتی و سایت ساز
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS

در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن

متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins

و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها

متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}
سایت ساز
به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.

اجازه بدهید در ابتدا به شما بگویم که یاد گرفتن و استفاده از flexbox بسیار ساده میباشد. این سبک تازه و مدرن در زبان CSS بیشتر برای مشکلات Float و Block آبجکتها در داخل صفحه به وجود آمده است. من شنیده ام که بسیاری از طراحان وب سایت گفته اند که flexbox بسیار پیچیده و مشکل میباشد. ولی این رو بارها و بارها به خود بگویید که یاد گرفتن flexbox بسیار ساده میباشد.

یکی از تکنیک های یاد گرفتن flexbox این است که همه چیز بسیار روشن و شفاف باشد. در ابتدا ما میخواهیم بگوییم که flexbox چیست و چرا به وجود آمده است.

FLEXBOX چیست؟

Flexbox یا همان Flexible Box Layout Model هم نامیده میشود, به مجموعه ای از قوانین CSS گفته میشود که میتواند طراحی و چیدمان را برای حالتهای Responsive بسیار راحتتر نماید.

Flexbox یکی از اولین تکنیک های css میباشد که در دنیای مدرن وب امروزه مورد استفاده قرار میگیرد. این کاملا منصفانه و درست است که بگوییم تا قبل از معرفی شدن flexbox هیچ تکنیک مطمئن و معتبری برای پیاده سازی وب سایت های ریسپانسیو وجود نداشته است.

بسیاری از روشهای هک در CSS برای این چنین کارهایی وجود داشته است مانند display: inline-block و مانند اینها. اما همه اینها در وب سایت های ریسپانسیومشکلاتی را هم داشته اند. به همین دلیل میباشد که بسیاری از وب سایت ها هنوز هم از زبان جاوا اسکریپت برای ریسپانسیو نمودن استفاده مینمایند که امروزه امری بیهوده به نظر میرسد.
طراحی فروشگاه اینترنتی و سایت ساز
Flexbox برای چه طراحی هایی مناسب میباشد؟

Flexbox توسط سازمان W3C ارائه شد و در نگاه اول برای طراحی آبجکتها در داخل صفحه مورد استفاده قرار میگیرد مانند طراحی بخش منوها در یک صفحه و نه کل صفحه.

دلیل اینکه از flexbox برای طراحی کل صفحه استفاده نمی نمایند این است که flexbox همراه و در کنار زبان css میباشد که معمولا با نام تخصصی Grid Layout Module در بین طراحان نیز شناخته میشود. Grid layout برای طراحی کل ساختار یک صفحه وب سایت هم میتواند مورد استفاده قرار بگیرد. اما متاسفانه بسیاری از محدودیتها میتواند در آن وجود داشته باشد. حتی آخرین ورژن از مرورگر گوگل کروم هم میتواند با آن مشکل داشته باشد.

Styling components

Flexbox برای طراحی سایت و دادن Style به بسیاری از عناصر و آبجکتها در صفحه وب سایت مناسب میباشد. چنانچه از قدرت اصلی flexbox استفاده نمایید, میتواند به بسیاری از روش های دیگر برتری داشته باشد. بطوریکه توسط flexbox میتوانید به جای فرمت دهی تک تک آبجکتها, آنها را به صورت گروه درآورده و style مورد نظر را به آنها بدهید.

زمانی که از flexbox استفاده مینماییم به ندرت احتیاج خواهید داشت تا به صورت انفرادی آیتم ها در داخل صفحه وب را موقعیت دهی نمایید. یکی از بهترین گزینه ها برای موقعیت دهی آبجکت ها در داخل صفحه وب سایت محسوب میشود. یکی دیگر از مزیت های دیگر flexbox برای کنترل موقعیت دهی مجموعه ای از آیتم ها در کنار یکدیگر میباشد.

به طور مشخص flexbox به دو بخش اساسی تقسیم بندی میشود. دسته اول خصوصیت هایی که به آبجکت های Container نسبت داده میشود و دسته دوم خصوصیت هایی که به آبجکت های داخلی یا Child آنها نسبت داده میشود.



پشتیبانی مرورگرها

پشتیبانی در مرورگرها سوال بسیار مهم و البته پیچیده ای میباشد. این مسئله میتواند بسیار پیچیده باشد چراکه flexbox دارای چندین نوع نوشتاری و ساختار میباشد. در ابتدا بعضی از شرکت های ارائه دهنده مرورگرها در پشتیبانی از flexbox مردد بودند و به همین دلیل چند ورژن از flexbox به وجود آمد.

خوشبختانه توسط CSS Browser Prefix میتوانیم از بسیاری از قابلیتهای آن حتی در مرورگرهای قدیمی هم استفاده نماییم. بر طبق گزارشهای سایت caniuse.com تنها مرورگر IE9 کمی مشکلاتی را به وجود آورده است.

خوب پشتیبانی نشدن Flex Box در مرورگر IE9 چندان مهم نمیباشد و برای بسیاری از کاربران و طراحان وب سایت همیشه بدون سر و صدا و حاشیه بوده است.

نسخه های مختلف flexbox

از همکاری و هماهنگی بین بسیاری از سازمان ها و شرکت ها و کمپانی های مرورگرها تشکر مینماییم. هم اکنون بسیاری از مرورگرها به خوبی بسیاری از قابلیتهای flexbox را پشتیبانی مینمایند.

در حال حاضر سه ورژن از flexbox وجود دارد که شما طراحان وب سایت باید از آنها اطلاع داشته باشید.

ورژن قدیمی

ورژن میانی

ورژن جدید

نسخه های مختلف مرورگرها ورژن های متفاوتی از flexbox را پشتیبانی مینمایند. به عنوان مثال مرورگر IE10 نوع ورژن میانی را پشتیبانی میکند.

بر طبق اصول نوشتن CSS Browser Prefix میتوانیم flexbox را از مرورگرهای قدیمی تا مرورگرهای جدید بنویسیم. با وجود اینکه مرورگرهایی که ورژن های جدید را پشتیبانی مینمایند دیگر دستورات ورژن قدیمی flexbox را نخواهند خواند.

رمز و راز فهمیدن flexbox

مهم این است که متوجه شوید همیشه flexbox ربطی به box بودن آبجکت ها در داخل صفحه ندارد. تا به حال تمامی طراحی در صفحات وب سایت بر اساس محور x و y بیان شده است.

به یاد داشته باشید flexbox از نوع vector میباشد. به این معنا که برای استفاده از آن کافی است به طول و درجه آن اشاره نمایید. میتوانید بدون تاثیر گذاشتن بر روی طول آبجکت ها زاویه آنها را تغییر دهید و بالعکس.

از نگاه دیگر بسیاری از مفاهیم جدید که در flexbox مطرح شده است ممکن است در ابتدا پیچیده به نظر بیاید
امضاء SaaRaa
پاسخ
 سپاس شده توسط hamzeh




کاربرانِ درحال بازدید از این موضوع: 1 مهمان