آموزش cssدر طراحی سایت بخش 2
ما در قسمت قبل طریقه استفاده کردن selector کلاس و آیدی را یاد گرفته ایم در این مقاله بخش های دیگر selectorوcss-indusionرا یاد می گیریم
selector فرزند
شما در قسمت قبل با Descendant Selector آشنا شده اید فرزندselector در مثال Descendant Selector تمام property های که شما مشخص می کنیدرا تحت تاثیر قرار می دهد اما فرزند selector تنهاproperty های که درون خودش است را تحت تاثیر می گذارد(به معنای این است که اگر شماpropertyوvalueخود را درون عنصرهایی مانند<div>و<td>بگذارید تحت تاثیر قرار نمی گیرند)
Body > p {Color : #000000;}
selector attribute
شما به راحتی می توانید یک attributeرابه یک عنصر html بدهید و کد زیر می تواند تمام inputهای که داخل آنها text هست را به رنگ مشکی تغییر بدهد
Input[type=”text”]{Color:#000000}
یکی از مهم ترین کاربرد های که استفاده از این کد برای شما فراهم می کند این است که خود input تحت تاثیر قرارنمی گیرد تنها نوع textداخل input تحت تاثیر قرار می گیرد
کد های مشابه مثال بالا همراه با توضیحات:
p[long]:تمام کد های که درون پاراگراف هستند ازattribute long استفاده می کنند
p[long="fr"]:تمام کدهای که درون پاراگراف هستند دارای attribute longهستند و از"value "frاستفاده می کنند
p[long~="fr"]:تمام کدهای که درون پاراگراف هستند دارای attribute longهستند و ازکلمه fr استفاده می کنند
دادن دو یا چند استایل
بیشتر اوقات ما به یک خط کد cssنیاز داریم برای تغییر یک عنصر html,کدهای cssرا می توانید درون یک بلوک کدی که در قسمت های بالا و مقاله قبل توضیح دادیم استفاده کنید مانند:
H1 {Color: #000000; Font-weight:200px; Font-family:Tahoma;}
قابل توجه است که تمام کدهای بالا با استفاده از:semicolonباید از هم جدا بشوند
selector گروهی
شما می توانید به هرselectorکه نیاز دارید یک style بدهید و نیاز به تکرار کد خودبرای هر selector نباشید
تنها باید از(،) برای جدا کردن آنها استفاده کنید
H1 , h2 , h3 {Color : #000000; Font-weight:200px; Family-font:Tahoma;}
کد بالا برای هر سه selector h1،h2،h3 تاثیر گذار خواهد بود شما با استفاده از این ویژگی می توانیدتمام کلاس های مورد نظر خود را تغییر بدهید
mine-container, item1 ,item2 {Color :#000000; Font-weight:200px; Family-font:Tahoma;}
css_inclusion
شما سه راه برای استفاده ازcss درون html دارید که ما برای شروع بیشترinterline css را توصیه می کنیم
در css برای وارد شدن به htmlاز سه روش interline،external،inlineاستفاده می شود
inline:یعنی که شما استایلی که موردنظر خودتان است را در همان خط کدبه عنصر html می دهید
p style="color:#ccc"
external:وقتی که شمااستایلی که می خواهیددرون <head>می نویسید و بعد درون خود html آنهارا استفاده می کنید مانند:
ما برای شروع شما، این راه را پیشنهاد می کنیم زیرا شما هم کد HTMLخود و هم کد CSSرا درون یک صفحه می بینید
external:وقتی که شما در طراحی وب پیشرفت کنید و تعداد کدهای شما به100،200ویا حتی1000خط برسدشما می فهمید که داشتن html،cssدرون یک صفحه بسیار جاگیرو فهم آن بسیار سخت می شود پس برای حل این مشکل ازcss external استفاده می شود
ما کدهای که نیاز داریم رامانند کد بالا بدون استفاده از تگ<style>در یک صفحه جدید قرار می دهیم
} color: #ccc div.p {
باکدزیربرای صدا کردن کدهایcss استفاده می کنیم
<link rel="stylesheet" href="css/stylegird1.css">
important
- قابل توجه است که بدانید بیشتر افراد از css external استفاده می کنند زیرا هم برای کد زدن راحت تر و هم برای درک کدها بسیار آسان تر است
فارسی
(0) پیام