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

بایگانی برچسب‌ها : آموزش سی اس اس

css | طراحی سایت در کرج | طراحی وب سایت در کرج |هلدینگ کیان تجارت فاوا

قالب  فرم CSS

قالب  فرم CSS

در بسیاری از موارد، اشکال، کارهای واقعی کارایی وب وب است، اما این بدان معنا نیست که آنها باید ساده باشند. تا زمانی که استفاده از CSS شایع شد، برای تغییر شیوه فرم و ایجاد عناصر بر روی وب، می توان کمی انجام داد.

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

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

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

پوشش فرم 

تگ form تگ یک عنصر حاوی است که، مانند تگ div، به صورت پیش فرض نمایش داده نمی شود. هر دو برچسب، در واقع، می تواند با CSS مدل دهید – شما حتی می توانید یک فرم را در صفحه تایپ از طریق اعلامیه های CSS قرار دهید.

پشتیبانی مرورگر برای بعضی از ویژگی های CSS تعریف شده بیشتر از تگ فرم صورت می گیرد، اما ویژگی های رایج تر مانند رنگ پس زمینه و مرز در اغلب موارد به درستی ارائه می شوند. از همه مهمتر، اگر CSS از مشخصه های خاصی پشتیبانی نمی کند، این ویژگی ها فقط نادیده گرفته می شوند و فرم به صورت ساده ارائه می شود.

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

 

form {

background: #FF9900;

border: thin solid #0000FF;

padding: 10px;

}

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

در این وضعیت، انتخابگر پیشرفته در کادر محاوره ای جدید CSS Rule را انتخاب کنید و یک شناسه منحصر به فرد مانند فرم # topform یا فرم # bottomform را در فیلد Selector وارد کنید. هنگام استفاده از این روش شناسه تگ فرم را تنظیم کنید.

 

تغییر زمینه های ورودی

 

یکی از راه هایی که برچسب های form و div را در رابطه با CSS متفاوت است، در مورد ماده ارثی است. عناصر در یک فرم، خواص CSS از فرم teh را به ارث نمی برند، اما عناصر در یک برچسب div به ارث می برند ویژگی های CSS دی است.

شما باید، خودتان، مسیر دیگری را برای ظاهر شدن تمام زمینه های متن در یک فرم مشخص کنید. بهترین روش برای اثرگذاری بر عناصر چندگانه، این است که همه چیز را یک بار در یک تگ ورودی قرار دهید.

شما ممکن است به خاطر داشته باشید که تگ ورودی teh برای ایجاد زمینه های متنی، دکمه های رادیویی، کادر های تأیید و دکمه های ارسال استفاده می شود.

به عنوان مثال، این قانون CSS تمام عناصر ورودی را می دهد یک رنگ پس زمینه یکنواخت و همچنین یک رنگ، فونت و اندازه خاص برای زمینه های متن:

 

input {

background-color: #F5F5F5;

color: #660099;

font: 10px Verdana, Arial, Helvetica, sans-serif;

}

 

 

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

 

نکته: به یاد داشته باشید که یک فیلد متن چند سطحی، متد textarea متفاوتی را نسبت به فیلد تک خطی ترسیم می کند. شما باید یک قانون CSS برای هر دو تگ ورودی و textarea ایجاد کنید.

یکی از بهترین استفاده ها برای CSS و زمینه های متن تنظیم عرض اکتیو است. این روش بسیار انعطاف پذیر تر و پاسخگو تر از استفاده از میدان مزرعه چرخه در بازرس املاک برای هر زمینه متن فرد است.

بهتر است که عرض اکسس را در کلاس CSS تنظیم کنید تا آن را به طور مستقیم در CSS rule برای تگ ورودی تغییر دهید. چرا؟ تنظیم عرض عرض نه تنها بر روی همه فیلدهای متنی تک خط تاثیر می گذارد، بلکه باعث تغییر کادر ها و دکمه های رادیویی می شود که همچنین برچسب های ورودی هستند.

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

لیست های مختلف و منوها

شی انتخاب لیست / منو متشکل از دو برچسب است: انتخاب و گزینه. برچسب انتخاب، ظرف کلی برای اقلام لیست است. از تگ انتخاب برای سبک عرض، متن و اندازه فونت همه لیست های کشویی روی صفحه استفاده کنید.

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

