如何编辑一个博客帖子的CSS而不是其他人有一个5星级系统？(How do I edit the CS

我最近创建了自己的博客使用谷歌的博客。

当我已经完成了读一本特别的书，我有一本书我读出部分 ，我想在地方某种有一个静态的5星级评定系统 。也许与CSS，我可以针对每本书，所以我就可以从1到5星显示访问者看到的。

我不知道如何编辑个人博客帖子的CSS，所以我可以针对这些特定的读的书，如果这是最好的方法，并想在创建图像，我可以指定多少分应该是没有什么技巧显示（如100％5星，80％为4星，3星60％，等等）？

Answer 1:

这种方法不使用JavaScript，jQuery的 ，CSS或CSS3。

为了澄清：它使用普通的ASCII码提供之星的要求。

实心星：★
ASCII码为实心星： ★

概要星：☆
对于大纲星ASCII代码： ☆

现场演示如下（ 遗憾的jsfiddle！）：

书名：一趟牙医
本书作者：滋阴疼痛主霍华德好痛
星级：★☆☆☆☆

书名：胸痛
本书作者：一Coffalot
星级：★★☆☆☆

书名：处理臭鼬
本书作者：斯坦返回
星级：★★★☆☆

书名：真正的眼睛实现真正意义上的谎言
本书作者：IC您
星级：★★★★☆

书名：景区在墙上
本书作者：谁扔便便
星级：★★★★★

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:

使用jQuery的星级插件 。
见第二一半的CSS唯一方法。

下面是从截图jQuery的星级插件 。该数据库集成Tab拥有更多插件的例子，你可以随时搜索更多的jQuery插件星这里，如果你需要的。

截图：

参考：

的jsfiddle演示jQuery的星级插件

jQuery的的jsfiddle星级演示截图：

该jQuery的星级插件使用（ 极配置 ）最小的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>

上方和下方是两个非常不同的此答案的解决方案。

使用纯CSS评级系统 ，而不jQuery插件或JavaScript。
见第1半以上的jQuery星级插件的方法。

所使用的参考图像是从热交联性 imageshack.us和如下所示。
尺寸是width:98px; 和height:143px; 和图像类型是jpg 。

参考：

的jsfiddle演示纯CSS星级

的jsfiddle纯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 */
}

Answer 3:

您可以更改使用特定标签的CSS style属性：

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

该.stars类看起来是这样的：

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

其中stars.png是20像素宽的图像，然后重复在x尺寸的4倍（80px）为4分。分将是100像素宽，等等。

总的想法是上面在此的jsfiddle演示实现完整的教程评论。

参考：

的jsfiddle演示配备可重复星级CSS演示

截图：

文章来源: How do I edit the CSS of one blog post but not others to have a 5 Star Rating System?