به طور کلی css برای ایجاد تغیرات ظاهری دلخواه در صفحه html به کار گرفته میشود و تمام تغیرات ابعاد، فونت، رنگ ها متحرک سازی قسمت ها و … توسط کو‌ئری های css صورت می‌گیرند.

از کد های css به سه طریق میتوان در html استفاده نمود:

  • inline یا استفاده مستقیم روی تگ ها
  • internal که از طریق تگ  style که در قسمت head داکیومنت قرار می‌گیرد
  • External در این روش کد های css داخل فایل دیگری هستند و ما از داکیومنت دلخواه به آنها لینک می‌دهیم

روش External در حال حاظر بهترین شیوه برای استفاده از css در html می باشد.

روش inline یا استایل دهی مستقیم به تگ ها در آموزش قبلی به طور کامل مطرح شده برای دیدن آن اینجا کلیک کنید.

در این قسمت به استفاده از css در html به صورت Internal و External خواهیم پرداخت.

internal css (استفاده از تگ style در تگ head)

در این مدل در تگ style به المان ها(تگ های) تغییرات ظاهری دلخواه را می دهیم قطعه کد زیر چگونگی این روش را بهتر شرح خواهد داد:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>یک تیتر</h1>
<p>یک پاراگراف</p>
</body>
</html>

خروجی کد بالا:

css در html

External css (قرار دادن css در یک فایل دیگر)

ابتدا یک صفحه notepad را باز کرده و آنرا با یک نام و پسوند css. ذخیره می‌نماییم و در آن میتوانیم کو‌ئری های css را وارد نماییم و در قسمت head صفحه html خود مطابق قطعه کد زیر به فایل css لینک می‌دهیم.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>یک تیتر</h1>
<p>یک پاراگراف</p>
</body> 
</html>

کد های زیر را در فایل style.css ایجاد شده قرار می‌دهیم.

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

خروجی کد بالا:

css در html

نکاتی که هنگام لینک دهی در مدل اکسترنال باید به آن توجه داشت:

اگر فایل html و css هر دو در یک فولدر قرار داشته باشند با فرض اینکه نام فایل سی اس اس style.css است ادرس لینک به شکل زیر است:

<link rel="stylesheet" href="styles.css">

اگر فایل css درون فولدر دیگری در فولدر اصلی باشد:

<link rel="stylesheet" href="/نام‌فولدر/styles.css">

اگر فایل css درون فولدری در یک وب سایت دیگر قرار داشته باشد:

<link rel="stylesheet" href="http://www.tehrancode.com.com/css/styles.css">

آموزش فونت ها در css

اتریبیوت font-family نوع فونت را مشخص می نماید و اتریبیوت font-size ابعاد فونت را برحسب پیکسل یا درصد مشخص می نماید.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

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

خروجی کد بالا:

فونت ها در html

ایجاد کادر

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

خروجی کد بالا:

کادر درhtml

اتریبیوت های padding و margin برای ایجاد فاصله

padding برای ایجاد فاصله بین متن و کادر به کار رفته و margin برای ایجاد فاصله با کادر اصلی صفحه html در قطعه کد زیر و خروجی آن تفاوت بین margin و padding را به شکل کامل می توان دریافت.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid powderblue;
    margin: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

مارجین در html

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid powderblue;
    padding: 30px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

خروجی کد بالا:

padding در html

ایجاد کلاس و id در css

تا کنون برای استایل دهی در مدل اینترنال و اکسترنال نام یک تگ را فراخوانی کردیم و استایل مورد نظر را به آن بخشیدیم، مشکلی که در این روش وجود دارد این است که منجر می گردد تمامی المان های مورد نظر آن خصیصه را به خود بگیرند به طور مثال ما میخواهیم از ۵ پاراگراف در صفحه یکی را آبی رنگ و بقییه را مشکی کنیم در این حالت با آموزه ی قبلی ممکن نیست و برای این کار ما id ها و class های لازم را ایجاد کرده و به هر تگ یا المانی به صورت زیر style لازم را می‌بخشیم:

id توسط یک علامت # در تگ style ایجاد شده و یک نام به دلخواه برای آن در نظر گرفته  و در المان مورد نظر آنرا فرا می‌خوانیم:

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
    color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>

خروجی کد بالا:

ایجاد id در css

برای ایجاد کلاس  یک نقطه (.) گذاشته و نام کلاس را بدون فاصله می‌نویسیم توجه کنید هنگام فراخوانی نقطه یا دات را نگذارید برای درک بهتر قطعه کد زیر و خروجی آنرا مشاهده فرمایید:

<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
    color: red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="class1">I am different.</p>
<p>This is a paragraph.</p>
<p class="class1">I am different too.</p>
</body>
</html>

خروجی کد بالا:

id در html

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *