Home >Web Front-end >HTML Tutorial >Proficient in CSS DIV web page style and layout CSS text effects_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout CSS text effects_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:311146browse
In the last article, the editor briefly introduced some basic syntax of CSS. The learning content is not very complicated. It is all some introductory knowledge of CSS. But when a tall building rises from the ground, if the foundation is laid, the high-rise building will not be there. By the way, when learning any course, you must start from the basics, step by step, and go down steadily. In today’s blog post, the editor mainly briefly summarizes the text effects of CSS. First, let’s take a look at a picture:
Next, the editor will explain one by one with the context of the above icons. It is a simple knowledge. Interested friends can do it with Xiaobian. Implement the following code example.
Text font
In CSS, we use font-family to control the text font. Next, let’s take a look at an example and the running effect: >The effect is as follows:
<html><head> <title>文字字体</title><style><!--h2{ font-family:黑体, 幼圆;}p{ font-family:Arial, Helvetica, sans-serif;}p.kaiti{ font-family:楷体_GB2312, "Times New Roman";}--></style> </head><body> <h2>送别</h2> <p>长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。天之涯，地之角，知交半零落。一瓠浊酒尽余欢，今宵别梦寒。长亭外，古道边，芳草碧连天。问君此去几时来，来时莫徘徊。天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多。</p> <p class="kaiti">作者: 李叔同</p></body></html> The row is 4mm, the fourth row is 12pt, and the fifth row is 2pc. From the above code, we can see that CSS controls text size through font-size.
’ ‐ ’ ’ s ’ ‐ ‐ ‐ ‐ ‐ ‐ 🎜>
There are many ways to represent the color of text. Look at the Color: RGB (0%, 0%, 80%) in H2. Represented in hexadecimal, the span flag is directly blue.
The thickness of the text
We continue to read another effect of the text: the thickness effect, we use a lot of lines to compare the thickness of the text one by one to compare the comparison , the example code and the running effect are as follows:
There is a big difference. Until 500, their display effect is the same as bold, while 100~400 is intuitively the same as normal.
<span style="font-size:18px;"><html><head> <title>文字大小</title><style><!--p.inch{ font-size: 0.5in; }p.cm{ font-size: 0.5cm; }p.mm{ font-size: 4mm; }p.pt{ font-size: 12pt; }p.pc{ font-size: 2pc; }--></style> </head><body> <p class="inch">文字大小，0.5in</p> <p class="cm">文字大小，0.5cm</p> <p class="mm">文字大小，4mm</p> <p class="pt">文字大小，12pt</p> <p class="pc">文字大小，2pc</p></body></html></span> Text italics
Text italics. Controlling italics in CSS is controlled by font-style. If it is italic, it means italic, and normal means it is italic. Regular. Let’s look at the example code and the running effect:
The example code and effect are as follows:
The running effect is as follows:
<span style="font-size:18px;"><html><head> <title>文字颜色</title><style><!--h2{ color:rgb(0%,0%,80%); }p{ color:#333333; font-size:13px;}p span{ color:blue; }--></style> </head><body> <h2>冬至的由来</h2> <p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这表明古人对<span>冬至</span>十分重视。人们认为<span>冬至</span>是阴阳二气的自然转化，是上天赐予的福气。汉朝以<span>冬至</span>为“冬节”，官府要举行祝贺仪式称为“贺冬”，例行放假。《后汉书》中有这样的记载：“<span>冬至</span>前后，君子安身静体，百官绝事，不听政，择吉辰而后省事。”所以这天朝庭上下要放假休息，军队待命，边塞闭关，商旅停业，亲朋各以美食相赠，相互拜访，欢乐地过一个“安身静体”的节日。</p> <p>唐、宋时期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在这天要到郊外举行祭天大典，百姓在这一天要向父母尊长祭拜，现在仍有一些地方在<span>冬至</span>这天过节庆贺。</p></body></html></span>
above From the code, we can clearly see that in the text-decoration attribute, the effect is displayed through underline, overline, line-through, and blink.
🎜>
Text-Transform attributes, Capitalize Our renderings provide a nice comparison. We use a simple example to simulate the Google logo. The example code and running effect are as follows:
The running effect is as follows:
<span style="font-size:18px;"><html><head> <title>文字粗体</title><style><!--h1 span{ font-weight:lighter;}span{ font-size:28px; }span.one{ font-weight:100; }span.two{ font-weight:200; }span.three{ font-weight:300; }span.four{ font-weight:400; }span.five{ font-weight:500; }span.six{ font-weight:600; }span.seven{ font-weight:700; }span.eight{ font-weight:800; }span.nine{ font-weight:900; }span.ten{ font-weight:bold; }span.eleven{ font-weight:normal; }--></style> </head><body> <h1>文字<span>粗</span>体</h1> <span class="one">文字粗细:100</span> <span class="two">文字粗细:200</span> <span class="three">文字粗细:300</span> <span class="four">文字粗细:400</span> <span class="five">文字粗细:500</span> <span class="six">文字粗细:600</span> <span class="seven">文字粗细:700</span> <span class="eight">文字粗细:800</span> <span class="nine">文字粗细:900</span> <span class="ten">文字粗细:bold</span> <span class="eleven">文字粗细:normal</span></body></html></span> Message from the editor: In this blog post, the editor mainly introduces the text effects of CSS, including text font, text size, text color, text thickness, text italics, underline, underline, and delete lines, and the upper and lower case of English letters. These are some basic knowledge about setting text with CSS. It is not difficult. The key is to do more and practice more. CSS makes our interface come alive and move. BS learning, Not finished, to be continued...