Regaining the basics of CSS? Opening_html/css_WEB-ITnose

Origin

I have been working in the software industry for more than 5 years. I have participated in several web-based projects, so I am basically familiar with javascript and Html. Recently, I have paid more attention to web front-end development. After analysis, I found that CSS is indeed my weakness, so I decided to strengthen it. Just start reading this book: "The Definitive Guide to CSS". The articles here and in the future will be based on studying this book.

The following is Chapter 1: "CSS and Documentation" Study Notes

Concepts distinguish between replaced and non-replaced elements

CSS works mainly on elements, but not all elements work in the same way create. For example, images and paragraphs are not the same type of elements, nor are spans and divs. Generally, there are two types of elements: replacement and non-replacement.

Replaced element:

means that the part used to replace the content of the element is not marked by the document content itself. For example, the img element has no specific content. Its specific content is filled in by an image specified by the src attribute. Another example: type="text" is that this is a text input box. When changing another attribute (button), the browser display will be different. (X), , , <select>, <object> in HTML are all replacement elements, and these elements have no actual content. </object></select>

Nonreplaced element:

Most (X)HTML elements are non-replaced elements, whose content is displayed by the browser in a box generated by the element itself. For example, css base is a non-replaceable element.

Block elements and inline elements Block elements:

The block element generates an element box. By default (without CSS intervention), it will fill the content area of ​​its parent element and cannot have other elements next to it. The more familiar ones are p and div. You can think of the block element div as boxes, or if you have played with clipping, it will be easier to understand. We first cut out the required articles from various newspapers and magazines. Each piece of cut content is a block. Then we glued these blocks onto a new piece of blank paper according to our layout intention. This will form your own unique abstract.

Inline elements:

Inline elements create boxes of elements within a line of text without interrupting the line of text. The best example is the a element in XHTML. These elements do not generate "separators" before or after themselves, so they can appear within the content of another element without disrupting its display.

Of course, in actual use, the css attribute is often used for its function: display. This attribute is for use and will be learned later.

About link

Generally, if an HTML page wants to reference the css style of an independent file, the link tag will be used, such as:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all”>

There are a few things you need to pay attention to during use. Point:

Link must be placed in the head element and cannot be placed inside other elements . CSS files cannot contain XHTML or any other markup language. Externally referenced CSS files do not necessarily have to have an extension, but based on support for older versions of browsers, it is recommended to specify the .css ending.

In addition, during use, we rarely come into contact with a link tag attribute: title (used in the selected style sheet). For example:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”default”><link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”big-text”>

Many browsers support users to select styles. By adding a title, users can switch styles based on the browser. Of course, IE still does not support it. This function is also used. Relatively few.