CSS3 传统文章排版技术学习

Classic Typographic Studies 包括标题字体、段落分隔线、首字母大写、段落引用。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1704
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    src: local("Great Vibes"), local("GreatVibes-Regular"), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v1/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format("woff");
}
body {
    font: 100%/1.3 "Palatino Linotype", Georgia, serif;
    padding: 50px;
    background: #eee;
}
div {
    background: white;
    padding: 60px 50px 50px 70px;
    width: 550px;
    text-align: justify;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Trajan Pro";
    text-align: center;
}
h2 {
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
    padding-top: 0.5em;
    border-top: 1px dotted #333;
}
p {
    text-indent: 3em;
}
p.autor {
    font-family: 'Great Vibes', cursive;
    text-align: center;
    margin-top: 0;
    font-size: 150%;
    text-indent: 0;
}
p.capitular {
    text-indent: 0;
    padding-left: 5em;
}
p.capitular:first-letter {
    font-size: 5em;
    float: left;
    line-height: 0.8;
    margin-left: -1em;
}
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
    margin-top: 1em;
}
h2 + p {
    display: inline;
}
blockquote {
    padding: 10px;
    font-size: 1.3em;
}
blockquote:before {
    content: open-quote;
    font-size: 2em;
}
blockquote:after {
    content: close-quote;
}
blockquote.dir {
    float: right;
    width: 33%;
    margin: 10px;
    text-align: left;
    font-weight: bold;
    font-style: italic;
    border-left: 1px dotted #333;
}

HTML

<div>
    <h1>Lorem ipsum ullamco veniam</h1>
    <p class="autor">por Leonardo Baptista Lopes</p>

<p>Quero ver se tento fazer um projeto de estilização tipográfica baseada em classes do body que determinem se há capitulares ou não, se os parágrafos são indentados, espaçados, se os títulos são ao lado dos textos, como são as capitulares...</p>

<h2>Lorem ipsum minim.</h2>
    <p>Lorem ipsum minim magna amet commodo in ex ex sint Excepteur nostrud velit aliqua aliquip laborum ex sint Excepteur quis enim aute est non elit laborum Excepteur nisi deserunt est culpa ex dolore dolore occaecat ex amet ullamco velit esse id Duis
        consequat quis Duis id laboris in amet dolore anim deserunt.</p>

<blockquote class="dir">Cupidatat culpa esse cupidatat ullamco dolore ad nostrud eiusmod</blockquote>

<p>Lorem ipsum minim magna amet commodo in ex ex sint Excepteur nostrud velit aliqua aliquip laborum ex sint Excepteur quis enim aute est non elit laborum Excepteur nisi deserunt est culpa ex dolore dolore occaecat ex amet ullamco velit esse id Duis
        consequat quis Duis id laboris in amet dolore anim deserunt.</p>

<p class="capitular">Meu et minim elit ullamco minim id mollit anim cupidatat reprehenderit reprehenderit ullamco fugiat pariatur minim consequat ullamco culpa amet cupidatat enim anim in enim dolor in et est fugiat commodo culpa incididunt est deserunt labore commodo
        ex non id proident laboris incididunt amet adipisicing veniam magna elit ea.</p>
</div>

Classic Typographic Studies 包括标题字体、段落分隔线、首字母大写、段落引用。

编辑器支持Emmet

快捷键

Classic Typographic Studies 包括标题字体、段落分隔线、首字母大写、段落引用。

HTML5 CSS3带上传列表和进度动画的多文件上传控件

CSS3 10个DIV构建的超酷光影变幻艺术

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：