Java Learning Chapter - Basics of CSS (1)_html/css_WEB-ITnose

Basic knowledge of css (1)

1. css style:

There are four types of loading css styles:

1 ), external style
2), internal style
3), inline style
4), imported style

<link href="layout.css" rel="stylesheet" type="text/css">

This form is to write the css separately into a css file, and then link it in the source code as a link. Its advantage is that not only this page can be called, but other pages can also be called. It is the most commonly used form.

<style>h2 { color:#f00;}</style>

This form is an internal style sheet, which ends with and is written in the head tag of the source code. Such a style sheet is only valid for this page. It cannot be applied to other pages.

<p style="font-size:18px;">内部样式</p>

The style marked with style in the tag is an inline style. The inline style is only valid for elements within the tag, because it does not It is separated from the content, so its use is not recommended.

@import url("/css/global.css");

The link style is an external style sheet linked by the @import url tag, which is generally used inside another style sheet. If layout.css is the style used on the homepage, then we can put the common styles that are needed globally into a global.css file, and then use @import url("/css/global.css") in layout.css Link global styles in the form of , thus making the code highly reusable.

2. CSS priority:

1), id priority is higher than class
2), the later style overrides the previous
3) , the specified one is higher than the inheritance
4), the inline style is higher than the internal or external style
Summary: a single (id) is higher than a shared (class), if it is specified, use the specified one, if not specified, it will be inherited. Its latest

3. CSS box model composition:

To learn web standards, the first thing to understand is this box model, which is the core of DIV layout. Traditional table layout uses tables and table nestings of different sizes to position and layout web page content. After switching to CSS layout, web pages are arranged through boxes and box nesting of different sizes defined by CSS. The webpage code of this typesetting method is simple, the performance and content are separated, easy to maintain, and compatible with more browsers, such as PDA devices, which can also be browsed normally.

So why is it called a box? Let’s first talk about the attribute names we often hear in web design: content, padding, border, and margin. CSS box mode all has these attributes.

We can think of it as a box with an opening at the top in reality, and then looking down from the top, the border is equivalent to the thickness of the box, and the content is relative to the space of the object contained in the box , and the filling is equivalent to the foam filled in the box for shockproof, and the boundary is equivalent to leaving a certain space around the box for easy removal. Is it easy to understand the box model in this way?

So the width of the entire box model on the page is composed of left border, left border, left padding, content, right padding, right border, and right border, and the width defined by width in the CSS style is only the width of the content part.

The boundaries here are also called: outer margins and outer patches; padding is also called: inner margins and inner patches.

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.