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

This article mainly introduces the DIV+CSS layout of the knowledge points of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you read this DIV+CSS layout knowledge points which articles will have some harvest, let's take a look at it.

Standard layout of div+css web pages

The full name division of DIV means "chunk, split", and the DIV tag is a meaningless container tag that divides the page into different areas. By subdividing complex pages into blocks through DIV, the problem can be subdivided and solved one by one, so dividing pages into blocks through DIV is not only a key work, but also a prerequisite to determine the final effect and quality.

Css

CSS (Cascading Style Sheet), translated into cascading style sheets in Chinese, is a markup language that controls the style of a web page and allows the separation of style information from the content of a web page.

Div carries content, while css carries style

Practical information: I borrowed the DIV+CSS courseware of the front-end senior engineer.

Shortcomings of div+css

1. Use is relatively complex

Compared with the table layout in html, the divcss layout is relatively complex and requires more knowledge.

The compatibility problem of website browser designed by 2.CSS is more prominent.

The support for CSS varies slightly from browser to browser, but these small differences can also make websites display differently in different browsers, even beyond recognition.

Why use div+css

1.div+css is the web standard and conforms to the trend.

two。 Make up for the functional defects of html tags.

3. Accelerate the speed of page loading and reduce traffic costs.

4. More friendly to the search engine, more conducive to include and crawl your page.

5. Separate the content and performance of the page, facilitate maintenance and management, and save a lot of manpower and costs.

How to use css to control page styles

Inline style

Embedded style

Selector {attribute 1: value 1; attribute 2: value 2;}

External styl

Import Styl

@ import url (external stylesheet location)

Priority:

Inline style sheets > other style sheets

Other stylesheets, with the same priority, determine whether they work in the order in which they are imported.

Css selector

When we define a style rule, this style rule acts on certain elements of a web page, and our rules for these elements are called selectors.

.id selector

. Class selector

. Tag selector

. Cross selector

. Group selector

. Descendant selector (including selector)-parents and children are separated by spaces

. Universal selector: * {}

Css selector

Pseudo class selector

Different styles of the same html element in different states

A:visited {color: # 00FF00} / * visited links * /

A:hover {color: # FF00FF} / * move the mouse over the link * /

Inheritance and superposition of css

Inheritance

Descendant elements inherit some text attributes and styles of their predecessors.

Superposition

The same element is specified by multiple style rules.

Because of the inheritance and superposition of css, there is the concept of css priority.

Priority of selector

Practical information: I borrowed the DIV+CSS courseware of the front-end senior engineer.

Css comment

Annotation

There are comments in any language, and CSS is no exception.

The comment of CSS is / * comment content * /

Block elements and inline elements

We have learned a lot about HTML tags. Different tags have different features. For example, from the point of view of document flow, tag elements are divided into block tags and line tags.

A block tag, that is, a tag element is a block, that is, it has wide and high attributes. At the same time, the block tag will occupy a single line. For example, H1~H6, P, li and other tags are all block tags. Of course, they also include the DIV tag we are about to learn.

The row label is just the opposite of the block label, the row label does not have wide or high properties, and the value of the mrgin attribute is only left and right. It will not occupy a line, so we can use line labels to specify different CSS styles for text blocks to achieve different results, and there are many line labels, such as em, span tags and so on.

This is the end of the article on "what are the knowledge points of DIV+CSS layout?" Thank you for reading! I believe you all have a certain understanding of "what are the knowledge points of DIV+CSS layout". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.