• طراحی سایت اصفهان سایت-سئوی سایت در اصفهان-خدمات سئو در اصفهان
• 1401/05/30

آشنایی با زبان css (1)

 

زبان نشانه‌گذاری CSS در حقیقت زبانی برای توصیف نحوه‌ی نمایش صفحات وب‌سایت است. اگر یک وب‌سایت را مانند یک ساختمان در نظر بگیریم HTML اسکلت‌بندی و ساختار کلی سایت محسوب شده و CSS نمای ساختمان، رنگ‌ها، کاغذ دیواری‌ها و تمام بخش‌های مربوط به دکوراسیون و زیباسازی ساختمان را شامل می‌شود. زبان‌هایی مانند ASP و PHP را نیز می‌توان مانند قفل‌ها، گاو صندوق‌ها، سیستم اطفاء حریق و تمامی امور مربوط به هوشمند سازی ساختمان تشبیه کرد.

زبان css  و کاربردی آن

وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html و css چیست ؟ با کمک css چه کارهایی می توان انجام داد؟ کاربرد و ویژگی های css چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد می‌توانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبان‌ها css می‌باشد که می‌تواند جلوه‌های زیبایی به سایت شما دهد.

زبان css

در ابتدا باید بدانید که Css مخفف چیست؟ سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.

دلیل نام‌گذاری CSS

دلیل نامگذاری این زبان به CSS یا Cascading Style Sheets به معنای صفحات استایل آبشاری، نحوه اجرای کد‌های این زبان است. طراحان وب در نوشتن کدهای CSS، کدها را از کل به جز پیش می‌برند چرا که ماهیت این زبان Overwrite یا بازنویسی کدهای خطوط پایین‌تر روی کدها در خطوط بالاتر به صورت Cascade یا همان آبشاری است. همچنین در کنار نحوه اجرا، اعمال همزمان همان کد روی بخش‌های مختلف صفحه نیز به صورت یکجا اتفاق می‌افتد.

مفهوم آبشاری بودن این زبان زمانی بیشتر به چشم می‌خورد که به یک المان در صفحه چندین بار استایل‌دهی شده باشد. در این صورت آخرین کدی که به آن المان اشاره کند به صورت آبشاری روی همه کد‌های مربوط به آن Overwrite شده و اجرا خواهد شد. به عبارت ساده می‌توانیم عبارت Cascading Style Sheets را استایل‌دهی صفحات وب به صورت آبشاری نیز معنا کنیم.

هدف و کاربرد css 

هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

برخی از کاربردهای CSS عبارتند از:

• تعیین ارتفاع و عرض
• طراحی رسپانسیو صفحات
• انتخاب پس زمینه
• انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
• تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
• مشخص کردن میزان فاصله ی عناصر از همدیگر
• تغییر در نوع نوشتاری (فونت، رنگ و…)

ساختار یک کد در Css از دو قسمت تشکیل شده است:

• انتخاب کننده (Selector)

• بلاک اعلان (Declaration)

• Selector

در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده می‌تواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کننده‌های سی اس اس به چند دسته تقسیم می‌شود:

• انتخاب کننده عنصر:

با استفاده از این انتخاب کننده می‌توانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ‌

در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.

• انتخاب کننده id :

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

• انتخاب کننده Class :

برای این کار باید تمام تگ‌هایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص می‌باشد.

زبان css  و کاربردی آن

---

برای مشاهده مقالات بیشتر در مورد سئو سایت و طراحی سایت به صفحه مقالات مراجعه نمایید.