Home >Web Front-end >HTML Tutorial >CSS DIV web page style and layout--text style & paragraph_html/css_WEB-ITnose
CSS DIV web page style and layout--text style & paragraph_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:331318browse
The most important thing about a webpage is text. The last blog said that CSS style is the essence of a webpage. The most direct expression in a webpage is text and pictures, and there are some so-called form, first let’s talk about the most familiar and commonly used words. Let CSS control the text in the web page, making it no longer boring and plain. From then on, the text on the web page becomes colorful.
1. Text style
Text style mainly includes text size, color, font, etc., specifically including the following
Write a small example that combines all the above text effect styles:
Code:
<html><head> <title>文字字体</title><style>body{background-color:#99CCFF;}h2{font-family:楷体_GB2312, "Times New Roman";}h3{ font-family:"宋体";}p.bigsize {font-size: 0.5in;}p.smallsize {font-size: 0.5cm;}p.bluecolor { color:#00CCFF;}p.yellowcolor { color:#FFFF66;}p.bold{ font-weight:bold;}p.Italic{ font-weight:bold; font-style:italic;}.line{ text-decoration:underline;}.line1{ text-decoration:blink;}.line3{ text-decoration:line-through;}.line4{ text-decoration:overline;}.zuozhe1{ text-transform:capitalize;/* 单词首字大写 */ }.zuozhe2{ text-transform:uppercase; /* 全部大写 */ }.zuozhe3{ text-transform:lowercase; /* 全部小写 */ }.joy{ color:#CC33CC;}</style> </head><body> <h2>人群中哭着-----楷体</h2> <h3>你只想变成透明的颜色-----宋体</h3> <p class="bigsize">五月天 <span class="joy">你不是真正的快乐</span></p> <p class="smallsize"> 阿信</p> <p class="bluecolor">你再不回梦或痛或心动了-----蓝色</p> <p class="yellowcolor">你已经决定了 你已经决定了-----黄色</p> <p class="bold">你已经决定了-----文字粗细：粗体</p> <p class="Italic">你静静忍着-----文字粗细+斜体</p> <span class="line">紧紧把昨天在拳心握着-----下划线</span><br><span class="line1">而回忆越是甜就是越伤人-----文字的闪烁</span><br><span class="line3"> 文字的删除线</span><br><span class="line4">越是在手心留下密密麻麻深深浅浅的刀割-----顶划线</span> <br><br><span class="zuozhe1">作者: Claribel （英文字母首字母大写）</span><span class="zuozhe2"> 作者: Claribel （英文字母全部大写）</span><span class="zuozhe3"> 作者: Claribel （英文字母全部小写）</span></body></html> Running effect:
2. Text Paragraphs
For text paragraphs It is said that if an article is to be presented to readers clearly and orderly, it is very necessary to have a well-organized paragraph style. Next, we will explain some common styles of text paragraphs. Please refer to the next blog for specific details: CSS DIV web page style and layout?? Text style & paragraph (2)