如何編輯一個博客文章的CSS而不編輯其他博客文章的CSS，以使其具有5星級評分系統？

Question

我最近使用Google的Blogger創建了自己的博客 。

當我完成閱讀特定書籍時，我會擁有一個書籍的“我閱讀”部分 ，在這里我想擁有一個靜態的5星級評分系統來代替某種形式。 也許使用CSS ，我可以定位每本書，因此我可以顯示1到5星，以供訪客查看。

我不確定如何編輯各個博客文章的CSS ，因此，如果這是最好的方法，那么我可以針對這些特定的已讀書籍，並想知道創建圖像的任何技巧，我可以指定應該將5星分為多少顆顯示（例如5星100％，4星80％，3星60％等）？

Answer 1

這種方法不使用JavaScript，jQuery的 ，CSS或CSS3。

需要說明的是：它使用純ASCII碼提供STAR要求。

實心星： ★
實心星號的ASCII代碼： ★

輪廓星： ☆
輪廓星的ASCII碼： ☆

實時演示遵循（ 對不起jsFiddle！ ）：

---

書名：牙醫之旅
圖書作者：尹佩恩和霍華德勛爵
星級： ★☆☆☆☆

---

---

書名：胸痛
圖書作者： I. Coffalot
星級： ★★☆☆☆

---

---

書名：與臭鼬打交道
本書作者： Stan Back
星級： ★★★☆☆

---

---

書名：真眼識真謊
圖書作者： IC You
星級： ★★★★☆

---

---

書名：牆上的斑點
圖書作者： Who Flung Poo
星級： ★★★★★

---

上面的HTML標記：

Book Title: A Trip To The Dentist<br />
Book Author: Yin Pain & Lord Howard Hurts<br />
Star Rating: &#9733;&#9734;&#9734;&#9734;&#9734;<br />

Book Title: Chest Pain<br />
Book Author: I. Coffalot<br />
Star Rating: &#9733;&#9733;&#9734;&#9734;&#9734;<br />

Book Title: Dealing With Skunks<br />
Book Author: Stan Back<br />
Star Rating: &#9733;&#9733;&#9733;&#9734;&#9734;<br />

Book Title: Real Eyes Realize Real Lies<br />
Book Author: I.C. You<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9734;<br />

Book Title: Spots On The Wall<br />
Book Author: Who Flung Poo<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9733;<br />

★☆☆☆☆★★☆☆☆★★★☆☆★★★★☆★★★★★

可選：使用CSS font properties更改星形大小，顏色和背景以對其進行自定義！

Answer 2

您可以使用style屬性更改特定標簽的CSS：

<span class="stars" style="width: 80px"></span>

.stars類可能如下所示：

background: url(stars.png) repeat-x;

其中stars.png是20像素寬的圖片，然后在x尺寸上重復4次（80像素）4個星。 5顆星的寬度應為100px，依此類推。

---

上面的一般想法在此jsFiddle演示中實現，並帶有教程注釋。

參考：

jsFiddle演示具有可重復星級評定CSS演示

屏幕截圖：

Answer 3

使用jQuery Star Rating插件 。
有關僅CSS方法，請參見第二部分。

這是jQuery Star Rating Plugin的屏幕截圖。 Database Integration選項卡包含更多插件示例，如果需要，您可以隨時在此處搜索更多jQuery Star Plugins。

屏幕截圖：

參考：

jQuery Star Rating插件的jsFiddle演示

jsFiddle jQuery Star Rating Demo的屏幕截圖：

jQuery Star Rating Plugin使用的最小HTML標記（ 極其可配置 ）：

<span class="bookFiveStar">
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled" checked="checked"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
</span>

---

上面和下面是針對此答案的兩個非常不同的解決方案。

---

使用沒有jQuery插件或JavaScript的純CSS評分系統 。
有關jQuery Star Rating Plugin方法，請參見上面的上半部分。

使用的參考圖像來自可熱鏈接的 imageshack.us，如下所示。
尺寸width:98px; 和height:143px; 圖像類型為jpg 。

參考：

jsFiddle演示，用於純CSS星級評定

jsFiddle Pure CSS演示的屏幕截圖：

最小HTML：

<div class="starsCSS">
  <img class="stars3" title="3 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
</div>

完整的CSS：

/* This class name configures and positions the 6 star image block. */
.starsCSS{
  /* The width of the star block uses the entire star.jpg width */
  width: 98px;
  /* The height of the star block is LIMITED to 23px, i.e. 1 star row. */
  height: 23px;
  /* This overflow:hidden will ensure only 1 row is ever seen, when aligned properly.
  /* That said, later below different classname uses margin-top negitive offset to align. */
  overflow: hidden;
  /* The placement of the star block is relative to other elements. Adjust px here. */
  position: relative;
  top: 10px;
  left: 155px;
  /* Simple light blue border is provided for the image./
  /* Your cusom star image may be a .png with transparency so remove this setting. */
  border: 2px solid DodgerBlue;
}

/* This CSS Selector consists of classname .starsCSS that has 'img tag'. */
/* This rule will set original image width and original image height for stars.jpg file. */
.starsCSS img{
  width: 98px;
  height: 143px;
}

/* These 6 classes will position the image so that only the relevant "star row" is seen for .starsCSS */
/* Technically, this first class .stars1 is not needed since nothing changes. */
/* Note stars.jpg is used full width (98px), therefore it's 1 column. */
/* Use margin-left with negative value if your custom image.jpg has 2 or more columns */
/* IF stars.jpg was double in width then "margin-left: -98px;" will hide first column */
.stars1{
  margin-top: 0px;
}
/* Reference Image: 143px height divide by 6 star rows = 23.833333px per row. */
/* Hence, star.jpg image is not perfect and it's rounded to 24px per row instead */
/* Since 1 star row is 24px high, classname .stars2 will offset that to get to next row. */
/* That said, the value needs to be negitive since entire image is shifted up (offset). */
/* The class .starsCSS will now show the second star row! */
.stars2{
  margin-top: -24px; /* Shift up star row 1 */
}
.stars3{
  margin-top: -48px; /* Shift up star rows 1 and 2 */
}
.stars4{
  margin-top: -72px; /* Shift 3 rows of stars out of view (24 x 3 = 72 )  */
}
.stars5{
  margin-top: -96px; /* Shift 4 rows of stars out of view */
}
.stars6{
  margin-top: -120px; /* Shift 5 rows of stars out of view */
}