استفاده از CSS (CSS)
CSS یعنی «Cascading Style Sheets». یعنی برگه های سبک آبشاری. با آن ظاهر صفحه را سریع و یکجا کنترل می کنیم. مثل یونیفرم مدرسه برای همه کلاس ها.
CSS چیست؟
CSS چیدمان (Layout) و استایل را می سازد. رنگ، فونت، اندازه، فاصله و نمایش در موبایل یا دسکتاپ را تنظیم می کند.
نکته: «آبشاری» یعنی استایلِ والد به فرزند هم می رسد؛ مگر خلافش را بنویسی.
روش های استفاده از CSS
سه راه داریم: درون خطی (Inline)، داخلی (Internal)، بیرونی (External).
درون خطی (Inline)
درون خطی فقط همان عنصر را استایل می دهد. با ویژگی style بنویس.
<h1 style="color: blue;\n">A Blue Heading</h1>
<p style="color: red;\n">A red paragraph.</p>
داخلی (Internal)
استایل داخلی در <style> داخل <head> است. برای همان صفحه است.
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: powderblue; }\n
h1 { color: blue; }\n
p { color: red; }\n
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
بیرونی (External)
پرکاربردترین روش است. یک فایل css می سازیم و با <link> وصل می کنیم.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
/* styles.css */\n
body { background-color: powderblue; }\n
h1 { color: blue; }\n
p { color: red; }\n
رنگ ها، فونت و اندازه
ویژگی های color، font-family و font-size بسیار رایج هستند.
<style>
h1 { color: blue; \n font-family: verdana; \n font-size: 300%; \n}
p { color: red; \n font-family: courier; \n font-size: 160%; \n}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
بردر، پدینگ و مارجین
border دور عنصر است. padding فاصله داخل بردر است. margin فاصله بیرونی است.
<style>
p { border: 2px solid powderblue; \n padding: 30px; \n margin: 50px; \n}
</style>
<p>Box model demo</p>
پیوند به CSS بیرونی
می توانی با URL کامل یا مسیر نسبی لینک بدهی.
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<link rel="stylesheet" href="/html/styles.css">
<link rel="stylesheet" href="styles.css">
گام های عملی سریع
- یک فایل styles.css بساز.
- قوانین لازم را بنویس.
- با <link> در <head> متصل کن.
نکته: برای مسیر فایل ها صفحه مسیر فایل ها را ببین. همچنین در آموزش CSS ادامه بده.
جمع بندی سریع
- درون خطی سریع است اما پراکنده.
- داخلی برای یک صفحه مناسب است.
- بیرونی بهترین نگه داری را می دهد.
- Box model را همیشه در نظر بگیر.