افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی
نمونه کارها
CSS داخلی در طراحی سایت
نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود
استفاده از CSS داخلی
در این مقاله به ادامه توضیحات در مورد CSS و استفاده از آن در طراحی سایت همراه شما هستیم.
<style>
این المان درون عنصر <head> قرار می گیرد. شما می توانید قوانین CSS را درون این المان و در یک صفحه HTML قرار دهید.
عنصر <style> باید از ویژگی type استفاده کند تا نشان دهد که سبک ها در CSS مشخص شده اند. ارزش باید text/css باشد.
هنگام طراحی سایتی با بیش از یک صفحه، شما باید از فایل CSS خارجی استفاده کنید. به دلایل زیر:
- به همه صفحات اجازه می دهد که از قوانین یکسان استفاده کنند (به جای اینکه آنها را در هر صفحه تکرار کنید).
- محتوا را جدا از اینکه صفحه چطور به نظر می رسد، نگه دارید.
- شما می توانید سبک های مورد استفاده در تمام صفحات را با تغییر تنها یک فایل (به جای هر صفحه بصورت جداگانه) تغییر دهید.
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);
}
h1 {
color: rgb(255,255,255);
}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato varieties. They are usually described as early, second early and maincrop. </p>
</body>
</html>
در HTML 4، شما همچنین می توانید ویژگی style را در بسیاری از عناصر که در قسمت body یک صفحه ظاهر می شود، استفاده کنید.
قواعد CSS که درون این ویژگی ظاهر می شوند، فقط به آن عنصر اعمال می شوند.
شما نباید از این ویژگی در طراحی وب سایت های جدید استفاده کنید، اما در اینجا آن را ذکر می کنیم زیرا ممکن است در کدهای قدیمی تر که آن را استفاده کرده اند، مشاهده نمائید.
در اینجا یک مثال است که رنگ متن را در یک پاراگراف به قرمز تغییر می دهد:
<p style="color:red;">
انتخابگرهای CSS
انواع مختلفی از انتخابگرهای CSS وجود دارد که به شما اجازه می دهند قوانین را به عناصر خاصی در یک سند HTML هدایت کنید.
در ادامه، انتخابگرهای معمول و رایج CSS را توضیح می دهیم.
همچنین فایل HTML زیر برای نشان دادن المان هایی که با سلکتورها، انتخاب می شوند، را قرار دادیم.
انتخابگرهای CSS حساس به بزرگی یا کوچکی حروف هستند، بنابراین آنها باید دقیقا با نام عناصر و مقادیر ویژگی ها منطبق باشند.
<!DOCTYPE html> <html> <head> <title>CSS Selectors</title> </head> <body> <h1 id="top">Kitchen Garden Calendar</h1> <p id="introduction">Here you can read our handy guide about what to do when. </p> <h2>Spring</h2> <ul> <li><a href="mulch.html"> Spring mulch vegetable beds</a></li> <li><a href="potato.html"> Plant out early potatoes</a></li> <li><a href="tomato.html"> Sow tomato seeds</a></li> <li><a href="beet.html"> Sow beet seeds</a></li> <li><a href="zucchini.html"> Sow zucchini seeds</a></li> <li><a href="rhubarb.html"> Deadhead rhubarb flowers</a></li> </ul> <p class="note"> This page was written by <a href="mailto:ivy@example.org">ivy@example.org</a> for <a href="http://www.example.org">Example</a>. </p> <p> <a href="#top">Top of page</a> </p> </body> </html>
انواع سلکتورها
- سلکتور عمومی: روی تمام عناصر موجود در فایل اعمال می شود.
*{}
هدف این سلکتور تمام المان های روی صفحه می باشد.
- سلکتور نوع: با نام المان منطق است.
h1, h2, h3 {}
هدف آن در اینجا تمام المان های <h1>، <h2> و <h3> موجود در فایل است.
- سلکتور class: منطبق با المان هایی می شود که از ویژگی class استفاده کرده و مقدار خاصی به آن داده اند. و در css با نقطه (.) نشان داده می شود.
.note {}
هدف این کد، تمام المان هایی است که دارای ویژگی class با مقدار note می باشند.
p.note {}
هدف این کد، تنها المان های <p> می باشد که دارای ویژگی class با مقدار note می باشند.
- سلکتور id: یک عنصر را نشان می دهد که ویژگی id دارای مقدار است که با نماد هشتک (#) در css مشخص می شود.
#introduction {}
در اینجا هدف عنصری است که ویژگی id با مقدار introduction را دارد.
- سلکتور فرزند: یک عنصر را که فرزند مستقیم دیگری است، مطابقت می دهد.
li>a {}
هدف این کد، المان های <a> می باشد که به طور مستقیم و بی واسطه فرزند المان <li> باشند. به این معنی که المان های دیگر <a> در هر کجای صفحه انتخاب نمی شوند.
- سلکتور نسل: عنصری که از نسل المان خاصی باشد انتخاب می شود و مستقیم بودن آن مهم نیست. یعنی می تواند با واسطه باشد.
p a {}
هدف هر عنصر <a> که در عنصر <p> قرار دارد، می باشد. حتی اگر عناصر دیگری بین آنها وجود داشته باشد.
- سلکتور مجاور: المانی که در مجاورت عنصری خاص وجود دارد را انتخاب می کند.
h1+p {}
هدف اولین المان <p> است که بلافاصله بعد از المان <h1> قرار دارد. (دیگر المان های <p> را انتخاب نمی کند)
آبشاری بودن قوانین CSS
اگر دو یا چند قاعده به یک عنصر اعمال شود، مهم است که بدانید که اولویت با کدام قانون است.
آخرین قانون
اگر دو انتخابگر یکسان باشند، اولویت با دومین انتخابگر است. در مثال زیر مشاهده می کنید که سلکتور دوم i به این المان اعمال می شود.
اختصاصی
اگر یک انتخابگر خاص تر از دیگران باشد، قاعده خاص خاص تر از موارد کلی تر خواهد بود. در این مثال:
- h1 اختصاصی تر از * می باشد.
- p b اختصاصی تر از p است.
- p#intro اختصاصی تر از p می باشد.
important
شما می توانید پس از هر مقدار عبارت !important را اضافه کنید. این نشان می دهد که باید بیشتر از سایر قوانین مربوط به همان عنصر، مورد توجه قرار گیرد.
درک موارد بیان شده، در طراحی سایت و ساخت سایت ، بسیار مهم است. زیرا شما باید بدانید که چه قانونی به المان های صفحه اعمال می شود.
کد HTML:
<h1>Potatoes</h1> <p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties. </p> <p>They are usually described as early, second early and maincrop potatoes. </p>
کد CSS:
* {
font-family: Arial, Verdana, sans-serif;
}
h1 {
font-family: "Courier New", monospace;
}
i {
color: green;
}
i {
color: red;
}
b {
color: pink;
}
p b {
color: blue !important;
}
p b {
color: violet;
}
p#intro {
font-size: 100%;
}
p {
font-size: 75%;
}
مبحث آموزش CSS ادامه دارد.
درگ کنید
مشاهده
بستن
پخش
0%