- AMP:Building Accelerated Mobile Pages
- Ruadhan O'Donoghue
- 237字
- 2021-07-08 10:04:10
Text layout with CSS and HTML
So we know how to customize the font. What about text layout? CSS can be applied to text in AMP, just like normal HTML. AMP also provides some additional text layout features.
Pull-quotes are quite common in news article content. It's a technique that's used to emphasize an important part of the text. One way to achieve this is by using a simple HTML blockquote tag (/ch3/pullquotes.html):
<blockquote class="pull-quote">
The whale is a mammiferous animal without hind feet
</blockquote>
Then we'll add a left border to the quote by adding the following CSS:
.pull-quote {
border:none;
border-left:6px solid #999;
font-size:1.5rem;
padding-left:1rem;
}
When viewed in a browser, you should see something like this:

This is nice, but we can do better. Let's add a stylized quotation mark as a visual effect to really make the pull-quote stand out. We can achieve this with CSS, using the before pseudo-selector:
.pull-quote::before {
content: '\00201C';
font-size: 8rem;
font-family: Georgia, serif;
color: #ff8c00;
position: absolute;
left: -0.5rem;
line-height: 7rem;
padding-left: 1rem;
}
This CSS will output the value of the content property--in this case, it's \00201c, which is the unicode value for a double quotation symbol--before any element with class pull-quote. The remainder of the CSS just positions and styles the quote symbol.
The result is a nice, professional-looking pull-quote, as shown in the following image (/ch3/pullquotes.html):

- JavaScript+jQuery開發實戰
- VSTO開發入門教程
- Troubleshooting PostgreSQL
- Java系統化項目開發教程
- Java Web從入門到精通(第3版)
- Raspberry Pi Robotic Projects(Third Edition)
- Mastering SciPy
- Learning Image Processing with OpenCV
- 嵌入式C編程實戰
- CryENGINE Game Programming with C++,C#,and Lua
- Mobile Test Automation with Appium
- Computer Vision with Python 3
- Learning Java Lambdas
- JavaScript重難點實例精講
- SEO的藝術(原書第2版)