search
HomeWeb Front-endCSS TutorialBeautify HTML paragraph text Ⅰ_Experience exchange

上篇已经说了在第五篇会开始讲CSS,刚开始讲不能讲得复杂,我们还是由浅入深,一步步来。还是那句话:先用起来,然后再去研究。即然我们第一篇讲的是段落,那我们这篇初讲CSS当然也还是要从段落开始,让我们的段落先漂亮起来。

在没有讲CSS之前我们先去想一下什么样的段落才看起来才是最舒服的?如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》。不论如何至少我们的小学老师告诉我们每一段的第一行应该空两个字。这可能是我们接受到的第一个关于如何划分段落的方法。并且可能更多人已经产生了思维定式,认为段落必需要首行空两格。而我则认为区分段落的首要素同段距,其次才能是段落首行的处理。而首行的处理是否只有缩进两字呢?我个人认为不是,因为我们还可以用“首字下沉”、“首行突出两字”等来表现。有人会说:“首字下沉我就见过,比如作者的博客就用了这个效果,但是首行突出两字似乎有点奇怪。”然而事实上首行突出两字必不是作者发明的,在中国古代的奏本上就常采用这种格式,不同的是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别的排版形式,这种形式现在的文体是用得少了,不过大家可以多多了解一下,方便以后表达不同的文体时可以用得着。

Beautify HTML paragraph text Ⅰ_Experience exchange

即然段距是段落区分的第一要素,那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组

组合而成的,而我们的CSS只要通过对这个段落标签的描述就可以实现我们所需要的效果了。那么基本形式是:

p {这里是样式描述内容}

我们注意到了,在CSS中这个段落标签是不需要加尖括号的,只需要一个"p"即可以了。所有的标签都是如此处理。那么我们需要给每个段落设个段距,这里我们有两个描述属性,一个是padding,另一个是margin,这两个表现的效果看起来有点像,但是却有着本质上的区别,如果我们把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边的距离,而margin则是盒子与盒子之间的距离。这里很显然,我们里应该是使用margin。写法是:margin:1em 0;这是一种简写的方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0;  这很明显太冗余了,所以一般我们通常是写成:margin:1em 0 1em 0; 这里的顺序是上右下左,由于上下的数值是一样的,左右的数值是一样的,那么就可以再缩写成:margin:1em 0; 这里的em是指相对长度单位,相对于当前对象内文本的字体尺寸。有关于单位的知识请查阅沈苏小雨编制的《CSS2.0中文手册》。那为什么要用em而不用px或是pt呢,这是因为我们现在的流览器大多都有字体放大的功能,这也是方便读者的能看得更清楚文字内容,那么如果我们用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距的特性也就不存在了。所以我们使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别。

Beautify HTML paragraph text Ⅰ_Experience exchange

这里值得注意的是,当我们使用margin的时候两个段落之间的margin会有重叠,那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度,但是上图中间的示意padding却没有重叠他们的高度是相加的,这点大家要注意到,这不是什么BUG,而是一种特性。那么我们就写一句CSS来设定我们的段落:

p {margin:1em 0;}

When we talk about paragraph spacing, we naturally talk about line spacing. Friends who have read "Web Design Skills Series One: A Brief Talk on Text Layout" will understand the importance of line spacing. So have you set the line spacing for your pages? How do you set it? There is a special attribute for setting line spacing: line-height, which should be called line height. Because what we want to set is the height of a row, not the distance between rows. This is why we always find that the data for setting line spacing in Photoshop is different from the values ​​set for web pages. But line spacing can still be generated by the line height we set, so the methods are different, but the goal is the same. Generally, our line height must exceed the font height, otherwise the lines will overlap. Of course, we do not rule out using this method to create some special effects, but at least when reading the text, we need the lines to be clear. The line spacing should not be too large. If it is too large, reading efficiency will be low. If it is too small, it is easy to read the wrong line. Therefore, the general line height should not exceed the height of two characters. The most commonly used Zhenzhi is between 1.6em and 1.8em. If the width is large, we need to increase the line spacing, otherwise we will easily read the wrong line. If the line spacing is too large when the width is small, reading efficiency will be lost. Then let’s add some CSS to the paragraph just now and mark our line spacing:

p {margin:1em 0; line-height:1.6em; }

This completes the basic paragraph settings. If you need to add a first line indent to this paragraph, you can also set the font, font size, font style, color, etc. for this paragraph:

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em "宋体"; color:#000; }

The font attributes here are also in abbreviated form, the order is: "font : font-style || font-variant || font-weight || font-size || line-height || font-family ", these The knowledge is described in Shen Su Xiaoyu's CSS2.0 Chinese manual. I won’t repeat it here. The color here is the color of the text. The value after # should be 6 digits. You can directly copy the value in the Photoshop color picker. But we also often abbreviate. The abbreviation is that when the values ​​of the odd and even bits are the same, they can be combined into a 3-digit color value. For example: #4488cc, which can be abbreviated to #48c. If you need to highlight the first text, you not only need to set the value of text-indent to a negative value, but also need to modify the value of padding, because the protrusion is beyond the content area. If the padding If there is no space in the area, the two highlighted words cannot be displayed. Then let’s give another CSS that highlights two words in the first line

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em "宋体"; color:#000; } SPAN>

The content about beautifying paragraph text will be discussed here. The next article will explain how to make a drop cap and what to pay attention to!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Lost CSS Tricks of Cohost.orgThe Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AM

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Next Level CSS Styling for CursorsNext Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesWorlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsUsing CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholder'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIICSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsTailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools