Cascading Style Sheet (CSS) سیستمی برای کدگذاری وب سایت است که به طراحان اجازه می دهد چندین ویژگی را همزمان با اختصاص عناصر خاصی به گروه ها دستکاری کنند. به عنوان مثال ، با استفاده از یک کد برای پس زمینه وب سایت ، طراحان می توانند رنگ یا تصویر پس زمینه را در تمام صفحات وب سایت با یک تغییر در فایل CSS تغییر دهند. در اینجا نحوه ایجاد CSS برای یک وب سایت اصلی وجود دارد.
مراحل
قسمت 1 از 4: نوشتن CSS درون خطی
مرحله 1. مطمئن شوید که از تگ های HTML درک اولیه دارید
شما باید نحوه عملکرد برچسب ها و از آنها را بدانید
src
و
href
ویژگی های.
مرحله 2. برخی از ویژگی های اساسی CSS را بیاموزید
خواهید دید که خواص بسیار زیادی وجود دارد. با این حال ، نیازی به یادگیری همه آنها نیست.
-
برخی از خواص اولیه خوب CSS که باید بدانید عبارتند از:
رنگ
و
font-family
- .
مرحله 3. با مقادیر مربوط به هر ویژگی مربوطه آشنا شوید
همه ویژگی ها به مقدار نیاز دارند. برای
رنگ
به عنوان مثال ، ممکن است ویژگی را قرار دهید
قرمز
ارزش.
مرحله 4. در مورد
سبک
ویژگی HTML.
از آن در عنصری مانند استفاده می شود
href
یا
src
به برای استفاده از آن ، در علامت های نقل قول پس از علامت مساوی ، ویژگی CSS ، یک کولون و سپس مقدار ویژگی را قرار دهید. این به عنوان یک قانون CSS شناخته می شود.
مرحله 5. درک کنید که CSS درون خطی معمولاً برای وب سایت ها توسط توسعه دهندگان وب حرفه ای استفاده نمی شود
CSS درون خطی می تواند شلوغی غیر ضروری را به یک سند HTML اضافه کند. با این حال ، این یک راه عالی برای آشنا شدن با نحوه کار CSS است.
قسمت 2 از 4: نوشتن CSS اساسی
مرحله 1. برنامه مورد نظر خود را اجرا کنید
این باید به شما امکان ایجاد فایل های HTML و CSS را بدهد.
اگر برنامه خاصی نصب ندارید ، می توانید از Notepad یا ویرایشگر متن دیگری استفاده کنید. به سادگی فایل خود را هم به عنوان یک فایل متنی و هم یک فایل CSS ذخیره کنید
مرحله 2. فایل HTML وب سایت خود را باز کنید
اگر ویرایشگر HTML را نصب کرده اید ، باید آن را نیز باز کنید.
ویرایشگرهای HTML به شما امکان می دهند HTML و CSS را به طور همزمان ویرایش کنید
مرحله 3. یک برچسب در سر HTML خود ایجاد کنید
با این کار می توانید CSS را بدون نیاز به فایل جداگانه بنویسید.
مرحله 4. عنصری را انتخاب کنید که می خواهید یک ظاهر طراحی شده به آن اضافه کنید و نام عنصر و سپس مجموعه ای از مهاربندهای فر ({}) را تایپ کنید
برای اینکه کد خود را بیشتر خوانا کنید ، همیشه دومین مهاربند را روی خط خود قرار دهید.
مرحله 5. بین براکت ها ، قوانین CSS خود را همانطور که از آن استفاده می کنید تایپ کنید
سبک
صفت.
هر خط باید با یک نقطه ویرگول (؛) خاتمه یابد. برای خوانایی کد شما ، هر قانون باید از خط خود شروع شود و هر خط باید تورفتگی داشته باشد.
توجه به این نکته بسیار مهم است که این حالت دهی بر همه عناصر نوع انتخاب شده در صفحه تأثیر می گذارد. در بخش بعدی به طراحی خاص تری پرداخته می شود
قسمت 3 از 4: CSS پیشرفته تر
مرحله 1. یک فایل CSS ایجاد کنید ، نه یک فایل HTML و آن را با استفاده از
.css
افزونه.
فایل HTML خود را نیز باز کنید.
مرحله 2. یک برچسب در سر HTML خود ایجاد کنید
این به شما امکان می دهد یک فایل CSS جداگانه را به سند HTML خود پیوند دهید. برچسب پیوند شما به سه ویژگی نیاز دارد:
rel
نوع
، و
href
-
rel
به معنی "رابطه" است و به مرورگر می گوید که رابطه با سند HTML چیست. در اینجا باید مقدار آن باشد
"برگه سبک"
- .
-
نوع
می گوید که به چه نوع رسانه ای پیوند داده شده است. در اینجا باید مقدار آن باشد
"text/css"
-
href
- اینجا مشابه نحوه استفاده از آن در یک عنصر استفاده می شود ، اما در اینجا باید به یک فایل CSS پیوند داده شود. اگر فایل CSS در همان پوشه فایل HTML قرار دارد ، فقط نام فایل باید در داخل گیومه نوشته شود.
مرحله 3. عناصری از انواع مختلف را انتخاب کنید که می خواهید ظاهر یکسانی به آنها اضافه کنید
یک اضافه کنید
کلاس
به این عناصر نسبت دهید و آنها را برابر با نام کلاس مورد نظر خود قرار دهید. این به عناصر شما یک ظاهر یکسان می بخشد.
مرحله 4. تعیین کنید که یک کلاس چگونه یک ظاهر طراحی می کند
نام کلاس را در فایل CSS خود با یک دوره (.) قبل از آن تایپ کنید (به عنوان مثال
.کلاس
).
مرحله 5. عناصر منفردی را انتخاب کنید که می خواهید حالت خاصی به آنها اضافه کنید و یک عنصر اضافه کنید
شناسه
صفت.
شناسه ها در CSS با استفاده از نماد پوند (#) و نه یک نقطه ایجاد می شوند.
شناسه ها بیشتر از کلاس ها هستند ، بنابراین اگر یک ویژگی با ارزش متفاوت از کلاس داشته باشد ، یک استایل کلاس را نادیده می گیرد
قسمت 4 از 4: بیشتر بیاموزید
مرحله 1. از مدارس w3 دیدن کنید
این وب سایت رسمی با هدف آموزش مهارت های توسعه وب است. w3 دارای منابع زیادی برای HTML و CSS و سایر زبانهای وب ذکر شده است.
مرحله 2. سایتهای دیگری را پیدا کنید که به طور خاص با هدف یادگیری و آموزش HTML و CSS طراحی شده اند
سایت هایی مانند CSS tricks.com به طور خاص با هدف آموزش مهارت های CSS و طراحی وب طراحی شده اند. یافتن منابع معتبر به شما در سفر یادگیری کمک می کند.
مرحله 3. با طراحان و توسعه دهندگان وب تماس بگیرید
تجربه و دانش آنها می تواند دانش و مهارت های ارزشمندی را به شما بیاموزد.
مرحله 4. کد منبع وب سایت هایی که با آنها برخورد می کنید را مشاهده کنید
مشاهده CSS وب سایت های توسعه یافته می تواند راه هایی را برای طراحی بخش هایی از وب سایت ها به شما نشان دهد. کپی کردن آن به عنوان تمرین و اشتباه با کد می تواند به شما در یادگیری نحوه استفاده از ویژگی های مختلف CSS کمک کند.
