Beef Brisket Publishing System--Introducing CSS in HTML

1. Introduction to CSS

Cascading style sheets (cascading style Sheet), called CSS, is a kind of computer language used to express HTML or XML file styles, and a style design language that can truly separate Web page performance from content. The ability to control the placement of objects in Web pages in a pixel-level format is currently the most widely used language based on text display.

Beef Brisket Publishing System, the application of CSS to the page layout and control, and then explain how CSS in the introduction of HTML.

2. Introduction Method

HTML and CSS when two different languages, they also have a role in a Web page, so you have to hook up the two together to work properly. In the HTML, the introduction of CSS methods mainly include: inline, embedded, import and link four kinds.

1) in-line

Inline is the style property of the tag set CSS style, this way only for a title effect, this way does not reflect the advantages of CSS in essence, so in practice less application.

The above code is inline, only for this one H1 title effect, the text color is set to blue, the background color is set to gray, the effect is as follows:

 2) embedded 
Embedded will focus on the various elements of the page set between 
In the example above, if you want all the H1 tags in the page to use the same style, you can move the style to the Head section and upgrade to inline, with the following code:

Effect
 3) Import type
Import is to introduce a standalone CSS file into the HTML file. It is more widely used than the first two methods of introduction. However, when using the import, the entire page load is completed before the CSS file will be loaded, for some large Web page file size of the browser, will first display a page without style, and then display the page after the setting style. The code is as follows:
H1 {    /*mystyle.css*/    Color:cadetblue;background-color:gray}

Change the Style section in the/*html document to */<style type = "Text/css" >    @import "mystyle.css" </style>

4) link-type 
Linking is the same as importing a standalone CSS file into an HTML file. But in the display effect, will load the CSS file and then load the main part of the page, so the page from the beginning of the display is a style effect, in the view of the visitors, better than the import. Introduce the code directly to remove the imported Style section, add the following statement in the Head section (also the import method used in the beef brisket):
<link href= "Mystyle.css" rel= "stylesheet" type= "Text/css"/>

both imported and linked methods are imported into separate CSS files. There are differences in the ease of maintenance in addition to the above differences in display effects. When you have more than one CSS file, you need several statements to import the CSS file separately if you use linked ingestion. If you want to adjust the whole CSS file classification, you need to adjust the HTML file, not conducive to maintenance. Import can guide you to a total CSS file, and then import other independent CSS files in the file. The type of introduction to use depends on the specific circumstances. 


Beef Brisket Publishing System--Introducing CSS in HTML