توضیح این کد؟!

[topmihan 141]

سلام دوستان

کسی میتونه کد css زیر رو واسه خط به خط توضیح بده

بعضی از جاهاشو متوجه نمیشم

مخصوصا اون جایی  که با رنگ قرمز مشخص کردم

.button,
[class*="button-"]{
  position: relative;
  display: inline-block;
  overflow: hidden;
  float: left;
  margin: 0 1em 1em 0;
  padding: 0 4em;
  height: 3.5em;
  font: 300 1em/3.5em 'Open Sans', sans-serif;
  text:{
    decoration: none;
    shadow: 0 1px 3px rgba(black, .35);
  }
  letter-spacing: .08em;
  color: #fff;
  background: #0090C0;
  border: solid 1px #fff;
  border-radius: 2px;
  @include transition(.35s ease all);

  &:hover{
    background: #007DA7;
    box-shadow: 0 0 3px rgba(black, .5) inset;
  }
}

.button-hover{

  &:hover{ line-height: 9em; }

  &:before{
    content: attr(data-text);
    color: #DEEFF5;
    position: absolute;
    top: -2.75em;
  }
}

البته تودر تو بودنشم نمیفهمم

[مصطفی صفرعلی 2,891]

با سلام

 

رنگ قرمزی ندیدم که منظورتون رو متوجه بشم ولی اینکه کدها بصورت تو در تو نوشته شده ، مربوط به یکی از تکنیکهای خلاصه نویسی در css میشه

 

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

 

موفق و پیروز باشید

یا حق

[topmihan 141]

ممنون از پاسختون

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

یعنی با این تکنیک میشه در css گفت فلان id بیاد و از دستورات فلان کلاس استفاده کنه؟؟؟

اگه آره لطفا بگین چطور بنویسم h2 های فلان موقعیت از یه کلاس مثلا به اسم point استفاده کنه

ممنونم

[مصطفی صفرعلی 2,891]

یعنی با این تکنیک میشه در css گفت فلان id بیاد و از دستورات فلان کلاس استفاده کنه؟؟؟

اگه آره لطفا بگین چطور بنویسم h2 های فلان موقعیت از یه کلاس مثلا به اسم point استفاده کنه

با سلام

 

بله میشه البته راه خاص خودش رو میطلبه ، ببینید بطور کلی ، در css شما میتونید هر آنچه را که در ذهن دارید پیاده کنید ولی نحوه پیاده سازیتون باید بر اساس واقعیت باشه یعنی هر چیزی رو که میخواهید در css بنویسید باید از قبل در php تعریف کرده باشید

 

اینکه فلان آی دی از یک کلاس استفاده کنه خیلی ساده است . کافیست در php مشخص کنید که کلاس را برای کدام تگ نیاز دارید ، بعد در css ، کلاس مورد نظر را تعریف کنید

 

مثلا یک تگ دایو با آی دی idname داریم . حالا یک کلاس هم به نام classname بهش اضافه میکنیم

<div id="idname" class="classname"></div>

حالا در css فقط کافیه برای کلاسی که ذکر کردید ، خاصیتهای موردنظرتون رو تعریف کنید

.classname{your attributes}

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

 

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

 

مثلا اگر تگ h2 در داخل دایو فوق قرار داشته باشه ، میتونید تگ h2 رو در php تون پیدا کنید و بهش کلاس اضافه کنید و بعد در css برای کلاس مذکور خاصیت تعریف کنید یا اینکه به دایوتون یک کلاس دیگه هم اضافه کنید ، بعد در css برای کد زیر خاصیت بنویسید

<div id="idname" class="classname classnameforh2"><h2></h2></div>
div.classnameforh2 h2{your attributes}

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

 

حالا اینکه اون کد پست اول چیکار میکنه و به چه دردی میخوره هم براتون یک توضیح کوچیک میدم

 

فرض کنید شما از تعداد بسیار زیادی کلاسهای متعدد میخواهید استفاده کنید ( مثلا" 30 تا کلاس ) مثل button-1 و button-2 و button-3 و ...

 

اما مجبورید برای کلاسهای فوق از خواص یکسانی استفاده کنید . در حالت عادی ، نوشتن button-1 تا button-30 آنچه که مسلمه منجر به تولید کاراکترهای زیاد و در نتیجه افزایش حجم فایل css میشه . ضمن اینکه نوشتن همین کاراکترها هم میتونه خسته کننده باشه

 

اما با استفاده از تکنیک خلاصه نویسی ، خیلی ساده میتونید در css بگید که بطور مثال برای کلاسهایی که با نام -button شروع شده اند یکسری خواص به اونها اعمال بشه

[class*="button-"]{your attributes}

 

موفق و پیروز باشید

یا حق