طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : کیان آرت

آموزش CSS - نحوه انتخاب المان‌های HTML - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش CSS – نحوه انتخاب المان‌های HTML

آموزش CSS – نحوه انتخاب المان‌های HTMLطراحی سایت در کرج شرکت کیان تجارت فاوا

CSS Selector چیست؟

انتخاب‌ کردن یک المان اچی تی ام ال، یکی از مهمترین قواعد CSS است. در واقع شما برای اینکه یک المان HTML  را درCSS تغییر دهید اول باید  آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن CSS می‌گویند و شما با کمک انتخابگر، المان HTML مورد نظر را انتخاب یا پیدا می‌کنید.

برای صدا کردن یک المان HTML ، نیاز داریم که اسم آن را صدا بزنیم. المان‌های HTML هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته می‌شوند و لینک‌ها با تگ a شناخته می‌شوند. در واقع تگ‌هایHTML نام‌های عمومی هستند و اگر شما از آن‌ها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.

مثلا در زیر ما نوشته‌ایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کرده‌ایم.

HTML

<p>متن اول</p>

<p>متن دوم</p>

<p>متن سوم</p>

CSS

 p {

color: #۹۹CC00;

}

متن اول

متن دوم

متن سوم

حالا از خودتان می‌پرسید اگر ما قصد تغییر همه پاراگراف‌ها را نداشته باشیم و تنها بخواهیم یکی از المان‌ها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class‌ به کار می‌آید. کلاس و id در واقع بهترین روش برای انتخاب المان‌ها در CSS و HTML است.

برای درک بهترکلاس و ID مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل “محمد” حضور دارند، کلمه “محمد”  را صدا بزنید. در این صورت تمامی محمدها مخاطب شما خواهند شد و به حرف  شما گوش خواهند داد. در CSS هم همین گونه است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های HTML را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.

ID همانندشماره شناسنامه برای افراد است. در واقع شما در همان مثال خیابان شلوغ اگر یک محمد خاص را در نظر داشته باشید می‌توانید از طریق گفتن شماره شناسنامه وی را مستقیما صدا بزنید بدون آنکه کس دیگری را مورد خطاب قرار دهید.

در واقع شما با تخصیص یک id به هر المان HTML صفحه آن را منحصر به فرد می‌کنید. توجه داشته باشید که به هر المانHTML –  ID  منحصر به فرد بدهید و از دادن ID یکسان به چند المان خود داری کنید. استفاده از id برای المان‌ها در موارد بسیاری همچون در جاوا اسکریپت کاربرد فراوانی دارد.

اضافه کردن ID به المان‌های HTML :

در قدم اول ما باید المان‌های HTML مان را دارای یک آی‌دی منحصر به فرد کنیم. مثلا  برای پاراگراف <“p id=”hi> می‌نویسیم که با <p> تفاوت دارد.  چرا که <“p id=”hi> دارای یک آی دی منحصر به فرد با نام hi است که توسط شما و با اضافه کردن اتریبیوت id به دست آمده است.

پس برای اضافه کردن ID به هر المان HTML کلمه ID را در تگ مورد نظر یادداشت کرده و در مقابل آن "نام آی‌دی"= را می‌نویسیم:

ID = ” نام آی‌دی مورد نظر”

حالا که با نحوه‌ی اضافه کردن id به المان‌های HTML آشنا شدیم؛ در قدم دوم وقت آن رسیده است تا آن‌ها را با CSS انتخاب کنیم. برای انتخاب یکID خاص در سی اس اس باید علامت # و سپس نامی که به عنوان ID به المان داده‌ایم را بنویسیم.

برای مثال ما در زیر المان‌هایی که دارای ID منحصر به فرد hi# هستند،  انتخاب کرده‌ایم و قوانین دلخواهمان را بر روی آن اعمال کرده‌ایم.

HTML

<p id =”hi”> متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>

CSS

#hi{
text-align: center;
color:  #ff6600;
}

متنی که دارای آی‌دی hi است را توسط CSS انتخاب می‌کنیم تا آن را تغییر دهیم.

انتخاب از طریق کلاس:

راه حل دیگر برای تغییر همزمان چند المان استفاده از قابلیت کلاس است. کلاس مانند فامیلی برای همان مثال آدم‌ها و خیابان است. بدین ترتیب که شما این دفعه فامیلی فرد را صدا می‌زنید و ممکن است یک یا چند نفر مخاطب شما باشند. شما با اضافه کردن اتریبیوت class به المان‌های HTML خود می‌توانید به صورت همزمان یک استایل و شمایل دلخواه به همه آن‌ها بدهید. مثلا فرض کنید می‌خواهید تیترهای مطلب را با رنگ آبی نشان دهید و تیترهایی که در کنار صفحه و بالای منوها قرار دارند را با همان رنگ مشکی پیش‌فرض نشان داده شود.

