انتخابگرهای CSS

انتخابگر های CSS یا همان Selector ها از مهمترین و پایه ای ترین قسمت های مربوط به CSS هست

در این آموزش میخواهم چند تای آنها رو معرفی کنم

/* All tags */
*
{
   color:red;
}

/* All p tags */ 
p 
{
   color:blue; 
}

/* Tag with specified id */ 
#title1
{
   color:pink
} 

/* All tags with specified class */ 
.class1 
{ 
   color:green; 
} 

/* All a tags with specified attribute */
a[target] 
{ 
   color: black;
} 
a[target=_blank] 
{ 
   color:yellow;
}

*: انتخابگر تمام عناصر صفحه

p: انتخابگر تگ همنام با آن در اینجا style روی تمام تگ های p اعمال میشود

# : انتخابگر id است یعنی style نوشته شده برروی تگی با id مشخص شده (title1) اعمال میشود

.: انتخابگر class است یعنی style روی تمام تگ هایی که کلاس مشخص شده را دارند (class1) اعمال میشود

[]: ​انتخابگر صفت که در مثال بالا به معنی انتخاب تمام تگ های  a که دارای صفت target میباشند.همان طور که میبینید میشه مقدار صفت رو هم داخل [] قرار بدیم 

 

نکته دیگه ای که باید در نظر گرفته بشه اینه که میتونیم از این انتخابگرها به صورت ترکیبی هم استفاده کنیم 

مثال:

p,a
{
    color:black;
}
#title1,#title2
{
    color:gray;
}
.class1, #title1
{
    color:yellow;
}
.class1,.class2.class3
{
   color:brown ;
}

توضیح مثال: برای استفاده از چند انتخابگر به طور همزمان فقط کافی است بین آنها از "," استفاده کنیم

ادامه دارد . . .

 

نوشته شده در شنبه ۱۳۹۲/۰۵/۱۹ ساعت ۱۵:۰۱ توسط مهدی باقری | تعداد بازدید ۲۴۵ | تعداد نظرات ۱

معرفی سایت های مفید

تصمیم گرفتم که یکسری سایت های مفید که بدرد دوستان برنامه نویس میخوره رو لیست کنم

جدول لینک ها

سایت های انگلیسی
سایت پاسخگویی به سوالات http://stackoverflow.com
شبکه اجتماعی مربوط به کار http://www.linkedin.com
پاسخ به سوالات، مقالات کاربردی و نمونه کد به همه زبان ها http://www.codeproject.com
مکانی برای مدیریت واشتراک پروژه های متن باز http://github.com
مکانی برای مدیریت واشتراک پروژه https://bitbucket.org
مکانی برای مدیریت واشتراک پروژه http://sourceforge.net
مکانی برای مدیریت واشتراک پروژه http://www.codeplex.com
یکی از بهترین مراجع آموزش وب http://w3schools.com
آموزشی بسیار ساده از C# - VB - Python - Ruby http://www.dotnetperls.com
یکی از بهترین و حرفه ای ترین وب سایت های آموزشی و متن باز https://developer.mozilla.org
سایت آموزشی با استفاده از تمرین توسط کارآموز http://www.codecademy.com
آموزش های زیادی داره از جمله برنامه نویسی http://www.khanacademy.org
اینم سایتی که تقریبا همه چیز رو آموزش میده https://tutsplus.com
اینم سایتی که بیشتر تمرکزش روی CSS است http://css-tricks.com
ایجاد دکمه های زیبا با CSS http://www.cssbuttongenerator.com
ایجاد دکمه های زیبا با CSS http://www.cssbutton.me
ایجاد دکمه های زیبا با CSS http://www.bestcssbuttongenerator.com
اینم که خیلی جالبه: نوشتن و بازبینی کد های بقیه http://codepen.io
موتور جستجوی آیکن http://findicons.com
موتور جستجوی آیکن https://www.iconfinder.com
موتور جستجوی آیکن http://www.iconarchive.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colorcombos.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colormatch5k.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colourlovers.com
پیدا کردن ترکیب رنگ در طراحی ها https://kuler.adobe.com
سایت های فارسی
بهترین سایت آموزش زبان های مایکروسافتی http://www.dotnettips.info
انجمن فعال برنامه نویس http://barnamenevis.org
آموزش انواع زبان ها http://developer1.ir
آموزش HTML http://html.ir
دانلود آموزش و نمونه کد http://www.sourcebaran.com
دانلود نمونه کد http://sourceiran.com
آموزش http://webgoo.ir

به روز می شود.

نوشته شده در پنج شنبه ۱۳۹۲/۰۵/۱۷ ساعت ۱۶:۱۳ توسط مهدی باقری | تعداد بازدید ۳۴۸ | تعداد نظرات ۳

زبان LESS

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

زبان پویای شیوه‌نامه ها

به زبان ساده همون css خودمون هست ولی یه سری قابلیت های جالب دیگه بهش اضافه شده.

یکسری قابلیت جدید داخل CSS آورده که بشه راحت تر استایل نوشت برای سایت. که خیلی از پروژه های وب ازش استفاده میکنن مثل جوملا، bootstap , ...

روش استفاده هم خیلی ساده هست دو جور میشه استفاده کرد

1: زبان LESS را در CSS صفحه مون استفاده کنیم بعد فایل مربوط به کامپایل LESS به CSS رو با تگ <link> تو صفحه بزاریم موقعی که صفحه داره لود میشه اسکریپت اجرا شده و فایل LESS رو تبدیل به  CSS میکنه که داخل مرورگر اجرا میشه

2:فایل LESS رو قبل از گذاشتن رو صفحه به CSS کامپایل میکنیم که باز هم توسط همین فایل جاوااسکریپت انجام میشه برای اجرای فایل جاوا اسکریپت هم میتونیم از NodeJS استفاده کنیم.

مراجع:

سایت انگلیسی: http://lesscss.org
سایت فارسی: http://lesscss.ir

این مقاله به مرور زمان آپدیت میشود.

 

نوشته شده در چهارشنبه ۱۳۹۲/۰۴/۱۹ ساعت ۰۴:۰۹ توسط مهدی باقری | تعداد بازدید ۲۳۲ | نظر بدهید

طراحی پاسخگو

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

چند اصل کلی وجود داره در طراحی پاسخگو

1: اسفاده از درصد برای سایز عناصر موجود در صفحه

2: استفاده از Media Queries ها 

لینک های مفید:
responsive-web-design

مقاله فارسی

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

نوشته شده در چهارشنبه ۱۳۹۲/۰۴/۱۹ ساعت ۰۴:۰۵ توسط مهدی باقری | تعداد بازدید ۲۳۱ | تعداد نظرات ۱

خاطره

سلام به همه

الان سر کلاس آموزش HTML در آموزشگاه اساطیر هستم و دارم برای بچه ها درس میدم نمیدونم چی شد حس نوشتن پیدا کردم و گفتم یه چیزی بنویسم

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

در ضمن تصمیم رو گرفتم احتمال 70 - 80 درصد میرم شرکت خودم رو ثبت میکنم بعد از این پروژه شرکت آفتاب. آخه خسته شدم راستش برای آدم هایی کارکردم که قدر زحمت رو نمیدونن و فقط به فکر جیب خودشون هستن حالا باس ببینم چی میشه شرایط چهطور پیش میره

خوب دیگه تموم شد کلاس. خداحافظ

نوشته شده در سه شنبه ۱۳۹۲/۰۴/۱۸ ساعت ۱۱:۵۰ توسط مهدی باقری | تعداد بازدید ۲۷۰ | تعداد نظرات ۱