ساخت منو افقی و عمودی بوسیله HTML

در این مقاله از آموزش طراحی سایت می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.

قدم اول : کد HTML را اضافه کنید. مثال :

< div class="icon-bar">

< a class="active" href="#">< i class="fa fa-home">< /i>< /a>

< a href="#">< i class="fa fa-search">< /i>< /a>

< a href="#">< i class="fa fa-envelope">< /i>< /a>

< a href="#">< i class="fa fa-globe">< /i>< /a>

< a href="#">< i class="fa fa-trash">< /i>< /a>

< /div>

قدم دوم :  کد CSS را برای ساخت منو افقی اضافه کنید. مثال :

.icon-bar {

  width: 100%; /* Full-width */

  background-color: #555; /* Dark-grey background */

  overflow: auto; /* Overflow due to float */

}

.icon-bar a {

  float: left; /* Float links side by side */

  text-align: center; /* Center-align text */

  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */

  padding: 12px 0; /* Some top and bottom padding */

  transition: all 0.3s ease; /* Add transition for hover effects */

  color: white; /* White text color */

  font-size: 36px; /* Increased font size */

}

.icon-bar a:hover {

  background-color: #000; /* Add a hover color */

}

.active {

  background-color: #4CAF50; /* Add an active/current color */

}

​

مثال (ایجاد منوی عمودی) : کد CSS را برای ساخت منو عمودی اضافه کنید.

.icon-bar {

width: 90px; /* Set a specific width */

background-color: #555; /* Dark-grey background */

}

.icon-bar a {

display: block; /* Make the links appear below each other instead of side-by-side */

text-align: center; /* Center-align text */

padding: 16px; /* Add some padding */

transition: all 0.3s ease; /* Add transition for hover effects */

color: white; /* White text color */

font-size: 36px; /* Increased font-size */

}

.icon-bar a:hover {

background-color: #000; /* Add a hover color */

}

.active {

background-color: #4CAF50; /* Add an active/current color */

}

​

​

آموزش طراحی سایت-رنگ و گرادینت در CSS3

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

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

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

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

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-آموزش CSS

آموزش طراحی سایت

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل سر برگ در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

آموزش Cascading style sheet ‏ ‏

استایل شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

<p><font color="green" size="5">Hello, World!</font></p>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

<p style="color:green;font-size:24px;">Hello, World!</p>

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.

استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.

استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.

.red{

   color: red;

}

.thick{

   font-size:20px;

}

.green{

   color:green;

}

در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت. اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.

!DOCTYPE html>

< html>

< head>

< title>HTML External CSS< /title>

<link rel="stylesheet" type="text/css" href="/html/style.css">

< /head>

< body>

< p class="red">This is red< /p>

< p class="thick">This is thick< /p>

< p class="green">This is green< /p>

< p class="thick green">This is thick and green< /p>

< /body>

< /html>

این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red

This is thick

This is green

This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.

مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

<style type="text/css">

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is </p>

آموزش طراحی سایت ادامه دارد

آموزش CSS

آموزش CSS

آموزش CSS

سلام در این دوره سعی می کنم CSS را آموزش دهم با بخش اول این آموزش همراه باشید.

سی اس اس CSS چیست

در این جا، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت. برای یادگیری CSS، شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

آموزش طراحی سایت

سی اس اس CSS مخفف Cascading Style Sheets است .
style ها چگونگی نمایش عناصر HTML را تعریف می کنند .
Style ها برای حل یک مشکل به HTML 4.0 اضافه شدند .
External Style Sheets می تواند در در انجام کار صرفه جویی کند .
External Style Sheets در فایل های CSS ذخیره می شوند .

نمایش CSS

سند HTML را می توان با style های مختلف نمایش داد. .
Style ها مشکل بزرگی را حل کردند .
span style="line-height: 18pt;" mce_style="line-height: 18pt;" dir="ltr"> HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.
HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.
وقتی tag ها و attribute های رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وب سایت های بزرگ، که فونت ها و اطلاعات رنگ در هر صفحه مجزا بودند، فرآیندی طولانی و پرهزینه ای شد.

