html - 使用 CSS 设置文本样式

Question

您好，我是 CSS 新手，我正在构建的网站中使用引号。但是，当我可以使用 CSS 时，我真的不想使用图像来实现样式。我的问题是我不知道从哪里开始！如果在 CSS中无法实现相同的效果，这是我将使用的图像有人可以告诉我如何实现这一点

Answer 1

最简单的方法是创建一个<blockquote>元素并使用伪元素来控制引号。注意：添加了一些样式，主要是边距和填充，以覆盖浏览器样式。

body {
        font-family: sans-serif;
    }
    
    blockquote {
        color: #aaa;
        position: relative;
        display: inline-block;
        padding: 0 5px;
    }
    
    blockquote p {
        margin-bottom: 5px;
    }
    
    blockquote:before,
    blockquote:after {
        content: "“";
        font-size: 70px;
        font-family: "Georgia", Serif;
        color: #666;
        position: absolute;
        left: -30px;
        top: 5px;
    }
    
    cite {
        float: right;
        color: black;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    
    blockquote:after {
        content: "”";
        right: -30px;
        left: auto;
    }

<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>

@thomas 提到的文章应该包含您需要的所有相关信息