درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من
صندوق پیام
همه را دیدم تنظیمات
  • در حال دریافت لیست پیام ها
صندوق پیام
  • در حال دریافت لیست رویدادها
همه رویدادهای من

طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها

0 نظرات
سلام به همه ی عزیزان ITPRO
در جلسات قبل با فرم ها و جداول آشنا شدیم و در جلسات باقی ماندمی خواهیم مباحث ریزی که در میان جلسات قبل گفته نشده را بگویم . در این جلسه ابتدا کمی راجع به کد نویسی اصولی(برای لود سریع تر صفحات) و سپس راجع به Transition ها صحبت کنیم.

اصولی کد بنویسیم


ما در طراحی وبسایت می توانیم که به هر المان یک ID یا یک Class بدیهم و شروع به نوشتن کد CSS کنیم. اما این کار کاملا اشتباه است. ما در کد نویسی های خودمان باید جند نکته را برای اصولی تر شدن کار رعایت کنیم

نوشتن در فایل CSS جدا

ما تا الان همه ی Style ها را داخل Head قرار می دادیم که کاری اشتباه است . ما باید Style های صفحه ی خود را داخل فایلی با پسوند CSS گذاشته و درون Head صفحه قرار دهیم.
برای این کار من پروژه ی 12 را ایجاد می کنم. و داخل آن یک فایل Index.html ایجاد می کنم و کد های اولیه ی هر صفحه ی وب را داخل آن می نویسم. سپس به داخل نرم افزار Notepad ++ می روم و با زدن CTRl+N یک فایل جدید ایجاد می کنم. از منوی Languege در قسمت C گزینه ی CSS را انتخاب می کنم. سپس فایل را در فولدر Project12 در کنار فایل index.html قرار می دهم. سپس فایل Index را باز می کنم تا آن را با فایل CSS مرتبط کنم. فایل HTML:
<html>
	<head>
	
	</head>
	<body>
	
	</body>
</html>
حالا می خواهم فایل HTML را به فایل CSS مرتبط کنم. برای این کار من از تگ LINK استفاده می کنم:
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	
	</body>
</html>
من با استفاده از تگ Link یک ارتباط بین یک فایل دیگر و صفحه ی HTML ایجاد می کنم. سپس با استفاده از Rel Attribute نوع ارتباط بین این دو فایل و سپس با Href آدرس فایل CSS را می دهم.
حالا فایل های ما با هم در اتباطند برای تست من در فایل Css به Body یک رنگ پس زمینه می دهم:
body{
	background-color:darkred;
}
توجه داشته باشید که داخل فایل CSS نیازی به نوشتن تگ <style> نیست و شما تنها باید Selector ها و Property ها را درون آن بنویسید.
خروجی صفحه ی HTML :
css files

دیدیم که خروجی صفحه با رنگ پس زمینه ی داده شده لود شد.

استفاده از کلاس های مختلف در مواقع لاظم

شما می توانید به هر المان چندین کلاس بدهید. این در مواقعی کاربرد دارد که شما می خواهید کلاس ها را بر اساس کارشان تقسیم کنید مثلا تعدادی کلاس برای چیدمان صفحه ، تعدادی برای شکل و ظاهر و ... ایجاد می کنید (که انجام این کار نیز به شما پیشنهاد می شود.) برای دادن چند کلاس به یک المان کافیست به شکل زیر عمل کنید:
<div class="class1 class2 class3"></div>
!! استفاده از Selector های خلاصه تر
در قسمت پایین چند مورد از Selector های خوب و بد آورده شده:
/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

/* Bad */
article.feat-post {...}

/* Good */
.feat-post {...}

استفاده از کمترین تعداد فایل CSS

شما می توانید هر مقدار که بخواهید با استفاده از تگ Link توی یک صفحه ی HTML فایل CSS وارد کنید اما برای اصولی تر شدن شما باید سعی کنید از کمترین تعداد ممکن برای این کار استفاده کنید.

استفاده از Sprite image ها

یکی از تکنیک ها برای بهینه تر شدن و بالا رفتن سرعت لود سفحه استفاده از Sprite image ها است . این تکنیک چندین عکس را در یکی جا می دهد و سرعت لود صفحه را بالا می برند برای یادگیری این تکنیک به این آموزش مراجعه کنید.

Pseudo-classes


حتما در وبسایت های مختلف دیده اید که هنگامی که موس روی المانی می رود شکل آن المان تغیر می کند. این کار را با CSS Hover بسیار ساده می توان انجام داد.
برای این کار من Project13 را ایجاد و داخل آن یک فایل index.html و یک Style.css ایجاد می کنم سپس این دو را به هم لینک می دهم:
فایل HTML:
<html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
	
