CSS code formatting-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS code formatting

巴扎黑

Aug 09, 2017 pm 03:48 PM

cssformat

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:"宋体";}1

Be 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";}1

body{font-family:"微软雅黑";}1

Note: 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 id="三年级">三年级</h1>    <p>三年级<span id="stress">三年级</span>三年级</p>    <p>三年级</p></body></html>1234567891011121314151617181920

Text 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}1

Example

<!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 id="三年级">三年级</h1>    <p>三年级<span class="stress">三年级</span>三年级</p>    <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516

Text 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;}1

Here 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 id="三年级时">三年级时</h1>    <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p>    <p>三年级时</p></body></html>12345678910111213141516

Text 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>12

Example

<!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>1234567891011121314151617181920

Text 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>12

Example

<!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>123456789101112131415161718

Text layout – – Strikethrough

What if you want to set a strikethrough on the web page? This style is often seen on e-commerce websites:
CSS code formatting

Use the following code to use the strikethrough on the original price in the picture above. You can achieve:

 .oldPrice{text-decoration:line-through;}1

Example

<!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>12345678910111213

Paragraph 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>12

Note: 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 id="尼克-卡拉威">尼克?卡拉威</h1>    <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>    
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415

Paragraph 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>12

Example

<!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>12345678910111213

Paragraph 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 id="了不起的乔布斯">了不起的乔布斯</h1>12345

Note: 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 id="welcome-nbsp-to-nbsp-iOS">welcome to iOS!</h1>12345

Example

<!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 id="hello-nbsp-world-你好">hello world!你好！</h1></body></html>123456789101112131415

Note
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 id="了不起的乔布斯">了不起的乔布斯</h1>1234

Example

<!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="/static/imghwm/default1.png"  data-src="http://img.com/2000200.jpg"  class="lazy"    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!

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