CSS چیست ؟ کاربرد 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 {
background-color: red;
}
1
2
3
p {
background-color: red;
}
گزینش گرها میتوانند اسم عناصر مثل 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 را نیز در اختیار گرفتن کرد.