روز اول
در روز اول این چالش 10 روزه ابتدا یاد میگیریم css چیست ؟ سپس با ساختار (سینتکس) آن آشنا شده و در آخر فایل css خود را به تگ های html اضافه می کنیم.
CSS چیست ؟
با استفاده از css می توان تگ های موجود در صفحات HTML را شناسایی و به آن ها استایل داد ، در واقع اگر وب سایت خود را ساختمان در نظر بگیرید با استفاده از کد های css می توان این ساختمان را از حالت خام و بی روح به ساختمانی با ظاهری زیبا با شکل و شمایل دلخواه تبدیل کرد.
بررسی ساختار css
به صورت کلی Syntax آن به صورت زیر است :
در تصویر بالا Selector یا انتخابگر عنصر (تگ) HTML را نشان می دهد که می خواهیم استایل دهی کنیم.
Declaration در واقع بلاک کدی است که property و value عنصر انتخاب شده قرار میگرند و به وسیله نقطه ویرگول از هم جدا می شوند.
Property در واقع نوع ویژگی عنصر HTML است ، که در این مثال ما color را مدنظر قرار دادیم.
valueمقداری است که به property اختصاص داده می شود ، که در این مثال ما مقدار blue را مدنظر قرار دادیم.
راه های افزودن css به html
حالت اول External
این روش که متداول ترین روش کار با css است ، با ایجاد یک فایل با پسوند css. شما کد های خود را درون آن قرار داده و به وسیله ی تگ link در قسمت head کد های html خود را وارد برنامه می کنید.
مثال :
کد های درون فایل html
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>کد های درون فایل css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}حالت دوم Internal
Internal یا داخلی ، شما می توانید کد های css خود را در قسمت head و در تگ style وارد کنید .
مثال :
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>حالت سوم Inline
در این روش که به صورت مستقیم روی یک تگ تغییرات اعمال می شود شما می توانید برای مثال روی یک تگ div در کل سند تغییر ایجاد کنید.
مثال :
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
توسعه دهنده وب
شروع آشنایی من با دنیای برنامه نویسی 9 سال پیش بود ، اول مسیر با وردپرس آشنا شدم و بعد از اون شروع به یادگیری زبان جاوا اسکریپت کردم و رفته رفته سعی کردم یک برنامه نویس Front-end بشم که به مبحث گرافیک هم علاقه منده و هر روز تلاش میکنه تا پیشرفت کنه و اگر تجربه ای داره با بقیه به اشتراک بزاره.
- آموزش ساخت صفحه ی وب سایت با استفاده از HTML و css
- ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش اول
- سوالات مصاحبه ای از php و لاراول
- همه ی آنچه باید در مورد Nuxt js بدانیم
- میانبر های مفید ادیتور VSCode
این مقاله چقدر مفید بود ؟
