مرجع مقالات رسمی طراحی سایت مرجع مقالات رسمی طراحی سایت .

مرجع مقالات رسمی طراحی سایت

CSS چیست ؟

طراحی سایت ساخت سایت از زبان‌های نشانه گذاری و لهجه‌های برنامه نویسی مختلفی در سمت و سوی سرور و در سمت مشتری به کار گیری میگردد. یکی‌از مهم‌ترین لهجه‌های نماد‌گذاری که وظیفه‌ی رخ‌دهی و زیباسازی ظاهر گرافیکی وبسایت را بر عهده دارد، نحوه‌نامه یا Stylesheet یا CSS نام داراست.

css3

CSS دقیقا چه کاری انجام می‌دهد ؟
برای اینکه بهتر با معنی و کارایی CSS آشنا شوید، از یک مثال استفاده می‌کنیم.

در صنعت خودروسازی، برای تولید خودروها پلتفرم‌هایی وجود دارا‌هستند که شامل قطعات اصلی موتوری و عملکردهای اصلی خودرو است. روی این پلتفرم‌ها، بدنه‌های متفاوت و امکانات داخلی متفاوتی نصب می‌شود. به عبارت دیگر ممکن است ۵ خودرو از هسته‌ی اصلی مشترکی به کار گیری کنند البته در ظاهر با یکدیگر مختلف باشند.

به عنوان مثالی دیگر، بشر‌ها کلیه دارای اندام‌های داخلی مشابه مشتمل بر استخوان‌بندی، سیستم گوارش، سیستم تنفس و … می باشند ولی از نگاه ظاهری با یکدیگر فرق می‌کنند. هر یک رنگ پوست متفاوت و رخ متفاوتی دارا هستند.

CSS در طراحی سایت مانند مثال‌های بالا نقش تغییر‌و تحول ظاهر را دارد.

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

در نگارش‌های تازه CSS شامل CSS 3 و CSS 4 قابلیت و امکان‌های پیشرفته‌تر مثل انیمیشن‌ها، تغییر اندازه‌های سه بعدی، مدیر حاذق فونت‌ها، مدیریت حاذق‌تر روی تصاویر پس‌مورد و بسیاری ویژگی‌های توانا دیگر بیش تر شده است.

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

به ویژه در مرورگرهای موبایل که با منابع ضعیف‌تری به فعالیت می‌پردازند، ممکن است برخی ویژگی‌های جان دار در CSS تماما یا با با عملکرد گزینه انتظار قابل استعمال نباشند. جهت باز نگری سازگاری مرورگرها با مقررات CSS می‌توان از سایت Can I Use بهره مند شد.

کدهای CSS چگونه نوشته میگردند ؟
دستورها CSS در مجموع شامل دو بخش Selector یا تعیین‌گرها و Ruleها یا مقررات میگردند. هر Selector یک یا گروهی از عنصرها HTML را هدف‌گیری می کند و هر Rule یک ویژگی ظاهری عنصر را تغییر‌و تحول میدهد.

برای مثال قطعه کد زیر موادتشکیل دهنده جمله را انتخاب می‌نماید و رنگ دورنما‌ی آن ها را به قرمز‌رنگ تغییر‌و تحول میدهد:
انتخاب‌گرها می توانند نام موادتشکیل دهنده مثل p را شامل شوند، می توانند با استفاده از class عنصرها را هدف‌گیری کنند و همچنین با به کار گیری از id و سایر صفت‌ها( Attributeها ) می‌توان عنصرهای مورد نظر را تعیین نمود.

در استانداردهای جدید CSS تعیین‌گرها نیز پیشرفت‌های قابل توجهی داشته‌اند. مثلا می‌قدرت پاراگراف‌هایی که پس از یک checkbox تیک خورده قرار دارا هستند را هدف قرار داد.

چه طور می‌توانم کدنویسی CSS را خاطر بگیرم ؟
اوامر CSS در مقایسه با سایر گویش‌های نماد‌گذاری و برنامه‌نویسی زیاد نیستند و یادگیری آنها به بعدازظهر زیادی نیاز ندارد. ولی یادگیری CSS به دلیل اثرات جانبی که امرها روی یکدیگر دارند و ناهماهنگی‌هایی که در مرورگرهای متفاوت تولید می شوند، به تمرین زیادی نیاز دارد.

بنابراین تمرین، نقشی بسیار مهم در یادگیری CSS دارد. برای آغاز یادگیری CSS می‌توانید از یادگرفتن‌های آنلاین، فیلم‌های آموزشی، کتاب‌ها یا کلاس‌های مربوطه به کار گیری کنید.

ابزارهای Developer Tools در مرورگرهای مدرن فایرفاکس و گوگل کروم، یادگیری CSS را نسبت به پیشین بسیار ریلکس‌تر کرده‌اند. با کمک این ابزارها می توانید به صورت زنده، کدهای CSS را ویرایش نمایید و اثر آن ها را ببینید. همچنین خطایابی و رفع تداخل دستورات CSS با کمک Developer Tools مرورگرها بسیار آسوده شده است.

مقادیر پیش‌فرض مقررات CSS
مرورگرها به صورت پیش‌فرض روی عناصر HTML شما ضوابط CSS خاصی را اعمال میکنند. مثلا تگ‌های h1 تا h6 دارای اندازه‌های فونت مختلفی میباشند یا عنصرهای p قبل و بعد از آن خود دارای فضایی خالی هستند. برخی از کدنویسان CSS با استفاده از مقررات CSS Reset این مقررات را کاملا حذف می‌کنند و برای هر عنصر مطابق ذوق وسلیقه خود ضوابط جدید تعریف می نمایند.

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

به عنوان مثال اگر فونت body را تغییر دهید، اکثر زمان ها موادسازنده زیرمجموعه از این تغییر و تحول پیروی میکنند ولی برخی از عناصر از فونت پیش‌فرض خودشان به کار گیری می کنند.

مثال دیگر اینکه در حالتی‌که از ضوابط transform روی برخی موادسازنده استفاده فرمائید، کارایی بعضا اوامر دیگر روی این موادسازنده متعدد خواهد شد.

بعضی مفاهیم بنیادین CSS:
واحدهای اندازه‌گیری
گونه جعبه( Box Model )
ارث‌بری
حق اولویت‌ها
عنصرها و کلاس‌های شبه( Pseudo )
گونه جدول‌ها
گونه شناورها( Float )
جور Flex
گونه Grid
ارتباط HTML و CSS و جاوااسکریپت
عنصرها HTML به صورت بی واسطه با CSS درباره هستند و بدون CSS شکلی نا مطلوب و نازیبا خواهند داشت. با کمک جاوااسکریپت همان طور که می‌اقتدار موادتشکیل دهنده HTML را کاهش یا افزایش بخشید و هرگونه تغییرات دلخواه را بر روی آن ها اعمال نمود، امکان انجام تغییرات دلخواه روی ویژگی‌های CSS نیز موجود است.

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


برچسب: طراحی سایت،
امتیاز:
 
بازدید:

+ نوشته شده: ۲ تیر ۱۳۹۹ساعت: ۰۶:۰۸:۰۱ توسط:علی پور موضوع: نظرات (0)