زبان سی اس اس برای سبک دادن به محتوای سند a href="https://tuskaweb.ir/single/2/show">اچ تی ام ال استفاده خواهد شد. در a href="https://tuskaweb.ir/single/2/show">اچ تی ام ال عناصر ورودی input تعریف شده است و ویژگی هایی توسط طراح وب به تگ های input داده خواهد شد برای انتخاب input با صفت خاصی که دریافت کرده سلکتورها ی سی اس اس به ما کمک خواهد کرد ، سلکتورها و عملکرد اونها در تصویر نمایش داده شده است

برای ایجاد یک وب سایت در شروع اجزای صفحه با زبان a href="https://tuskaweb.ir/single/2/show">اچ تی ام ال ایجاد خواهد شد. این اجزای صفحه هیچ جذابیت ظاهری نخواهد داشت، بعد از اون زبان سی اس اس به کمک خواهد آمد، با کمک سی اس اس سند a href="https://tuskaweb.ir/single/2/show">اچ تی ام ال رنگ و فونت و استایل پیدا خواهد کرد. در زبان سی اس اس با کمک سلکتورها محتوای صفحه انتخاب می شود، حالا ممکنه محتوا input ها یا تگ لینک باشد.

بعد این که تگ یا بخشی از تگ a href="https://tuskaweb.ir/single/2/show">اچ تی ام ال توسط سلکتورهای css انتخاب شد با کمک ویژگی های سی اس اس صفت مورد نظر به تگ انتخاب شده داده خواهد شد.یکی از این ویژگی ها در سی اس اس align-content نام دارد، ویژگی align-content در سی اس اس جهت هم تراز سازی تگ های داخلی یک عنصر نگهدارنده container نسبت به محور عمود در بیش از یک خط کاربرد دارد. جهت اعمال مقادیر ویژگی align-content حتما باید برای تگ container نگهدارنده عناصر صفت display برابر با flex باشد. ویژگی align-content تحت تاثیر ویژگی flex-rap می گیرد و با استفاده از آن می توان تراز عمودی سطرهایی از آیتم های یک فلکس باکس را مشخص کرد.

بعد از انتخاب اجزای سند اچ تی ام ال با کمک سلکتورهای سی اس اس ویژگی های استایل دهی به سلکتور داده خواهد شد،یکی از این ویژگی ها align-items می باشد. ویژگی align-items برای هم تراز سازی تگ های داخلی یک عنصر نگهدارنده container نسبت به محور عمود در یک ردیف کاربرد دارد. تفاوت خاصیت align-items و align-content در تعداد ردیف های هم تراز سازی می باشد، به طوری که align-items برای هم تراز سازی آیتم ها در یک ردیف و align-content هم تراز سازی آیتم ها در چند ردیف نسبت به محور عمود کاربرد دارد. حتما باید ویژگی display برابر flex تعریف شده باشد تا ویژگی align-items تاثیر گذار باشد.

برای ایجاد یک وب سایت ابتدا عناصر صفحه که حاوی محتوا می باشد با زبان نشانه گذاری اچ تی ام ال ایجاد می شود. با کمک سلکتورهای سی اس اس عناصر دلخواه و انتخاب می کنیم و به اونها استایل دلخواه داده خواهد شد. با استفاده از ویژگی align-self در سی اس اس می توان برای هر یک ازآیتم های flex-box به صورت مجزا تراز یا موقعیت قرار گیری مشخص کرد.در زبان سی اس اس ویژگی align-items برای تراز بندی عمودی آیتم ها استفاده خواهدشد، اما تفاوت اون با align-self در این می باشد که align-items بر روی تمام آیتم ها عمل می کند. ویژگی align-self می تواند فقط بر روی یک ویژگی خاص عمل کند، تگ مورد نظر با کمک سلکتورهای سی اس اس انتخاب خواهد شد و ویژگی align-self و با والد فلکس باکس می پذیرد.

بعد اینکه عناصر صفحه با کمک زبان نشانه گذاری اچ تی ام ال ایجاد شد به اونها با کمک سلکتورهای سی اس اس استایل جذاب داده خواهد شد. میتونیم عناصر و به صورت انیمیشن نمایش بدهیم ابتدا بازه ی تغییر و نوع تغییر و در یک keyframe ایجاد کرده و نام دلخواه داده می شود مانند تصویر حتی می توان keyframe ,و با بازه ی در صدی تعریف کرد.

انیمیشن ها در سی اس اس به سند اچ تی ام ال زیبایی خاص و منحصر به فردی می بخشد و به شما کمک می کند کاربرها رو در سایت خود نگه دارید تا زمان بیشتری در سایت سپری کنند. سی اس اس به شما این امکان و می دهد تا بدون درگیر شدن با کدهای جاوااسکریپت در سایت انیمیشن و زیبایی دیداری ایجاد کنید انیمیشن ها می توانند در سایت تعامل ایجاد کند و کاربران و به هیجان آورد و تجربه ی کاربری خوبی به ارمغان بیاورد. keyframe پایه و اساس انیمیشن ها می باشد keyframe مشخص می کند انیمیشن در هر بازه از جدول زمانی انیمیشن چه استایلی داشته و چطور به نظر برسد. پس از تعریف keyframe ویژگی های انیمیشن به سلکتورهای سی اس اس داده خواهد شد ویژگی های انیمیشن در تصویر مشاهده می شود.

در این قسمت با ویژگی background در سی اس اس آشنا خواهیم شد. با استفاده از ویژگی background می توان برای عناصر اچ تی ام ال پس زمینه تعریف کرد. background مقادیری که در شکل مشاهد می کنید خواهد پذیرفت و به صورت پیش فرض عکس پس زمینه مثل کاشی تکرار خواهد شد. برای کنترل تکرار تصویر پس زمینه می توان background-repeat با مقدار no-repeat تعریف کرد.