آموزش html - سبک ها یا css

تعداد بازدید: 606

CSS مخفف Cascading Style Sheets است و معنی آن ورق های سبک آبشار است.ورق های سبک آبشارورق های سبک آبشارورق های سبک آبشارورق های سبک آبشار

CSS باعث صرفه جویی در کار زیادی می شود. این می تواند طرح چندین صفحه وب را همزمان کنترل کند.

CSS چیست؟

Cascading Style Sheets (CSS) برای قالب بندی صفحه وب استفاده می شود.

با استفاده از CSS می توانید رنگ ، قلم ، اندازه متن ، فاصله بین عناصر ، نحوه قرارگیری و چیدمان عناصر ، تصاویر پس زمینه یا رنگ پس زمینه ، نمایش های مختلف برای دستگاه های مختلف و اندازه صفحه و سایر موارد را کنترل کنید. خیلی بیشتر!

نکته: کلمه آبشار به معنای این است که سبکی که برای عنصر والدین اعمال می شود ، برای همه عناصر فرزندان درون والدین نیز اعمال خواهد شد. بنابراین ، اگر رنگ متن را روی "آبی" تنظیم کنید ، تمام عناوین ، پاراگراف ها و سایر عناصر متن درون بدنه نیز به همان رنگ در می آیند (مگر اینکه چیز دیگری را مشخص کنید)!

استفاده از CSS

CSS را می توان به 3 روش به اسناد HTML اضافه کرد:

Inline - با استفاده از مشخصه سبک در داخل عناصر HTML
داخلی - با استفاده از عنصر <style> در بخش <head>
External - با استفاده از عنصر <link> برای پیوند دادن به یک پرونده CSS خارجی

متداول ترین روش برای افزودن CSS ، نگهداری سبک ها در فایل های CSS خارجی است. با این حال ، در این آموزش ما از سبک های داخلی استفاده خواهیم کرد ، زیرا نشان دادن آن راحت تر است ، و خودتان نیز آسان تر می توانید آن را امتحان کنید.

Inline CSS

برای اعمال یک سبک منحصر به فرد به یک عنصر HTML استفاده می شود.

یک CSS خطی از ویژگی سبک عنصر HTML استفاده می کند.

مثال زیر رنگ متن عنصر <h1> را به آبی و رنگ متن عنصر <p> را به قرمز تنظیم می کند:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p> 

CSS داخلی

از CSS داخلی برای تعریف سبک برای یک صفحه HTML استفاده می شود.

CSS داخلی در بخش <head> صفحه HTML در داخل عنصر <style> تعریف می شود.

مثال زیر رنگ متن همه عناصر <h1> (در آن صفحه) را به آبی و رنگ متن همه عناصر <p> را به قرمز تنظیم می کند. علاوه بر این ، صفحه با رنگ زمینه "آبی رنگ پودری" نمایش داده می شود:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

CSS خارجی

برای تعریف سبک بسیاری از صفحات HTML از یک صفحه سبک خارجی استفاده می شود.

برای استفاده از یک css خارجی ، در قسمت <head> هر صفحه HTML پیوندی به آن اضافه کنید:

<!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> 

css خارجی را می توان در هر ویرایشگر متن نوشت. پرونده نباید حاوی کد HTML باشد و باید با پسوند .css ذخیره شود.

در اینجا فایل "styles.css" استفاده شده است:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

لینک دادن به CSS خارجی

به سی اس اس های خارجی می توان با یک URL کامل یا با یک مسیر نسبت به صفحه وب فعلی مراجعه کرد.

<link rel="stylesheet" href="https://.eliagroup.ir/assets/styles.css"> 
<link rel="stylesheet" href="/assets/styles.css"> 
<link rel="stylesheet" href="styles.css"> 

لینک اول با استفاده از url کامل و لینک دوم به پوشه assets و فایل styles.css موجود در آن و لینک سوم به فایل موجود در همان پوشه لینک داده شده است.

مطالب تصادفی

سید خلیل حسینی

کارشناس کامپیوتر، علاقه مند و فعال در حوزه برنامه نویسی و طراحی سایت
برنامه نویس بک اند پی اچ پی و لاراول 
برنامه نویس فرانت اند
پلاگین نویس و طراح صفحات وردپرس

blog-author-image