همانطور که در مقدمه می خوانیم ، کلمه CSS مخفف Cascading style sheets است و به معنی ورق های سبک آبشار است. حالا چرا یک آبشار؟ زیرا دستورات CSS اعمال شده بر روی هر عنصر بر فرزندان آن عنصر نیز تأثیر می گذارد. ما در مقاله های بعدی بیشتر در این باره خواهیم فهمید! می توان گفت که تنها پیش نیاز یادگیری مفاهیم CSS ، حسن استفاده از HTML است. مباحث زیر مهمترین مباحثی هستند که برای شروع باید CSS را یاد بگیرید:
تسلط بر والدین و فرزندان
تسلط بر مفهوم عنصر و ویژگی (عنصر ، ویژگی)
بنابراین قبل از آموزش CSS شما باید آموزش HTML را دیده باشید. یادگیری HTML کار چندان سختی نیست و می توانید در مدت زمان کوتاهی بر آن تسلط پیدا کنید. HTML زبانی است که بوسیله آن همه عناصر در صفحات وب مانند جعبه متن ، دکمه ها و غیره ایجاد می شوند و با کد CSS ترکیب می شوند تا ظاهر صفحه را ایجاد کنند.
یک صفحه وب از اجزای زیر تشکیل شده است:
محتوا این قسمت از وب توسط کد HTML ایجاد شده است.
ارائه این قسمت از وب توسط کد CSS ایجاد شده است.
رفتار این قسمت از وب توسط JavaScript ایجاد شده است. آموزش جاوا اسکریپت
CSS چیست؟
کدهای CSS دستوراتی هستند که به وسیله آنها می توانیم تمام شکل ظاهری یک صفحه وب را مشخص کنیم. بنابراین شما برای اجرای طرح بندی صفحات وب خود از کد HTML استفاده می کنید و با کد CSS مشخص می کنید که هر عنصر باید چگونه باشد. شما آن را به اصطلاح رنگ آمیزی کرده و ویژگی دیگری کاملاً به آن اضافه می کنید!
کد CSS می تواند در موارد تکراری ، زمان طراحی و اندازه کد سایت صرفه جویی کند.
خوب است بدانید که در رتبه بندی وب سایت ها ، یعنی SEO ، گوگل سرعت بارگذاری سایت و کیفیت کد را نیز در نظر می گیرد و وب سایت هایی را معرفی می کند که سرعت بارگذاری آنها برای جستجوگران مناسب نیست.
توجه: در گذشته ، طراحی سایت و طراحی عناصر صفحه وب از طریق جداول انجام می شد. جداول مشکلات زیادی دارند و بنابراین با ظهور CSS کاملاً منسوخ می شوند. از جمله مشکلات جداول می توان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب سایت هایی است که با صفحه گسترده اجرا می شوند.
در مقابل ، در وب سایتی که با کد CSS پیاده سازی شده است ، هنگام بارگیری یکی پس از دیگری عنصر در صفحه ظاهر می شود و کاربر می تواند از لحظه درخواست تا زمان کامل بارگیری ، وب سایت را بخواند و مشاهده کند.
ناگفته نماند که CSS می تواند در 90٪ مرورگرها به خوبی کار کند.
در این بخش شما با ساختار کد CSS آشنا می شوید. در حال حاضر نیازی به درک نوع سبک به کار رفته نیست ، زیرا بخشهای زیر انواع سبک عناصر را به تفصیل آموزش می دهد. بنابراین فقط به قسمتهای مورد استفاده در یک دستور CSS ، نحوه تفکیک دستورات ، موقعیت دستورات و به طور کلی ساختار دستور توجه کنید.
ساختار نحوی کد CSS
Selector: این بخش نام عنصر HTML است که می خواهیم سبک مورد نظر را به آن اختصاص دهیم.
اعلامیه: بخشی که در وسط {نوشته شده است. Sign را قسمت اعلامیه می نامند و در این قسمت باید ملکی را که می خواهید اعمال کنید نامگذاری کنید و مقدار آن را مشخص کنید. در این مثال ، ویژگی رنگ برابر با مقدار آبی و ویژگی اندازه قلم برابر با 12 پیکسل است.
برای اطلاعات بیشتر و مثالهایی در مورد ساختار نحوی کد CSS ، می توانید مقاله Code Code in CSS را مطالعه کنید.
id و Class در CSS
همانطور که در ساختار نحوی دستورات مشاهده می کنید ، در قسمت Selector عنصری را که می خواهیم سبک بر روی آن اعمال شود را ذکر می کنیم.
دستورات را فقط روی یک عنصر واحد با شناسه اجرا کنید
برای این منظور ، ابتدا باید به کد HTML برویم و ویژگی id را برای عنصر مورد نظر تعریف کنیم. سپس به قسمت دستورات CSS بروید و در قسمت Selector ویژگی ID را که برای عنصر تعریف کردیم تایپ کنید و قبل از آن نماد "#" اضافه کنید.
به عنوان مثال ، اگر بخواهیم دستورات را فقط روی یک پاراگراف خاص اجرا کنیم ، ابتدا یک ویژگی id را در آن کد HTML برای آن پاراگراف تعریف خواهیم کرد:
<p id = "para1"> این یک پاراگراف است. <p>
سپس در دستورات CSS در قسمت Selector مقدار صفت id تعریف شده را با علامت "#" می نویسیم:
# para1 {
text-align: مرکز؛
رنگ: قرمز؛
}
دستورات را بر اساس گروهی از عناصر اجرا کنید
برای این کار ابتدا باید به کد HTML برویم و ویژگی Class را برای همه عناصری که می خواهیم خصوصیات ظاهری یکسانی داشته باشند تعریف کنیم. سپس به قسمت دستورات CSS بروید و در قسمت Selector ویژگی Class را که برای عناصر تعریف کردیم بنویسید و "". سمبل. قبل از آن اضافه کنید
به عنوان مثال ، اگر می خواهیم دستورات برای تعدادی از پاراگراف های مورد نظر ما اعمال شوند ، ابتدا یک ویژگی کلاس مشترک در کد HTML برای آن پاراگراف ها تعریف می کنیم:
<p class = "center"> این یک پاراگراف است. </ p>
سپس در دستورات CSS در قسمت Selector ، مقدار ویژگی Class با یک "" تعریف می شود. یا همان نکته را می نویسیم:
. مرکز {
text-align: مرکز؛
}
بنابراین ، این دستورات فقط در پاراگرافهایی اعمال می شوند که دارای طبقه ای برابر با مرکز هستند و سایر پاراگرافهای صفحه تحت تأثیر این دستورات نیستند.
برای کسب اطلاعات بیشتر در مورد کلاس ها و شناسه ها ، ضمیمه مقاله Classes and IDs را بخوانید.
کد CSS را کجا بنویسید؟
ما می توانیم این کدها را در داخل هر ویرایشگر کدی بنویسیم ، که پیشنهاد می کنیم ابتدا با آن کار کنید ، ویرایشگرهایی مانند براکت ، متن عالی و دفترچه یادداشت.
برای نوشتن کد CSS و پیوند دادن آن به HTML سه روش وجود دارد:
صفحه سبک خارجی: اتصال خارجی
ورق سبک داخلی: اتصال داخلی
Inline Style: اتصال درون خطی
ورق سبک خارجی
سبک های خارجی فایل های css هستند که توسط برچسب <link> در یک صفحه وب قرار می گیرند و بهترین راه برای تغییر شکل ظاهری وب سایت متشکل از صفحات زیادی هستند.
کد موجود در آن پرونده ها به این شکل است:
ساعت
رنگ: سینا؛
}
پ {
margin-left: 20px؛
}
بدن {
background-image: url ("images / back40.gif")؛
}
درباره این روش ، ما در مورد روش اتصال خارجی در مقاله بیشتر خواهیم آموخت.
ورق سبک داخلی
نحوه نوشتن این سبک ها مانند یک سبک خارجی است ، اما تنها تفاوت در این است که ما به جای تگ <link> از برچسب <style> استفاده می کنیم.
کد زیر مثالی از یک سبک خارجی است.
ما می توانیم بیشتر در مورد این روش در مقاله روش اتصال داخلی بیاموزیم.
سبک درون خطی یا اتصال درون خطی
با استفاده از این روش ، بسیاری از مزایا و ویژگی هایی که دستورات CSS برای آنها ایجاد می کند را از دست می دهید. زیرا برای هر عنصر باید دستورات خاص خود را بنویسید و روشن است که برای تغییر باید به سراغ هر عنصر بروید و آنها را تغییر دهید ، که بسیار وقت گیر و گاهی با خطا همراه خواهد بود.
برای استفاده از این روش ، باید ویژگی style را به عنصر مورد نظر اضافه کنید و سپس خصوصیات و مقادیر را به این ویژگی اضافه کنید. در مثال زیر ، از همین روش برای تغییر رنگ متن پاراگراف استفاده می کنیم:
<p style = "color: yellow؛"> این یک پاراگراف است. </ p>
بیشتر در مورد این روش در مقاله اتصال درون خطی خواهیم خواند.
اثربخشی روشهای اتصال کد CSS را در اولویت قرار دهید
به طور کلی ، هنگام نوشتن کد CSS برای یک عنصر HTML با هر سه روش ، اولویت اجرای آنها به شرح زیر است:
سبک های درون خطی
ورق های سبک داخلی
برگه های سبک خارجی
بنابراین دستورات CSS که به صورت درون خطی و فقط برای یک عنصر خاص نوشته می شوند ، باعث می شوند که دستورات CSS مربوط به آن عنصر با روش پیوند داخلی نوشته شده در برچسب سبک و همچنین دستورات مربوطه در روش پیوند خارجی توسط برچسب پیوند به صفحه پیوست شده فعلی را نادیده بگیرید.
توجه: اگر بعد از دستورات CSS لینک داخلی در برچسب head پیوند به یک فایل CSS خارجی قرار گیرد ، در نهایت دستورات فایل CSS خارجی اعمال می شوند.
اطلاعات بیشتر در مورد اولویت بندی تأثیر را به روش کامل و شیرین تری در مقاله اولویت تأثیر بخوانید
در این جلسه با CSS آشنا شدیم. بفهمید CSS چه کاری انجام می دهد و چه کاری انجام نمی دهد. و چگونه می تواند به ما کمک کند.
ما همچنین با مجموعه ای از ویژگی ها و قوانین اساسی CSS آشنا شدیم که در جلسات آینده به تفصیل به مطالعه آنها خواهیم پرداخت.