درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من

طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته

0 نظرات

سلام به دوستان ITPRO و با عرض پوزش به علت تاخیر یک روزه!


در جلسه ی قبل ما با CSS Property ها و لینک های HTML آشنا شدیم . امروز می خواهیم با هم با تگ های Structurall (ساختاری) آشنا شویم. این تگ ها در نسخه ی آخر HTML یعنی نسخه ی HTML5



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



جداول (Table Design) استفاده می شد.



تگ های Structurall


طبق آماری که سازمان جهانی وب به دست آورد درصد بالایی از وبسایت ها از تعدادی قسمت های مشخص برای ساختار اصلی وبسایت خود استفاده می کردند مانند :header (بخش بالایی وبسایت)،sidebar (بخش



کناری وبسایت) و footer (بخش پایینی وبسایت). برای همین سازمان جهانی وب تصمیم بر اضافه کردن تگ هایی برای هر کدام از این بخش ها گرفت.


ساختاری


سازمان جهانی وب تگ های Structurall را با ساختار بالا در نسخه ی جدید HTML یعنی نسخه ی 5 ارايه کرد.



Header

این تگ بخش بالایی وبسایت ما را در بر می گیرد.جایی که معمولا لوگو و نام وبسایت در آن قرار می گیرند.


توجه داشته باشید که تگ Head و تگ Header کاربرد کاملا متفاوتی دارند.


navigation



nav

این تگ برای ایجاد نوار پیمایش (Navigation pain) در نظر گرفته شده است.


navigation



Section

کاربرد این تگ برای قسمت محتوای سایت است.


section



Aside

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


aside



Article

برای بخش های مختلف داخل تگ Section از این تگ استفاده می کنند.


article



Footer

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


footer



درست کردن Header ساده با HTML و CSS

با استفاده از دانشی که در این چند جلسه کسب کردیم و تگ Header می توانیم یک Header ساده درست کنیم.


برای شروع من فولدر project4 را در فولدر WorkSpace خودم درست می کنم و فایل index.html را درون آن آن قرار می دهم.


و کد های ابتدایی فایل خودم را درون آن می نویسم.


<html>
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
	</head>
	<body>
			
	</body>
</html>	

حالا می خواهیم از تگ Headerاستفاده کنیم.


<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
	</head>
	<body>
		<header>
			<h1>انجمن تخصصی فناور اطلاعات ایران</h1>
			<p>زکات علم نشر آن است.</p>
		</header>
	</body>
</html>	

خروجی:


itpro


چون وبسایت ما فارسی است باید متن ها از راست به چپ نوشته شوند برای این کار باید از CSS کمک بگیریم:


<style>
body{
    direction:rtl;
    }
		</style>

Property این کار Direction نام دارد که دو مقدار rtl (یعنی Right to left )و ltr ( یعنی Left to right )را می توان به آن داد. که ما اینجا به دلیل فارسی بودن وبسایت ما مقدار راست به چپ (rtl) را به آن می



دهیم.


itpro


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


من به صفحه ام و Header رنگ پس زمینه می دهم.


body{
     direction:rtl;
    background-color:gainsboro;
    }    
header{
     background-color:gray;    
    }

خروجی:


header


برای دادن جلوه ی بهتر می خواهیم رنگ متن Header را عوض کنیم. Property این کار Color است.


من به شکل زیر عمل می کنم:


color:gainsboro;

کد بالا را برای Header می نویسم. همانند background-color که نام رنگ و یا کد HEX یا کد rgb به عنوان مقدار می گرفت ، Color نیز کد رنگ یا کد HEX یا کد rgb به عنوان مقدار میگیرد.


خروجی:


color property


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



CSS Selector های پیشرفته


من نمودار درختی یک فایل html با چند تگ تو در تو را قرار دادم تا بتوانیم با هم تگ ها را با استفاده از CSS Selector ها Select کنیم.


tree


با Selector هایی که ما در جلسات قبل خواندیم برای Select کردن هر کدام از این تگ های باید به آن ها یک id دهیم و سپس آن ها را Select کنیم. اما امروز می خواهیم یاد بگیریم که چگونه بدون دادن id یا



class و تنها با استفاده از ساختار درختی فایلمان(DOM) تگ ها و المان های مختلف را Select کنیم.


ابتدا من ساختار درختی بالا را درون یک فایل index.html در فولدر project5 که درست کردم پیاده می کنم.


<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			
		</style>
	</head>
	<body>
		<header>
			<h1>انجمن تخصصی فناور اطلاعات ایران</h1>
		</header>
		<section>
			<h2>پست اول
				<p>این یک پاراگراف است!</p>
			</h2>
		</section>
		<footer>
			<h2>Copy righing <strong>2014-<span>2015</span></strong></h2>
		</footer>
	</body>
</html>	

برای شروع من تصمیم دارم h1 داخل Header را Select کنم :


header h1{
color:yellow;			
    }

گذاشتن فاصله یعنی من می خواهم به داخل header بروم و سپس از داخل header تمام h1 های موجود داخل header را Select می کنم.


خروجی:


color property


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


body h2{
        color:red;
}

خروجی:


color property


خب تمام h2 ها که تمامی متن باقی مانده ی صفحه ی ما را تشکیل می دادند به رنگ قرمز در آمدند. حالا من به جای استفاده از فاصله از < استفاده می کنم:


body>h2{


color:red;


}


خروجی:


color property


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

مستقیما

داخل Body هستند را Select می کند ولی چون هیچ تگ h2 ای مستقیم داخل Body قرار ندارد



هیچ تگی Select نمی شود. ( منظور از مستقیم تگ هایی هستند که تگ مادر آن ها تگ Body ست)


parent>chield{
			
    }

ما می توانیم از CSS Selector ها به صورت ترکبیبی استفاده کنیم. مثلا من به تگ strong داخل footer یک کلاس به نام bold می دهم و با استفاده از کلاس آن را Select می کنم:


body>footer strong.bold{
        color:green;
}
خروجی:
||selector::http://tosinso.com/files/get/5715c70825144899a2a4d0ce667566e2||

Select بالا داخل Body مستقیما به دنبال تگی به نام footer می گردد و داخل آن تمام تگ های strong که کلاسی با نام bold داند را Select می کند.


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


<css>


body>footer strong .bold{


color:green;


}


<css>


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


در جلسه ی آینده با property های CSS بیشتر کار خواهیم کرد.



ممنون از همراهی شما.


ITPRO باشید


محمد پارسا صفوی


انجمن تخصصی فناوری اطلاعات ایران - ITPRO.ir


آیا این مطلب را پسندیدید؟
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
هیچ نظری ارسال نشده است

برای ارسال نظر ابتدا به سایت وارد شوید

arrow