از اصلی ترین اصول برای یادگیری طراحی سایت آشنایی با Html و css است که در جلسات گذشته به مفهوم html و تگ های آن پرداختیم. اما css چیست و با کمک css چه کارهایی می توان انجام داد؟ به صورت خلاصه، می توان اینگونه بیان کرد که صفحاتی که توسط Html طراحی می کنیم به تنهایی زیبایی خاصی ندارند. از این رو از دستورالعمل های css برای ایجاد زیبایی و رابط کاربری بهتر استفاده می کنیم. با استفاده از css شما قادر خواهید بود تا تمامی موارد را در صفحه خود شخصی سازی کنید و صفحه خود را به بهترین شکل ممکن زیبا کنید. در این آموزش به معرفی HTML Styles – CSS خواهیم پرداخت. بعد از آشنایی با css، اتریبیوت هایی که می توان با آن هماهنگ سازی کرد را معرفی کرده و در انتهای آموزش، یک نمونه تمرین انجام خواهیم داد.
فیلم آموزشی HTML Styles – CSS
برای مشاهده فیلم آموزشی از فیلتر شکن استفاده کنید.
CSS چیست؟
در واقع css از مخفف سه حرف Cascading Style Sheet تشکیل می شود. همانگونه که گفته شد، زبان css یکی از زبان های برنامه نویسی برای طراحی صفحات وب جهت ایجاد جلوه های بصری زیبا است. از ویژگی های منحصربه فرد css می توان به پشتیبانی از سایر زبان های برنامه نویسی مانند plain XML، SVG و XUL اشاره کرد.
با استفاده از css می توانید رنگ، فونت، اندازه متن، فاصله بین عناصر (مارجین و پدینگ)، قرار گیری عناصر در صفحه، ایجاد تصاویر پس زمینه یا رنگ پس زمینه و … را ایجاد کنید.
stylesheet چیست؟
در این آموزش css را به صورت stylesheet استفاده خواهیم کرد. در واقع stylesheet مجموعه ای از کدهای css است که به مرورگر دستور می دهد که چگونه سند html را نمایش دهد.
انواع HTML Styles – CSS
در ادامه به سه نوع محبوب css در html اشاره خواهیم کرد.
css inline
این نوع css را به صورت خطی، درون هر تگ به صورت مجزا یادداشت و اعمال می کنیم. این نوع css نویسی، با اولویت بالا در صفحات html اعمال می شود. به انی منظور که اگر در قسمت external در سند css به صورت جداگانه، دستوری نوشته شود، اولویت اجرا دستورات با css inline خواهد بود.
css internal
نوع بعدی css نویسی internal است. از ویژگی های منحصربه فرد این نوع css نویسی می توان به کوتاه نویسی آن اشاره کرد. به این منظور که شما برای تمامی پاراگراف های خود تنها یکبار دستور css را می نویسید و برای تمامی پارارگراف ها اجرا می شود. css internal را در قسمت head سند html خود یادداشت می کنیم و مشخص می کنیم که این ویژگی ها به کدام تگ ها اعمال شود.
css external
این نوع css نویسی، یکی از محبوب ترین و پر کاربردترین نوع css نویسی برای صفحات وب است. css external را به صورت جداگانه در سندی مخصوص به خود ایجاد کرده و سپس در سند html فراخوانی کرد. از ویژگی های منحصربه فرد css external می توان به عدم شلوغی کدنویسی در سند Html و امکان یکبار نویسی برای تمامی سند ها (شامل درباره ما، تماس با ما، گالری تصاویر و …) اشاره کرد.
نحوه فراخوانی سند css
در ابتدا سند css خود را ایجاد کنید و سپس با اسم styles.css ذخیره کنید. سند html خود را باز کرده و در قسمت head گزینه زیر را وارد کنید. در نظر داشته باشید که فرمت سند css خود را حتما css قرار دهید.
<link rel=”stylesheet” href=”styles.css”>
آموزش ویژگی های HTML Styles – CSS
در ادامه این آموزش به معرفی ویژگی هایی که می توان توسط css ایجاد کرد اشاره می کنیم. در نظر داشته باشید که تمامی ویژگی های زیر را می توان در هر سه حالت css اجرا کرد.
معرفی color
همانگونه که در جلسه قبل توضیح داده شد، برای اعمال رنگ به تگ خود می توانید از ویژگی color استفاده کنید. برای استفاده از رنگ ها می توانید از نام آن ها استفاده کنید یا با استفاده از # کد رنگی RGB را استفاده کنید. هیچ محدودیتی در استفاده از رنگ ها نخواهید داشت.
معرفی background-color
background-color را می توان به تمامی تگ های متنی اعمال کرد. در صورتی که به دنبال تغییر رنگ زمینه نوشته خود هستید، می توانید با استفاده از background-color این عمل را انجام دهید. انتخاب رنگ نیز توسط این ویژگی به دو صورت نام رنگ و یا کد رنگی امکان پذیر است. در فیلم آموزشی این جلسه، حتی رنگ زمینه تمام سند تغییر داده شد.
معرفی font-family
یکی از محبوب ترین ویژگی هایی که توسط CSS می توان ایجاد کرد، تغییر فونت نوشته است. برای تغییر فونت در مرورگر خود، تنها کافیست تا از ویژگی font-family استفاده کنید و سپس فونت مورد نظر خود را انتخاب کنید.
معرفی font-size
در صورتی که از اندازه فونت خود راضی نیستید، می توانید به راحتی اندازه آن را تغییر دهید. اغلب این اندازه را بر اساس پیکسل تغییر می دهند. font-size را می توان به تمامی تگ های حاوی متن اعمال کرد.
معرفی border
از border برای قرار دادن محتوای تگ در داخل یک کادر استفاده می شود. border را می توان در انواع خط نقطه، خط چین، خط صاف و … رسم کرد که تنها کافیست بعد از اعمال border، نوع آن را مشخص کنید. در صورتی که از ضخامت آن راضی نیستید می توانید توسط سایز دهی (برحسب پیکسل) آن را تغییر دهید.
معرفی border-radius
border-radius را برای انحنای پس زمینه یا border یا حتی تصاویر در نظر می گیرند. border-radius نیز همانند border قابلیت اندازه گیری دارد و می توانید انحنای خود را مشخص کنید. از طرفی می توان با مشخص نمودن وجه مورد نظر، تنها یک قسمت را انحنا داد.
معرفی padding
مفهوم padding را می توان به ایجاد فاصله داخلی تشبیه کرد. به عنوان مثال، برای ایجاد فاصله یک متن با border خود، می توانید از padding استفاده کنید. padding نیز قابلیت اندازه گیری دارد و می توانید تمام وجه یا یک وجه را اندازه گذاری کنید.
معرفی margin
margin نیز برای ایجاد فاصله استفاده می شود. تفاوت اصلی margin با padding، ایجاد فاصله از بیرون است. در نظر بگیرید که دو کادر در صفحه html خود ساخته اید. اکنون میخواهید که این دو کادر را از هم فاصله دهید یا به هم نزدیک کنید. تنها کافیست به آن ها margin اعمال کنید تا نسبت به یکدیگر دور یا نزدیک شوند.
سخن پایانی
در آموزش این جلسه به HTML Styles – CSS پرداخته شد. اکنون شما قادر خواهید بود تا از مهم ترین تگ های css استفاده کنید و سند خود را شخصی سازی کنید. در آخر آموزش ویدیویی، یک نمونه تمرین انجام شد که می توانید بر اساس آن، الگوی تمرین خود را مشخص و انجام دهید. در وجود هر گونه ابهام، می توانید سوالات خود را در قسمت نظرات بنویسید.
مشاهده دوره آموزش مقدماتی رایگان html و css
مرجع آموزش w3chools