خواندن ۲ دقیقه·۵ سال پیش

3 - استفاده از css در html

زبان html به تنهایی اصلا اصلا کافی نیست. وجود زبان css هست که به یک صفحه وب رنگ و روح می دهد. برای اینکه بتونید از کدهای css در یک صفحه وب استفاده کنید به سه صورت می تونید کدهای css تون رو وارد کنید:

1- استایل درونی ( inline Style )
2 - استایل داخلی ( enternal Style )
3 - استایل خارجی ( external Style )

1- استایل درونی ( inline Style ) چیست:

از این استایل دیگه وقتی دیگه خیلی مجبور شدید استفاده کنید. نمونه کد این استایل:

<tag style=&quotstyle-name:value&quot> ... </tag>

استفاده از این استایل برای سئو هم خوب نیست.
اگر مجبور به استفاده شدید دقیقا ساختار بصورت بالا باشد.

معایب: سئو بد و سخت شدن کار برای توسعه آن

2 - استایل داخلی ( internal style )

برای استایل دادن کدهای html تون این روش هم برای سئو و کلا بهینه بودن مناسب نیست.

معایب: سئو بد و سخت شدن کار برای توسعه آن

اگر مجبور به استفاده از استایل داخلی ( internal style ) شدید از این ساختار کد نویسی استفاده کنید

<!DOCTYPE html> 
<html>
 <head> 
<style> 
... </style>
 </head> 
<body>
 </body>
 </html>

استایل خارجی ( external Style )

مزایا: در نظر گرفتن سئو + توسعه پذیر بودن + تمیز شدن کدهای صفحه وب + سرعت بیشتر در کدنویسی

روش هم کاملا مشخص و شبیه اکثر وبسایت هاست:

یک سند html و یک سند css درست می کنیم و به وسیله تگ <link> این دو سند را به هم وصل می کنیم.

این تگ رو باید داخل تگ head باشد.

مثال:

<!DOCTYPE html>
 <html>
 <head> 
<link href=&quotstyle.css&quot rel=&quotstylesheet&quot> 
</head>
 <body>
  </body>
   </html>

سوال : در استایل دهی خارجی چجوری باید به عناصر استایل دلخواه بدیم؟

روش کاملا ساده است. باید اسم تگ مد نظر رو بگید و استایل ها رو بدهید مثال

p {
color: red;
}
#ensan, .virgool{
height:36px;
background: #f2f2f2;
}

توضیح1: گفتیم که تگ های p رنگ اش قرمز بشه.
توضیح 2: بعد از بردن نام سلکتور باید } باز کنیم.
توضیح 3: اگر می خواهیم نام یک کلاس دلخواه رو ببریم باید قبل اون کلاس . بزاریم.
توضیح4: اگر می خواهیم به یک آی دی استایل دهیم قبلش باید # بزاریم.
توضیح5: با استفاده از , می تونید به چندین عنصر استایل یکسان بدید. مثلا می خواهید همه تگ های h1 و p رنگ شون زرد بشه نمی خواد دوباره کاری کنید.

https://kamyabiha.com/style-of-css/

csshtmlتگکدبرنامه نویسی

parsrtl

عاشق محتوا و کد خوش حال می شوم اگر پروفایل من را ببینید https://stackoverflow.com/users/13114202/ali-jasemi

شاید از این پست‌ها خوشتان بیاید