در قدم اول، المان‌های صفحه اچ تی ام ال (هر چند تا که دوست داریم تغییر کنند)‌ کلاس اضافه می‌کنیم.

در این مثال باید به تمامی هدرهایی که در متن قرار دارد کلاس دلخواه را بدهیم. بدین ترتیب تمامی این هدرها که دارای این کلاس شوند از چنین استایلی بهره‌مند خواهند شد.

HTML

<p  class=”ghermez”> هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>
<h2 class=”ghermez”>عنوان دارای کلاس قرمز</h2>
<h3 class=”ghermez”>عنوان دارای کلاس قرمز</h3>

CSS

.ghermez{
color:  red;
}

هر تگی که دارای کلاس ghermez است را توسط CSS انتخاب می‌کنیم تا آن را تغییر دهیم.

 عنوان دارای کلاس قرمز

روش‌های بالا روش‌های کلی انتخاب المان‌های HTML توسط CSS هستند. اما هنوز هم می‌توانید با ترکیب این روش‌ها، دامنه‌ی محدوتری را انتخاب کنید. مثلا اگر قصد داشته باشید بگویید تمامی تگ‌های فلان که دارای کلاس فلان هستند. مثلا تمامی تگ‌های پاراگرافی که دارای کلاس abi هستند. مثال:

HTML

<p class=”abi”>من یک متن با کلاس آبی هستم</p>

<h3 class=”abi”>من یک عنوان با کلاس آبی هستم.</h3>

<p  class=”red”>من هم یک متن با کلاس قرمز هستم.</p>

CSS

p.abi{
color: #۰۰CCFF;
}

 من یک متن با کلاس آبی هستم

من یک عنوان با کلاس آبی هستم.

من هم یک متن با کلاس قرمز هستم.

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس ABI هستند دیگر مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

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

نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.

 

Tagged
آموزش CSS - قواعد اولیه نوشتن به زبان CSS - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش CSS – قواعد اولیه نوشتن به زبان CSS

آموزش CSS – قواعد اولیه نوشتن به زبان CSSطراحی سایت در کرج شرکت کیان تجارت فاوا

قانون کلی نوشتن CSS:

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

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

مرحله‌ی اول: با روش‌هایی که در جلسه بعدی مفصل به آنها خواهیم پرداخت، المان های HTML خود را نام‌گذاری کنید.

مرحله‌ی دوم: المان‌هایی که در HTML  نام گذاری کرده‌اید را در فایل CSS خود صدا بزنید و آن‌ها را مخاطب قرار دهید.

مرحله‌ی پایانی: حالا تنها کافیست تا تغییراتی که می‌خواهید را در جلوی نام‌ المان‌ها بنویسید تا این تغییرات بر روی آن المان‌ها اعمال شود.

خب اگر آماده‌اید این سه مرحله ساده را با یک مثال کوچک شروع کنیم. برای مثال فرض کنید قصد داریم تمامی پاراگراف‌های موجود در صفحه‌ را به رنگ قرمز در بیاوریم.

مرحله اول: برای اینکار در قدم اول باید المان HTML که قصد داریم آن را تغییر دهیم، صدا بزنیم یا اصطلاحا انتخاب کنیم. خوشبختانهHTML  و CSS از حروف یکسانی برای شناسایی المان‌ها استفاده می‌کنند. پس چون ما در اینجا ما قصد تغییر در متن‌ها  را داریم و میدانیم که متن‌ها با تگ P در اچ تی ام ال نوشته می‌شوند، پس کلمه p را به عنوان نام این المان می‌نویسیم.

p

مرحله دوم: در جلوی المان انتخاب شده یک علامت } باز می‌کنیم:

p {

قدم سوم : بعد از کروشه، آن چیزی که قصد داریم در این المان تغییر کند را می‌نویسیم. مثلا اگر قصد تغییر در رنگ المان را داریم، کلمه Color به معنای رنگ را نوشته و جلوی آن :‌ می‌گذاریم. 

p {

color: رنگ دلخواه شما!

قدم چهارم: در جلوی دو نقطه، آن تغییری که قصد داریم بر روی صفحه اعمال شود را می‌گوییم: مثلا در رابطه با تغییر رنگ، نام یا کد شش رقمی رنگ مورد نظر را می‌نویسیم. مثلا در این مثال روبروی عبارت color: کلمه قرمز red نوشته می‌شود. بدین ترتیب ما با نوشتن color: red رنگ تمامی متن‌های داخل HTML را به قرمز تغییر داده‌ایم.  دقت کنید که بعد از تمام شدن هر استایل، علامت قرار دهید. در غیر این صورت استایل‌های شما خوانده نمی‌شود.

p {

color: red ;

در نهایت:‌ کروشه را می‌بندیم و تمام! حالا تمامی تگ‌های پاراگراف صفحه ما رنگ قرمز خواهند داشت.

p {

color:   red;

}

HTML

<p>متنی که قرار است با رنگ قرمز نوشته شود</p>

CSS

p {

color:   red;

}

متنی که قرار است با رنگ قرمز نوشته شود

 

نکته بسیار مهم: حتما دقت کنید که در انتهای هر دستور که داخل کروشه {} قرار می‌گیرد، یک علامت قرار دهید. بدین ترتیب CSS می‌فهمد که کار شما با این المان تمام شده و دستور بعدی(یا همان خط بعدی) را اجرا می‌کند. در غیر این صورت اعمال تغییرات شما از جایی که دیگر علامت وجود ندارد، قطع می‌شود.

مثال دیگری را با هم مرور کنیم.  فرض کنید بعد از قرمز کردن رنگ متن‌ها، در قدم بعدی می‌خواهیم علاوه بر رنگ متن را نیز با فونت tahoma به نمایش در بیاوریم.

برای اینکار باید یک خط دیگر به داخل {} که باز کرده‌ایم اضافه کنیم. این خط در واقع دستور تغییر فونت را نیز اعمال می‌کند. بنابراین نتیجه‌ی نهایی به صورت زیر می‌شود.

HTML

<p>متنی که قرار است با رنگ قرمز و  فونت تاهما نمایش داده شود</p>

CSS

p {

color:   red;

font-family:   tahoma;

}

متنی که قرار است با رنگ قرمز و  فونت تاهما نمایش داده شود

 

در جلسه‌ی بعدی با نحوه‌ی انتخاب و نام‌گذاری المان‌های HTML  بیشتر آشنا خواهیم شد. هدف اصلی این جلسه آشنایی با قواعد نوشتاری سی‌اس‌اس بود. همراه ما در سایت کیان تجارت فاوا باشید .

Tagged
افزونه تماس با ما وردپرس Contact Form 7 - آموزش افزونه تماس با ما در کیان آرت - امکانات استفاده از cantact form 7 - آموزش افزونه وردپرس

افزونه تماس با ما وردپرس Contact Form 7

 افزونه تماس با ما وردپرس Contact Form 7 – آموزش افزونه تماس با ما در کیان آرت

افزونه تماس با ما وردپرس :

سلام برای شما کاربران وردپرسی افزونه ای به نام Contact Form 7 برای شما قرار داده ایم که با این افزونه رایگان می توانید یک فرم تماس با ما فارسی داشته باشید تا بتوانید با کاربران سایت خود در ارتباط باشید و بتوانید کاربران خود را پشتیبانی کنید و به راحتی می توانید راهی برای ارتباط با بازدیدکنندگان سایت خود ارتباط داشته باشید.

افزونه Contact Form 7 یکی از دیگر ماژول های ارتباط با کاربران ها می باشد که به راحتی با آن کار می کنید.

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

 

افزونه تماس با ما وردپرس Contact Form 7 - آموزش افزونه تماس با ما در کیان آرت - امکانات استفاده از cantact form 7 - آموزش افزونه وردپرس

 آموزش افزونه تماس با ما در کیان آرت

 

بعد از نصب افزونه باید به قسمت Contact بروید و بر روی دکمه Add New کلیک کنید و بعد از آن یک صفحه مانند تصویر بالا برای شما نمایش داده می شود که در قسمت Mail باید ایمیل خود را بنویسید و بعد از آن اگر که فیلد مورد نظرتان در قسمت آن فرم نیست آن را به فرم بیفزایید و شورت کدی که برای شما ساخته می شود را در قسمت برگه ها و یا ابزارک ها Copy و Paste کنید تا در آن قسمت فرم ساخته شده شما نمایش داده شود.

 

 

امکانات این افزونه :

  • به راحتی می توانید یک فرم ایجاد کنید.

  • تنظیم پیام برای ارسال به کاربران

  • ایجاد کد کپچا بر روی سایت شما

  • ساختن فرم بدون یک خط کد نویسی

  • سرعت لود بسیار بالا

  • امکان قرار دادن فرم در هر مکانی از وب سایت

[email-download-link namefield=”YES” id=”6″]

Tagged