اگر یک لیست کشویی بسیار طولانی داشته باشید که طیف گسترده ای از اقلام را مرتب براساس طبقه بندی، با یک ظاهر سبک CSS تفسیر می کند، عنوان های اصلی دسته را می توان در یک رنگ و زیرمجموعه های دیگر قرار داد.

تغییر برچسب ها و افسانه ها

یک فرم بیش از مجموعه ای از زمینه های متن و چک باکس است. برچسب ها نقش مهمی در سازماندهی و قابلیت استفاده دارند. برچسب های فرم اغلب در یکی از دو روش استفاده می شوند.

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

یک متدولوژی CSS Dreamweaver برای هر کدام از مسیرهایی که هنگام اکتیو کردن فرمهایتان میگیرید در دسترس است.

در یک وضعیت که همه برچسب ها در یک ستون جدول مرتب شده اند، بهتر است برای ایجاد یک کلاس CSS برای شما برچسب ها ایجاد کنید و آن را به تگ های td اعمال کنید.

بهترین روش برای انجام این کار این است که برای اولین بار ستون ستون حاوی برچسب را انتخاب کنید و سپس کلاس مورد نظر خود را از لیست Style Style در بازرس املاک انتخاب کنید. Dreamweaver کلاس انتخاب شده را به هر سلول Teh-Td اعمال می کند

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

توجه داشته باشید که ممکن است هنوز نیاز به تنظیم ابعاد ستون برچسب جداگانه داشته باشید. تنظیم عرض عرض در CSS برای تگ برچسب TEMP بدون TEMPeffect.

دو تگ دیگر مرتبط با فرم – fieldset و legend – برای ظاهر CSS در دسترس هستند. همانطور که قبلا در این فصل در نوار کناری توضیح داده شده است، “کنترل گروه بندی گروه ها”، دو مورد با یکدیگر به صورت بصری مرتبط می شوند.

تگ the fieldset را برای تغییر مرز مشخصی یا اضافه کردن لبه از لبه مرز، سبک کنید. تغییر سبک افسانه زمانی که می خواهید یک رنگ پس زمینه و / یا حاشیه جداگانه داشته باشید.

برجسته کردن تمرکز

آیا میخواهید تعامل یک فرم را در نظر بگیرید؟ CSS شامل یک عنصر شبه عنصری است (به اصطلاح coz معتبر است تنها زمانی که یک عنصر در یک حالت خاص است) که زمانی که یک عنصر فرم انتخاب می شود اثر می گذارد. انتخاب CSS سازنده این است: تمرکز و با ورودی، انتخاب و برچسب های Textarea کار می کند.

برای ایجاد: انتخاب فوکوس، این مراحل را دنبال کنید:

۱٫ جدید CSS Rule را از پنل CSS Styles انتخاب کنید.

۲٫ در جعبه محاوره ای جدید CSS Rule گزینه انتخاب پیشرفته را انتخاب کنید.

۳٫ نام تگ را که می خواهید تأثیر بگذارید وارد کنید:

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

.۴٫ OK را بزنید تا کادر New CSS Rule را خاتمه دهید و کادر گفتگوی Definition Rule CSS را باز کنید.

۵٫ سبک های دلخواه را از دسته های مختلف انتخاب کنید و روی TEMPyou’re کلیک کنید.

پیشنمایش صفحه در یک مرورگر سازگار مانند موزیلا فایرفاکس، Netscape 6 یا بهتر، Safari، و غیره برای تجربه تغییرات CSS.

 

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

آموزش css – جعبه‌ها و قاب‌ها در css

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

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

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

box model ebef6

اضافه کردن قاب:

  • در حالت پیش‌فرض قابی که دور تا دور المان‌های html وجود دارد، دیده نمی‌شود. ولی شما هر زمان که بخواهید می‌توانید این قاب را با رنگ و ضخامت دلخواه نمایش دهید.
    • نام :‌ border-style و border-size
    • این ویژگی چه کاری انجام می‌دهد؟  برای تعیین قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.
    • چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه و نوع قاب دور المان‌ها را.
    • نحوه‌ی استفاده: border-style: solid و border-size: 1px را در بخش دستورات می‌نویسیم.
    • همانطور که گفتیم، هر المان اچ‌تی‌ام‌ال در واقع دارای یک قاب منحصر به فرد است که دور تا دور المان را اشغال کرده. برای همین موضوع معمولا این قاب به صورت نامرئی است؛ ولی همیشه وجود دارد.

 

