در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector

طبق آماری که سازمان جهانی وب به دست آورد درصد بالایی از وبسایت ها از تعدادی قسمت های مشخص برای ساختار اصلی وبسایت خود استفاده می کردند مانند :header (بخش بالایی وبسایت)،sidebar (بخش کناری وبسایت) و footer (بخش پایینی وبسایت). برای همین سازمان جهانی وب تصمیم بر اضافه کردن تگ هایی برای هر کدام از این بخش ها گرفت. سازمان جهانی وب تگ های Structurall را با ساختار بالا در نسخه ی جدید HTML یعنی نسخه ی 5 ارايه کرد. این تگ بخش بالایی وبسایت ما را در بر می گیرد.جایی که معمولا لوگو و نام وبسایت در آن قرار می گیرند. توجه داشته باشید که تگ Head و تگ Header کاربرد کاملا متفاوتی دارند. این تگ برای ایجاد نوار پیمایش (Navigation pain) در نظر گرفته شده است. کاربرد این تگ برای قسمت محتوای سایت است. این تگ را برای درج نوار کناری استفاده می کنند. برای بخش های مختلف داخل تگ Section از این تگ استفاده می کنند. برای بخش انتهایی سایت که در طراحی های امروزی بخش مهمی از سایت را تشکیل می دهد استفاده می شود. با استفاده از دانشی که در این چند جلسه کسب کردیم و تگ Header می توانیم یک Header ساده درست کنیم. برای شروع من فولدر project4 را در فولدر WorkSpace خودم درست می کنم و فایل index.html را درون آن آن قرار می دهم. و کد های ابتدایی فایل خودم را درون آن می نویسم. حالا می خواهیم از تگ Headerاستفاده کنیم. خروجی: چون وبسایت ما فارسی است باید متن ها از راست به چپ نوشته شوند برای این کار باید از CSS کمک بگیریم: Property این کار Direction نام دارد که دو مقدار rtl (یعنی Right to left )و ltr ( یعنی Left to right )را می توان به آن داد. که ما اینجا به دلیل فارسی بودن وبسایت ما مقدار راست به چپ (rtl) را به آن می دهیم. حالا وقت آن رسیده که کمی با CSS به آن شکل دهیم: من به صفحه ام و Header رنگ پس زمینه می دهم. خروجی: برای دادن جلوه ی بهتر می خواهیم رنگ متن Header را عوض کنیم. Property این کار Color است. من به شکل زیر عمل می کنم: کد بالا را برای Header می نویسم. همانند background-color که نام رنگ و یا کد HEX یا کد rgb به عنوان مقدار می گرفت ، Color نیز کد رنگ یا کد HEX یا کد rgb به عنوان مقدار میگیرد. خروجی: در جلسات قبل ما با CSS Selector های ساده کار کردیم. حالا می خواهیم با انواع پیشرفته تر آن ها کار کنیم که در طراحی وبسایت های بزرگ با چندین تگ خیلی کارایی دارند. من نمودار درختی یک فایل html با چند تگ تو در تو را قرار دادم تا بتوانیم با هم تگ ها را با استفاده از CSS Selector ها Select کنیم. با Selector هایی که ما در جلسات قبل خواندیم برای Select کردن هر کدام از این تگ های باید به آن ها یک id دهیم و سپس آن ها را Select کنیم. اما امروز می خواهیم یاد بگیریم که چگونه بدون دادن id یا class و تنها با استفاده از ساختار درختی فایلمان(DOM) تگ ها و المان های مختلف را Select کنیم. ابتدا من ساختار درختی بالا را درون یک فایل index.html در فولدر project5 که درست کردم پیاده می کنم. برای شروع من تصمیم دارم h1 داخل Header را Select کنم : گذاشتن فاصله یعنی من می خواهم به داخل header بروم و سپس از داخل header تمام h1 های موجود داخل header را Select می کنم. خروجی: همانطور که دیدید رنگ متن انتخاب شده ی من به زرد تغیر یافت. حالا می خواهیم رنگ تمامی h2 های موجود را به قرمز تغیر دهیم. برای این کار طبق قاعده ی بالا من از این کد استفاده می کنم: خروجی: خب تمام h2 ها که تمامی متن باقی مانده ی صفحه ی ما را تشکیل می دادند به رنگ قرمز در آمدند. حالا من به جای استفاده از فاصله از < استفاده می کنم: body>h2{ color:red; } خروجی: دیدیم که رنگی به h2 ها داده نشد. وقتی من به جای فاصله از < استفاده کردم تمامی تگ های h2 که داخل Body هستند را Select می کند ولی چون هیچ تگ h2 ای مستقیم داخل Body قرار ندارد هیچ تگی Select نمی شود. ( منظور از مستقیم تگ هایی هستند که تگ مادر آن ها تگ Body ست) ما می توانیم از CSS Selector ها به صورت ترکبیبی استفاده کنیم. مثلا من به تگ strong داخل footer یک کلاس به نام bold می دهم و با استفاده از کلاس آن را Select می کنم: Select بالا داخل Body مستقیما به دنبال تگی به نام footer می گردد و داخل آن تمام تگ های strong که کلاسی با نام bold داند را Select می کند. توجه داشته باشید که کد زیر با کد بالا فرق می کند:
#طراحی_صفحات_وب_با_html_و_css #طراحی_صفحات_وب_با_html #آموزش_html_و_css #آموزش_طراحی_وبسایت #آموزش_ساخت_وبسایت #آموزش_html5 #آموزش_طراحی_وبسایت_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....