برای حل این مشکل، کنسرسیوم World Wide Web ، تصمیم گرفت CSS را ایجاد کند.
در HTML 4.0 ، می توان کل قالب بندی را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.
امروزه، همه مرورگرها CSS را ساپورت می کنند.
CSS ، در انجام مقدار زیادی کار صرفه جویی می کند
CSS ، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.
معمولاً Style ها در فایلهای . css ذخیره می شوند. style sheet های خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.

آموزش طراحی سایت

مثال

فایل HTML زیر، لینکی به یک style sheet خارجی با تگ است:

< head >

< title >< /title >

< link href="ex1.css" mce_href="/Administrator/ex1.css" type="text/css" rel="stylesheet" / >

< /head>

این، فایل style sheet است:

< style>

body {

background-color: yellow;

}

h1 {

font-size: 36pt;

}

< /style>

آموزش سینتکس CSS

دستور نحوی CSS

یک rule set (یک حکم یا دستور است که نحوه ی پردازش المان ها را روی یک صفحه ی HTML برای مرورگر مورد نظر تعریف می کند) همان طور که در تصویر زیر مشاهده می کنید متشکل است از یک selector (انتخاب گر) و declaration block (بلوک یا ساختمان اعلان) است .

آموزش سینتکس CSS

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

یک declaration block دربردارنده ی یک یا چند تعریف (declaration) است که توسط نقطه ویرگول (semicolon) از هم جدا می شوند .

هر تعریف نیز خود شامل یک اسم خصوصیت (property name) و همچنین یک مقدار (value) است که توسط یک دو نقطه (colon) از هم جدا سازی می شوند .

مثال:

همیشه یک تعریف CSS به نقطه ویرگول ختم می شود، گروه های تعریفی (declaration group) نیز داخل کاراکترهای {} محصور می شوند

p {color:red;text-align:center;}

به منظور افزایش قابلیت خوانایی CSS، شما می توانید هر بخش یک تعریف را روی خط مجزا قرار دهید . مثال :

p {

color: red;

text-align: center;

}

آموزش طراحی سایت

توضیحات یا comment ها در CSS

کامنت comment به منظور ارائه ی توضیح درباره ی کد مورد نظر استفاده می شود ، در صورت لزوم همچنین به شما کمک می کند متن برنامه (source code) را در آینده اصلاح کنید . توضیحات (comments) کاملا توسط مرورگرها نادیده گرفته می شوند .

یک توضیح CSS با علامت /* آغاز گردیده و با کاراکتر */ پایان می یابد . توضیحات نیز ممکن است چندین خط را به خود تخصیص دهد.

مثال:

p {

color: red;

/* This is a single-line comment */

text-align: center;

}

/* This is

a multi-line

comment */

آموزش Selectorهای id و class

انتخاب گرهای CSS

انتخاب گرهای CSS به شما این امکان را می دهد که المان های html را انتخاب کرده و متناسب با نیاز خود آن ها را تنظیم و دستکاری (manipulate) کنید .

با استفاده از انتخاب گرهای CSS می توان المان های دلخواه و مورد نظر HTML را بر اساس شناسه (ID)، کلاس، نوع (type)، خصیصه (attribute) پیدا ( و یا انتخاب و گزینش) کرد .

انتخاب گر المان (the element selector)

انتخاب گر عنصر در واقع المان ها را بر اساس اسم المان مربوطه انتخاب می کند . می توانید کلیه ی المان های p را روی صفحه درست بدین ترتیب انتخاب کنید : (کلیه ی عناصر p وسط چین (align- center) شده و متن آن با رنگ قرمز نشان داده می شود) .

نمونه یک :

<style>

p {

text-align: center;

color: red;

}

</style>

انتخاب گر شناسه (id selector)

سلکتور id selector از خصیصه ی شناسه (id attribute) HTML برای انتخاب یک المان معین بهره می گیرد .

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

