Let's analyze this case first.
The title container is left aligned, fixed width and height. Title text is white, centered horizontally and vertically.
There are four paragraphs in the text, each Each paragraph has a fixed width and is aligned to the right margin.
The first three paragraphs are empty on the first line two words. Each paragraph has a section of highlighted text, with color and underline decoration, as well as italic and bold text effects.
some text in the paragraph and Modification effects such as color, bold, underline, and italic.
The fourth paragraph starts with A guitar icon, the English font has an outer glow effect.
Let's make this web page.
Create 007-css-case- 1 folder, create a case-text-fonts.html page file and case-1.css style file in the file.
Create base code inside html file , import the external style case-1.css inside the head tag.
First, make the title.
Add an h1 element and fill in title text.
Before writing the heading style, assume What the UI designer gives you is a picture of an article, you may be in trouble, how to get the width and height of the title, background color and text size?
Everyone open the QQ in the computer, Log in, press Control + Command + A on the Mac computer, press ctrl+alt+a on the Windows computer, circle the page title, and click the check mark button to complete the screenshot.
Input ps in the browser. gaoding.com, open the online PS. Click File, New, and click the Create button. Finally, Control + V to paste the screenshot image.
Apply marquee tool to spot title The width and height of the selection are 200 and 50 pixels, respectively, and the size of the text is 24 pixels.
Apply eyedropper tool, click title box Draw the background color and click the foreground color button to get the hexadecimal color value #a52a2a.
With these three values, You can define the style of the title.
h1 { width: 200px; height: 50px; background-color: #a52a2a; color: white; line-height: 50px; font-size: 24px; text-align: center;} Define h1 selection , declare style width: 200px, height: 50px, background-color: #a52a2a, color: white, font-size: 24px, text-align:center
View the page in your browser, The effect of the title is basically realized. Next complete the vertical center alignment of the text.
You can declare line- height The line height attribute indirectly achieves the vertical centering of the text. What is the value of the line height? According to the line height knowledge learned earlier, set the line height value to 50px, which is the height of the container where the text is located. This way, the text is exactly vertically centered within the container.
Next make four paragraphs.
Add four p in HTML element, fill in some text. Let's add styles to these paragraphs.
p { width: 500px; text-indent: 2em; text-align: justify; word-spacing: 10px; text-transform: capitalize; line-height: 28px;}Define the p selector, declare Style: width: 500px, so that each paragraph has a fixed width. text-indent: 2em, two spaces at the beginning of each paragraph. text-align: justify, to achieve the right border alignment of the paragraph. Add a style to the last paragraph of English: word-spacing: 10px, add word spacing. text-transform: capitalize, the first letter of each word is capitalized. Finally, add line-height: 28px to set a line spacing for the paragraph.
Four paragraphs are basically completed up. Next decorate individual paragraphs and text.
Use three span elements separately to These three parts of text are wrapped. Define a class attribute for the first and third span elements with a value of mark1. (the underlined area in the first paragraph, and the underlined area in the third paragraph)
Define mark1 selector in CSS , declare style color: red, text-decoration-line: underline, text-decoration-style: double.
Let's see, these two parts of text Modified by red, double underscore.
The actual effect of the third part of the text is also with a wavy line. You need to define another style to cover it.
Give this span a style class Add a mark2.
Define selector mark2, declare style text-decoration-style: wavy.
The effect is achieved.
Add class to the second span Attribute, the value is mark3.
Define selector mark3, declare style color: orange.
The second part of the text becomes orange.
The case also requires these two parts of text For tilt effect. Wrap them with a span element and define class equal to mark4.
Define selector mark4, declare style font-style: italic.
The text tilt effect is realized.
In fact, all subjects of Qianfeng The name of the subject and the specially modified text have a bold effect, and a span element is added to wrap the outer layer for all subjects. Add mark0 style class names to all spans that need to be bold.
Define selector mark0, declare style font-weight: bold.
The text bold effect is realized.
.mark0 { font-weight:bold}.mark1 { color: red; text-decoration-line: underline; text-decoration-style: double;}.mark2 { text-decoration-style: wavy; }.mark3 { color:orange;}.mark4 { font-style: italic;}Finally, define a special font for the English paragraph and add an outer glow effect.
.p1 { "Sofia", sans-serif; text-indent: 0;}Add a css link referencing Google fonts and a js address of a custom icon in the head.
<link rel="stylesheet " href="https://fonts.googleapis.com/css?family=Sofia&effect=outline">
<script src="https ://kit.fontawesome.com/772ccfd500.js" crossorigin="anonymous"></script>
Define class for English paragraph elements Attribute, the value is p1 font-effect-outline.
Add p1 selector to declare style : "Sofia", sans-serif.
The font effect is realized! There is also an icon icon at the beginning of the paragraph.
How to find your favorite icon ? You can visit the official website of fontawesome, and you can choose from a large number of icons. The guitar is here. (https://fontawesome.com/search?p=2&favorites=staff)
Add the i element to the head of the paragraph , define the class attribute, the value is fas fa-guitar. (note the spaces in between).
We found that using this icon really , the value of the style class is required to add fa- (pronounced as: fa bar) before the name of the icon found on the official website, and fas also needs to be added.
The icon is added! The actual effect, the last line is not indented.
in .p1 (note that there is a bit ) selector to add text-indent: 0 to override the style of the p element.
Why can it be overwritten? The answer is correct, because of the priority of the role - the class selector is greater than the element selector.
In this way, the last line is canceled The first indent of the paragraph!
Accompanying video link to the article: https://www.bilibili.com/video/BV1oU4y1278g?p=68
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Zerobased%20teaching%20you%20to%20learn%20the%20front%20end%20%2067CSS%20text%20and%20font%20comprehensive%20case.html
支付宝扫一扫 
评论列表（196条）
测试