Home >Web Front-end >CSS Tutorial >CSS code formatting
CSS code formatting
- 巴扎黑Original
- 2017-08-09 15:48:371631browse
Text layout – – Font
We can use css styles to set font, font size, color and other style attributes for the text in the web page. Let's take a look at an example. The following code implements: setting the font to Song Dynasty for the text in the web page.
body{font-family:"宋体";}1Be careful not to set uncommon fonts here, because if the fonts you set are not installed on the user's local computer, the browser's default fonts will be displayed. (Because whether the user can see the font style you set depends on whether the font you set is installed on the user's local computer.)
Nowadays, most web pages like to set "Microsoft Yahei", as follows:
body{font-family:"Microsoft Yahei";}1Or
body{font-family:"微软雅黑";}1Note: The first method is more compatible than the second method.
Because this font is beautiful and can be displayed safely on the client (it is usually installed by default locally).
Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋体";}</style></head><body> <h1>三年级</h1> <p>三年级<span id="stress">三年级</span>三年级</p> <p>三年级</p></body></html>1234567891011121314151617181920Text layout – – Font size, color
You can use the following code to set the font size of the text in the web page to 12 px and set the font color to #666 (gray):
body{font-size:12px;color:#666}1Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年级</h1> <p>三年级<span class="stress">三年级</span>三年级</p> <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516Text Layout – – Bold
We can also use css styles to change the text style: bold, italic, underline, strikethrough. You can use the following code to set the text to be displayed in bold style.
p span{font-weight:bold;}1Here you can see that if you want to set bold text for text, there is a separate css style to achieve it. You no longer need to use h1-h6 or strong tags to achieve bold style.
Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年级时</h1> <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p> <p>三年级时</p></body></html>12345678910111213141516Text layout – – Italic
The following code can realize the text to be displayed in the browser in italic style ：
p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920Text layout – – Underline
In some cases, you want to set the underline style for text. This can visually emphasize the text, which can be achieved by using the following code:
p a{text-decoration:underline;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718Text layout – – Strikethrough
What if you want to set a strikethrough on the web page? This style is often seen on e-commerce websites:
Use the following code to use the strikethrough on the original price in the picture above. You can achieve:
.oldPrice{text-decoration:line-through;}1Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>12345678910111213Paragraph layout – – Indentation
Pre-paragraph habits in Chinese text Empty the space between two texts. This special style can be achieved with the following code:
p{text-indent:2em;}<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>12Note: 2em means 2 times the size of the text.
Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415Paragraph layout – – Line spacing (line height)
In this section we will learn about another A line spacing (line height) attribute (line-height) that plays an important role in paragraph layout. The following code implements setting the paragraph line spacing to 1.5 times.
p{line-height:1.5em;}<p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p></body></html>12345678910111213Paragraph layout – – Chinese character spacing, letter spacing
Chinese character spacing, Letter spacing setting:
If you want to set text spacing or letter spacing in web page layout, you can use letter-spacing to Implementation, as shown in the following code:
h1{
letter-spacing:50px;
}...<h1>了不起的乔布斯</h1>12345Note: When this style is used in English words, it sets the spacing between letters.
Word spacing setting:
What if I want to set the spacing between English words? This can be achieved using word-spacing. The following code:
h1{
word-spacing:50px;
}...<h1>welcome to iOS!</h1>12345Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415Note
When setting the element to English, letter-spacing sets the spacing that is not English words , but the space between letters.
Paragraph layout – – Alignment
Want to set a centering style for text and images in block elements? You can use text-align style code. The following code can achieve centered display of text.
h1{
text-align:center/left/right;
}<h1>了不起的乔布斯</h1>1234Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" alt="CSS code formatting" ></div></body></html>123456789101112131415
The above is the detailed content of CSS code formatting. For more information, please follow other related articles on the PHP Chinese website!