</body>
</html>
فایل CSS ما فعلا خالی است.
حالا داخل صفحه ی HTML یک لینک درست می کنم و آدرس آن را "#" قرار می دهم(این آدرس را برای لینک هایی که نمی خواهید به صفحه ای بروند قرار دهید.)
<a href="#">درباره ی ما</a>
خروجی:
hover

حالا کمی به آن Style می دهم:
a{
	display:inline-block;
	width:100px;
	line-height:40px;
	text-align:center;
	border:1px solid darkblue;
	color:darkblue;
}
توجه داشته باشید که در حالت پیشفرض تگ های a دارای inline Display هستند و برای دادن عرض و طول نیاز دارند که Display با خاصیت Block یا inline-Block بگیرند. ر اینجا با یک پراپرتی جدید به نام Text-Align آشنا می شویم که در المان های Block محتوا را در وسط قرار می دهد. همچنین ما با گذاشتن پراپرتی line-height به جای Height کاری می کنیم که المان ها در ارتفاع نیز در وسط قرار گیرند.
خروجی:
hover

حالا ما می خواهیم کاری کنیم که در زمانی که موس روی لینک ما آمد شکل آن تغیر کند. برای این کار ما باید از یک Selector به شکل زیر استفاده کنیم:
a:hover{
	
}
ما می توانیم هر نوعی از Selector ها را در قبل از hover: استفاده کنیم. حالا می می خوام با استافده از این Selector تغیراتی در شکل این لینک در هنگام رفتن رموس روی آن ایجاد

کنم:
a:hover{
	background-color:darkblue;
	color:white;
}
میبینیم که در هنگام رفتن موس به روی لینک رنگ نوشته و پس زمینه ی آن عوض می شود:
hover


ما می توانیم از Selector های زیر که دستوراتی مانند hover: دارند استفاده کنیم:
/* لینک های دیده نشده */
a:link {
    color: #FF0000;
}

/* لینک  های دیده شده*/
a:visited {
    color: #00FF00;
}

/* در هنگام رفتن موس روی لینک */
a:hover {
    color: #FF00FF;
}

/* لینک هایی که با TAB روی آن قرار گرفته اند */
a:active {
    color: #0000FF;
}

Transition ها


وقتی شما از Pseudo-classe استفاده می کنید ، تغیرات در کسری از ثانیه انجام می شوند. شما می توانید زمان اجرای این تغیرات را با استفاده از Transition ها در اختیار بگیرید.
برای استفاده از Trsnition ها شما می توانید از تنها پراپرتی Transtion با دادن مقدار های مختلف استفاده کنید و یا از چند پراپرتی برای تنظیمات مختلف آن. برای مثال من برای لینک a

که در بالا ساختیم Transition در نظر می گیرم:
a{
	display:inline-block;
	width:100px;
	line-height:40px;
	text-align:center;
	border:1px solid darkblue;
 	color:darkblue;
	
	/*Transitions*/
	transition-timing-function: linear;
	transition-delay: 1s;
	transition-property: all;
}
a:hover{
	background-color:darkblue;
	color:white;
}
من با استفاده از این سه پراپرتی یک Transition به تگ دادم. برای دادم زمانٍ Transition ما از پراپرتی transition-delay ، برای دادن پراپرتی که Transtion برای آن اعمال می شود از پراپرتی transition-property (که با دادن مقدار all به آن می توانید این Transition را برای همه ی پراپراتی ها اعمال کنید) و برای مشخص کردن نوع Transition از Transition-riming-function استفاده می کنیم.(با دادن مقدار های مختلف سرعت تغیر بر حسب زمان تغیر می کند مثلا با دادن مقدار ease به آن سرعت شروع و پایان Transition کند و در زمان های دیگر تند تر است.)

همچنین ما می توانیم تمام این مقدار ها را در یک پرارتی به المان بدهیم(که پیشنهاد می شود):
transition:ease background-color 1s;
در مقدار اول نوع ، در دومی پراپرتی و در سومی زمان را مشخص می کنیم.
خروجی را در مرورگر ببینید.(در عکس نمی توان Transition را نشان داد.)

برای اطمینان از این که Transition در همه ی مرورگر ها به درستی نمایش داده می شود کد های خود را به شکل زیر تکرار کنید:
transition:linear all 1s;
-webkit-transition:linear all 1s;/*Chrome and safari*/
-moz-transition:linear all 1s;/*firefox*/
-o-transition:linear all 1s;/*opera*/
حالا می توانید مطمین باشید که Transition شما در تمام مرورگر ها (به جز نسخه های قدیمی IE ) درست اجرا خواهند شد.

در جلسه ی بعد با مبحث جذاب CSS Animation ها آشنا خواهیم شد.
ممنون از همراهی شما دوستان!
ITPRO باشید
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - tosinso.com

برچسب ها
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
مطالب مرتبط
نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow