Shulou(Shulou.com)06/03 Report--

This article will explain in detail what the style of css is, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

There are three styles in css: 1, inline style, write the css style code in the style attribute of the HTML tag; 2, the internal style, write the css style code in the "" tag pair "of the head part of the HTML document; 3, external style, write the css style code in the external" .css "file.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS, or cascading style sheets (Cascading Style Sheets), is a computer language used to represent file styles such as HTML or XML, and is a standard stylesheet language used to describe the presentation (that is, layout and format) of web pages.

There are three main types of CSS styles:

1. Inline style

Inline style is to put the CSS style directly in the tag in the line of code, usually in the style attribute of the tag. Syntax:

Because the inline style is inserted directly into the label, it is the most direct way, and it is also the most inconvenient style to modify.

Example: apply CSS inline styles for paragraphs, tags, tags, and tags, respectively.

Inline style inline elements, control paragraph-1

Inline element, h3 header element, inline element, control paragraph-2

Inline elements, strong is stronger than em effect inline elements, div block-level elements inline elements, em emphasizes

Effect picture:

It can be seen that two paragraphs

The tag, though different in content, uses the same background color setting, but adds the CSS inline attribute twice to set the background color background-color: # 999900. This not only increases the page volume, but also is not convenient for later modification.

Although inline elements are easy to write, they have the following drawbacks:

Each label needs to be styled by adding a style attribute.

With the past page makers will HTML tags and styles mixed together effect, the difference is that now is written through CSS inline style, in the past the use of HTML tag attributes to achieve the style effect, although the way is different, but the result is consistent: high late maintenance costs, that is, when you need to modify the page one by one to open the site to modify each page, you can not see the role of CSS.

Add so many inline styles, the page size is large, if the portal is written in this way, it will waste server bandwidth and traffic.

2. Internal style

Write CSS in the head of the source file of the web page, that is, between and, surround it by using the tag in the HTML tag, its characteristic is that the style can only be used on this page, which solves the disadvantage of writing many times in-line style.

Selector {attribute name: attribute value; attribute name: attribute value;.}

Example: set the embedded style writing method for paragraphs to reduce the amount of code.

Internal style p {text-align: left;/* text left alignment * / font-size: 18pxposition * font size 18 pixels * / line-height: 25px / * Line height 25 pixels * / text-indent: 2 emplacements * first line indents 2 text size spaces * / width: 500px * paragraph width 500 pixels * / margin: 0 auto;/* browser Center * / margin-bottom: 20px / * the bottom margin of the paragraph is 20 pixels * /}

Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text!

Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text!

Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text!

Effect picture:

3. External style

If a CSS style is placed in a file outside a web page document, it is called an external style sheet, and an CSS style sheet document represents an external style sheet.

In fact, an external stylesheet is just a text file with a .css extension. When the CSS style code is copied into a text file and saved as a .css file, it is an external style sheet.

As shown in the following figure:

External stylesheets can be imported into an HTML document through HTML tags or the @ import command.

Syntax:

@ import css file; @ import 'css file'; @ import "css file"; @ import url (css file)

Example 1: using tags

I am controlled by the lianjie-2.css file. What about you downstairs?

Upstairs, lianjie.css file for me to wear flower clothes.

Example 2: using the @ import command

@ import url (lianjie.css); @ import url (daoru.css); body {background-color: # e4e929;}

I am controlled by the lianjie-2.css file. What about you downstairs?

On the jacket, the lianjie.css file gives me a floral dress.

What about the style of css to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.