وب از نگاه سوم

احتمالا تعداد زیادی از شما با Css ها و نقش مهمی که در طراحی وب بر عهده دارند ، آشنا هستید. با کمک Css می توانید محتوایات html صفحات خود را به شکل های مختلفی نشان دهید. یادگیری Css برای طراحان وب مسئله ای بسیار مهم است.

همانند دیگر مهارت ها ، داشتن مهارت در Css نیز می تواند از سطوح ابتدایی شروع شود و تا سطوح پیشرفته و حرفه ای ادامه پیدا کند.

در این نوشته می خواهم درمورد تکنیکی صحبت کنم که طراحان حرفه ای به مراتب بیشتر از آن استفاده می کنند و از آن بهره می برند.

سودو المنت ها در Css جهت اضافه کردن قابلیت های خاصی به عناصر صفحه استفاده می شوند. با کمک این قابلیت ها می توانید در محتوای صفحات به صورت غیر مستقیم تغییر ایجاد کنید.

سینتکس و یا نحوه کارکرد سودو المنت ها به شکل زیر است:

selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}

اولین عنصر سودو first-line است. این عنصر برای اضافه کردن یک ویژگی خاص به خط اول عناصر انتخاب شده ، به کار می رود. به مثال زیر توجه کنید:

p:first-line {color:#0000ff;font-variant:small-caps}
Some text that ends up on two or more lines

نحوه نمایش این مثال در مرورگر می تواند چیزی شبیه این باشد:

Some text that ends

up on two or more lines

در این مثال خط اول متنی که در عنصر <p> قرار دارد به شکلی دیگر نمایش داده می شود. توجه کنید که اگر عرض عنصر مورد نظر شما تعیین نشده باشد ، خط اول زمانی شناخته می شود که خود مرورگر آن را بشکند و به دو خط تبدیل کند ، این حالت مخصوصا زمانی پیش می آید که عرض عناصر را با درصد مشخص کرده باشید.

توجه کنید که استفاده از first-line فقط برای عناصری کاربرد دارد که به صورت block نمایش داده می شوند. ضمن اینکه فقط می توانید از مشخصه های زیر برای frist-line استفاده کنید:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
عنصر دیگر سودو  first-letter است. با کمک این عنصر می توانید اولین کلمه یک متن را کنترل کنید و استایل خاصی را برای آن تعیریف کنید. نحوه عملکرد first-letter نیز مانند first-line است. مشخصه هایی که می توانید برای این عنصر استفاده کنید:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

اما در Css2  دو عنصردیگر برای ایجاد قابلیت های جدید و بسیار کاربردی به سودو المنت ها اضافه شدند. به کمک before و after می توانید محتوای html صفحات را تغییر دهید و مقادیری را به قبل و بعد از این عناصر اضافه کنید. به عنوان مثال ، کد زیر باعث می شود که بعد از هر <h1> صدایی پخش شود!

h1:after
{
content: url(beep.wav)
}

همین کار را می توان قبل از هر عنصر <h1> انجام داد:

h1:before
{
content: url(beep.wav)
}

اما یکی از کار های مهمی که می توانید جهت انجام آن از سودو المنت ها استفاده کنید ، در clear کردن عناصر شناور است. در طراحی های Tableless به دفعات نیاز است که محتوات درورن یک عنصر را clear کنید. برای این کار ساده ترین روش می تواند استفاده از یک Div باشد:

<div style="clear:both"><div>

با استفاده ازسودو المنت ها می توانید این کار را به نحو دیگری انجام دهید. به عنوان مثال بعد از عنصری که کلاس header دارد ، می خوهید محتوایات صفحه و یا عنصری والد را clear کنید ، کد مورد نظر می تواندی چیزی شبیه این کد باشد:

.header:after {
	content: ".";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
	}

مزییت استفاده از این روش می تواند کم کردن حجم کد های html باشد اما در عوض در ویرایشگر هایی مثل Dreamweaver نمی توانید به طور صحیح و آنطور که باید، بخش طراحی خود را مشاهده کنید. این به آن معنا است که برای استفاده از این عناصر باید کاملا با تکنیک های استفاده از آن و دیگر عناصر Css و html آشنایی داشته باشید.

پویا Uncategorized pseudo, xhtml, سی اس اس, طراحی وب