بایگانی برچسب: s

HTML و CSS

آموزش برنامه نویسی CSS – اعمال تغییر بر روی لینک ها

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

برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.
برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

a:link و a
این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
a:hover
این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
a:active
این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
a:visited
این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

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

برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و …

در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت ۱۲pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:

همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:

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

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

HTML و CSS

آموزش برنامه نویسی padding-margin – CSS در CSS

درود
در این جلسه ی آموزشی قصد دارم خصوصیات margin و Padding در CSS یا به عبارتی box model در css رو خدمتتون آموزش بدم. البته box model شامل border هم میشه که اون رو جلسات گذشته آموزش دادم .
11
Margin
توسط این خاصیت شما میتونید یک فاصله بین عنصر فرزند و عنصر والد ایجاد کنید. به کد زیر دقت کنید:

در اینجا عنصر والد رو body قرار میدیم و عنصر فرزند ChildElement در نظر میگیریم . اگر ما بخوایم این کادر رو از حاشیه ی Body به اندازه ی ۵۰ پیکسل فاصله بدیم باید margin رو برای این عنصر ۵۰px در نظر بگیریم.

در این صورت کادر childElement به اندازه ۵۰ پیکسل از سمت چپ ، راست ، بالا و پایین از body فاصله میگیره . به طور کلmargin رو فاصله ی بیرونی می نامیم .

قاعده دستوری Margin

Margin : margin-top margin-right margin-bottom margin-left

مثال margin : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ بین عنصر والد و فرزند فاصله ایجاد کردیم .

نحوه ی نوشتن margin به اشکال مختلف

margin:10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

margin:10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

margin:10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

margin:10px;
سمت بالا و راست و پایین و چپ ۱۰px

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

Margin-top : فاصله از بالا

Margin-right: فاصله از راست

Margin-bottom : فاصله از پایین

Margin-left: فاصله از چپ

نمونه : margin-top : 20px

در این نمونه شما تنها از سمت بالا یک فاصله ۲۰ پیکسلی ایجاد میکنید .

Padding

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

در اینجا عنصر والد مد نظر ما نیست . ما یک فاصله از لبه ی عنصر فرزند به داخل ایجاد می کنیم .

در مثال بالا ما فاصله ای به اندازه ۳۰ پیکسل بین لبه ی کادر و محتوای درون کادر ایجاد کردیم . همونطور که در تصویر ابتدای مقاله میبینید ، padding فاصله ی محتوای درون کادر رو با لبه ی کادر تعیین می کنه . به طور کل padding رو فاصله ی داخلی می نامیم .

قاعده دستوری Padding

Padding : Padding-top Padding-right Padding-bottom Padding-left

مثال Padding : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ از لبه ی کادر تا محتوای داخل کادر فاصله ایجاد کردیم.

نحوه ی نوشتن Padding به اشکال مختلف

Padding :10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

Padding :10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

Padding :10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

Padding :10px;
سمت بالا و راست و پایین و چپ ۱۰px

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

Padding-top : فاصله از بالا

Padding-right: فاصله از راست

Padding-bottom : فاصله از پایین

Padding-left: فاصله از چپ

نمونه : padding-right : 20px

در این نمونه شما تنها از سمت راست یک فاصله ۲۰ پیکسلی ایجاد میکنید .
و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی Transform – CSS در CSS

درود
در CSS3

با استفاده از این خاصیت ، برای ایجاد افکت های زیبا دیگه نیازی به جی کوئری ندارید . خاصیت transform به شما این امکان و میده تا شما عناصرتون رو بچرخونید ، بزرگ و کوچیک کنید و … . حالا در مثال هایی که زده میشه به راحتی متوجه این موارد میشید .

قاعده دستوری transform

منظور از effect مقادیری هست که شما میتونید به transform بدید .

مقادیر خاصیت transform

با استفاده از این متدها و افکت ها شما میتونید عناصرتون رو بپرخونید ، برعکس کنید ، بزرگ یا کوچک کنید.

()translate

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

(translateX(valueX

این خاصیت فقط عنصر رو در جهت افقی جابجا میکنه .

(translateY(valueY

این خاصیت فقط عنصر رو در جهت عمودی جابجا میکنه .

()rotate

با استفاده از این متد میتونید عناصرتون رو بچرخونید . منظور از deg درجه هست که مقدارشو تعیین می کنید .
(rotateX(180deg

عنصر رو بصورت عمودی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر رو در حالت عمودی پشت و رو میکنه .
(rotateY(180deg

عنصر رو بصورت افقی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر در حالت افقی پشت رو رو میشه .
()scale

با استفاده از این متد میتونید ابعاد عنصرتون رو بصورت افقی و عمودی افزایش بدید . در مثال بالا ما ابعاد عنصر رو در حالت افقی ۲ برابر و در حالت عمودی ۳ برابر افزایش دادیم .
()scaleX

این متد ابعاد عنصر رو در حالت افقی افزایش میده .

()scaleY

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

()skew

با استفاده از این متد میتونید عنصرتون رو در دو حالت افقی و عمودی بصورت ۳ سه بعدی بچرخونید .

اگر مقدار درجه ای که تعیین می کنید مثبت باشه عنصر به سمت راست و اگر منفی باشه عنصر به سمت چپ میچرخه .

به عنوان مثال ما یه باکس ساده داریم که برای این باکس متد transform : skew(10deg,10deg) رو لحاظ می کنیم
میتونید با درجه ها بازی کنید و شکل های مختلفی دربیارید .

()skewX

این متد عنصر رو در حالت افقی میچرخونه .

()skewY

این متد عنصر رو در حالت عمودی میچرخونه .

پشتیبانی مرورگرها از خاصیت transform

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