تغییر رنگ و حالت قاب:

نام :‌ border-style و border-color

این ویژگی چه کاری انجام می‌دهد؟  برای تعیین رنگ قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.

چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه رنگ و نوع قاب دور المان را

نحوه استفاده: border-style: solid و border-size: 1px و border-color: red

دستور  border-style می‌تواند حالت‌های مختلفی داشته باشد. این دستور همانطور که گفتیم در واقع نوع بردار را مشخص می‌کند. نوع بردار می‌تواند به صورت خطی‌(solid)، به صورت خط چین (dashed) و یا به صورت نقطه‌چین (dotted) باشد.

 

HTML

<div class=”border”> المانی با ابعاد مشخص و قاب مرئی </div>

CSS

border {
border-style: solid;
border-color:  #۹۸bf21

    width:  ۲۰۰px;

   height: 300px;
}

المانی با ابعاد مشخص و قاب مرئی

 

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

آموزش CSS – پس زمینه در CSS

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

پس زمینه در CSS

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

چگونگی اضافه کردن رنگ در css:

 روش اول -از طریق کد HEX:

در این مثال ابتدا علامت # قرار می‌دهیم و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال” fd0000 #”

روش دوم – کد RGB رنگ:

در این حالت باید کد RGB‌ رنگ را بدهید. ابتدا کلمه RGB را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد RGB در پرانتز و بین "" می‌نویسیم.”(RGB (255,0,0″

روش سوم – نوشتن نام رنگ‌های پیش‌فرض:

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود.  – مثال : “red” برای رنگ قرمز

رنگ پس زمینه:

  • نام : background-color
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند.
  • نمونه نوشتن:  رنگ مورد نظر# : background-color
  •  مثال۲ –  background-color:  #ff0000
  •  مثال ۳- “(background-color: “rgb(255,0,0
  •  مثال ۴- background-color: blue

HTML

<div class=”bg-yelllow”><p>یک متن که داخل یک صفحه زرد قرار دارد</p></div>

CSS

bg-yellow {

background-color: yellow;

}

یک متن که داخل یک صفحه زرد رنگ قرار دارد

 

عکس پس‌زمینه:

شما در CSS و HTML می‌توانید تصویر پس زمینه یک المان را تغییر دهید. عکس پس زمینه درCSS  و HTML  بدین صورت نوشته می‌شود:

  • نام: background-image
  • این ویژگی چه کاری انجام می‌دهد؟‌   تغییر تصویر پس زمینه  هر نوع المانی در HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ در این جا باید آدرس عکس مورد نظرتان را به CSS بدهید.
  • نمونه نوشتن:    (‘آدرس دقیق و کامل عکس در اینترنت’) background-image:   url
  • مثال:  (“background-image:    url (“zoomit.ir/axshoma.jpg

background-image: url(“KIANART/PIC.jpg”);

HTML

<div class=”bg-img”><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url(‘http://www.kianart.ir/media/b/items/..pic.jpg’);”

}

یک متن که داخل یک صفحه با تصویر زمینه قرار دارد

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین “” نوشته شود. ("url.png")

 

تکرار تصویر پس زمینه:

شما می‌توانید عکس پس زمینه را به صورت افقی یا عمودی تکرار کنید.این قابلیت برای نمایش تصاویر با ابعاد کوچکتر استفاده می‌شود.

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-x;

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

برای تکرار تصویر در جهت عمودی نیز تنها کافیست تا این کد را برای راستای y بنویسیم.

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-y;

 همچنین اگر دوست نداشته باشید که تصویر شما تکرار شود، برای جلوگیری از تکرار عکس، تنها کافیست تا دستور زیر را بنویسید:

background-repeat:  no repeat;

 

Tagged
آموزش 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