如何编辑一个博客帖子的CSS,而不是其他人有一个5星评级系统? [英] How do I edit the CSS of one blog post but not others to have a 5 Star Rating System?
问题描述
我最近使用Google的Blogger创建了 我自己的博客。
当我完成阅读某本书时,我有一个 预订我的阅读章节 ,其中我希望使用静态的 5星级系统代替某些类型。也许使用 CSS ,我可以定位每本书,以便我可以从 1到5星显示给访问者。
我不知道如何编辑单个博客帖子的 CSS ,所以我可以针对这些特定的阅读书籍,如果这是最好的方法,并想要任何提示创建图像,我可以指定应该显示多少 5星(例如5星的100%,4星的80%,3星的60%等等)?
$此方法不使用 JavaScript , jQuery , CSS 或 CSS3 。以提供 STAR 的要求。
$ b Solid Star的ASCII代码:★
大纲星标:☆
大纲星的ASCII码:☆
strong> Live DEMO关注( sorry jsFiddle!)::
书名:旅行到牙医
预订作者: Yin Pain&霍华德·赫茨先生
星级:★☆☆☆☆
书名:胸部疼痛
图书作者: I. Coffalot
星级:★★☆☆☆
书名:处理困难
>
星级:★★★☆☆
<
图书标题: Real Eyes Realize Real Lies
图书作者:您
星级:★★★★☆
图书标题:墙上的斑点
图书作者:
星级:★★★★★
上面的HTML标记:
书名:A Trip To The Dentist< br />
Book作者:Yin Pain& Lord Howard Hurts< br />
星级:&#9733;&#9734;&#9734;&#9734;&#9734;< br /
书名:Chest Pain< br />
Book作者:I. Coffalot< br />
星级:&#9733;&#9733;&#9734;&#9734;&#9734;< br /
书名:Dealing With Skunks< br />
Book作者:Stan Back< br />
星级:&#9733;&#9733;&#9733;&#9734;&#9734;< br /
书名:Real Eyes Realize Real Lies< br />
Book作者:I.C.您< br />
星级:&#9733;&#9733;&#9733;&#9733;&#9734;< br /
书名:Spots On The Wall< br />
Book作者:Who Flung Poo< br />
星级:&#9733;&#9733;&#9733;&#9733;&#9733;< br /
★☆ ☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ ; 尺寸,颜色和背景,以便自定义!
I recently created my own blog using Google's Blogger.
When I have completed reading a particular book, I have a Book's I Read Section where I would like to have a static 5 Star Rating System in place of some kind. Perhaps with CSS, I can target each book so I will be able to display from 1 to 5 Stars for the visitor to see.
I'm not sure how to edit the CSS of individual blog posts so I can target these specific read books, if that's the best method, and would like any tips in creating an image which I could specify how much of the 5 stars should be displayed (like 100% for 5 Stars, 80% for 4 Stars, 60% for 3 Stars, etc.)?
This method does NOT use JavaScript, jQuery, CSS or CSS3.
To clarify: It uses plain ASCII Code to provide the STAR requirements.
Solid Star: ★
ASCII Code for Solid Star: ★
Outline Star: ☆
ASCII Code for Outline Star: ☆
Live DEMO Follows (sorry jsFiddle!):
Book Title: A Trip To The Dentist
Book Author: Yin Pain & Lord Howard Hurts
Star Rating: ★☆☆☆☆
Book Title: Chest Pain
Book Author: I. Coffalot
Star Rating: ★★☆☆☆
Book Title: Dealing With Skunks
Book Author: Stan Back
Star Rating: ★★★☆☆
Book Title: Real Eyes Realize Real Lies
Book Author: I.C. You
Star Rating: ★★★★☆
Book Title: Spots On The Wall
Book Author: Who Flung Poo
Star Rating: ★★★★★
HTML markup for above:
Book Title: A Trip To The Dentist<br />
Book Author: Yin Pain & Lord Howard Hurts<br />
Star Rating: ★☆☆☆☆<br />
Book Title: Chest Pain<br />
Book Author: I. Coffalot<br />
Star Rating: ★★☆☆☆<br />
Book Title: Dealing With Skunks<br />
Book Author: Stan Back<br />
Star Rating: ★★★☆☆<br />
Book Title: Real Eyes Realize Real Lies<br />
Book Author: I.C. You<br />
Star Rating: ★★★★☆<br />
Book Title: Spots On The Wall<br />
Book Author: Who Flung Poo<br />
Star Rating: ★★★★★<br />
★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★
Optional: Use CSS font properties
to change star size, color, and background to customize it!
这篇关于如何编辑一个博客帖子的CSS,而不是其他人有一个5星评级系统?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!