جهت انتخاب یک المان با شناسه ی ویژه (مشخص)، باید یک کاراکتر hash (#( را تایپ کرده و بدنبال این کاراکتر شناسه ی المان را قرار دهید .

قانون سبک دهی (style rule) زیر با شناسه ی "para1" به المان HTML اضافه می شوند :

نمونه دو :

#para1 {

text-align: center;

color: green;

}

انتخاب گر کلاس (class selector)

انتخاب گر کلاس المان ها را با یک خصیصه ی کلاس / class attribute ویژه آغاز می کند .

به منظور انتخاب المان ها با کلاسی معین، یک کاراکتر نقطه و به دنبال آن اسم کلاس را تایپ کنید :

در مثال زیر، کلیه ی عناصر HTMLبا کلاس "center"، وسط چین (align- center) خواهند بود :

نمونه سه

.center {

text-align: center;

color: red;

}

همچنین می توان مشخص کرد که تنها عناصر خاصی از HTML دست خوش تغییر یک کلاس معین قرار گیرند (به عبارتی دیگر می توانید تعیین کنید که فقط المان های مدنظر شما توسط یک کلاس کنترل شده و تحت تاثیر آن قرار گیرند) :

در مثالی که زیر ارائه شده، تمامی المان های p با کلاس "center" وسط چین (center -align) می شوند.

نمونه چهار

p.center {

text-align: center;

color: red;

}

ادغام گروه ها / گروه بندی انتخاب گرها (grouping selectors)

چنانچه المان هایی با تعاریف سبک (style definition) مشابه به مثال ذیل دارید، در آن صورت می توانید با گروه بندی کدها آنها را سامان دهی کرده و در عین حال اندازه ی کدهای ذکر شده را به حداقل برساند.

نمونه پنج

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

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

نمونه ی زیر در حقیقت همان تکه کد فوق است که در آن سه گروه مزبور با هم در یک گروه ادغام شده اند و هر گروه با بهره گیری از ویرگول از گروه دیگر متمایز شده است :

نمونه شش

h1,h2,p{

text-align: center;

color: red;

}

آموزش طراحی سایت

آموزش Style Sheet ها

Style Sheet خارجی (external)

استایل Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ link به style sheet لینک شود. تگ link، درون بخش head قرار می گیرد.

< head>

< link rel="stylesheet" type="text/css" href="mystyle.css" />

< /head>

استایل Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است.

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

فضاهای بین مقدار صفت و واحدها را خالی نگذارید!

استایل Style Sheet داخلی (internal)

استایل Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. Style های داخلی با استفاده از تگstyle در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:

نمونه یک

<p><style><br>

hr {<br>

color: sienna;<br>

}</p>

<p> p {<br>

margin-left: 20px;<br>

}</p>

<p> body {<br>

background-image: url("images/back40.gif");<br>

}<br>

</style></p>

استایل Style های Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

نمونه دو

<p style="color:sienna;margin-left:20px">This is a paragraph</p>

استایل Style Sheetهای چندگانه

اگر بعضی از صفت ها برای یک selector در style sheet های مختلف تعیین شده باشد، valueها از style sheet معینی به ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای صفت های زیر برای سلکتور h3 است:

h3

‎{

color:red;

text-align:left;

font-size:8pt;

‎}

و یک style sheet داخلی دارای صفت های زیر برای سلکتور h3 است:

h3

‎{

text-align:right;

font-size:20pt;

‎}

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، صفت های h3 اینگونه خواهد بود:

color:red;

text-align:right;

font-size:20pt;

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

استایل Style های چندگانه به یک استایل cascade می شوند .

استایل Style ها را می توان به طریق زیر معین کرد:

• درون یک عنصر HTML
• درون بخش head صفحه HTML
• در یک فایل CSS خارجی

نکته:

حتی style sheet های خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن:

• هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟
• معمولاً می توان گفت که همه style ها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

پبش فرض مرورگر

استایل style sheet خارجی

استایل style sheet داخلی (در بخش head)

• استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد.

نکته:

اگر لینک به style sheet خارجی بعد از style sheet داخلی درheadHTML داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند

با آموزش css بخش دوم همراه ما باشید