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

This article introduces the relevant knowledge of "what are the basic knowledge of Div and Css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Shortcomings of Html:

Difficult to maintain: code styles in traditional pages are written together, which is not conducive to later maintenance.

The web page is too "fat": the code styles are all written in one page, which is too bloated.

Difficult to locate: too much code and styles are written, so it is difficult to locate in detail.

Advantages of Css:

Separation of performance and content

Enhance the expressiveness of the web page

The display style of the website tends to be unified

Css editing method:

Write the css rules in the HTML file

Write css rules in a separate file

CSS cascading style sheet

Css (Cascading Style Sheet) cascading stylesheets, and styles are formatting. Cascading means that when HTML files refer to multiple Css styles, they generally follow the "recent preference principle".

A Css is a text file that contains one or more rules.

Having said so much about the definition of Css, what on earth is a construct of Css?

Div+Css Foundation of Web Front-end Development Technology

Definition of the styl

Style defined in the head/head tag, declare that the style/style tag with a type= "text/css" will be able to write the css style inside the tag, but this method is used in this document.

Div+Css Foundation of Web Front-end Development Technology

If you want to reference an external css document, you need to define it like this:

Note: css style file names are named with meaningful English letters.

CSS selector type

Tag selector: redefines the tag for HTML, and the style takes effect immediately.

Class selector: with a period. At the beginning, and can be named arbitrarily, such as .div1, .files, etc., the style takes effect after it is applied, and when some tags have the same style, they can be defined as selector groups.

ID selector: starts with "#" and can be named anything you want.

Div+Css Foundation of Web Front-end Development Technology

The difference between ID selector and class selector

Class selectors can define styles for as many tags as you want, but ID selectors can only be used once in the current page because ID is uniquely identified.

The ID selector style takes precedence over the class selector style, but the ID selector is so limited that you can only define the style of one of the elements individually (used in special cases).

Declaration of CSS selector

Collective declaration: the collective declaration of the Css selector is a declaration that defines a series of elements.

For example:

H _ 2 color:red;font-family: boldface;}

Global declaration: a global declaration declares the style of the entire page.

For example: * {padding: 0 auto;font-size: 55pxscape color: aquamarine;}

Inline style

The inline style is to write css code directly into an existing HTML tag.

Basic syntax: tag style= style attributes: attribute values; style attributes: attribute values; …

Syntax description:

Tags: HTML tags, such as body, table, p, etc.

The style definition of the tag can only affect the tag itself

Multiple attributes of style are separated by semicolons

The style defined by the tag itself takes precedence over all other style definitions.

Note: inline styles affect only a single element (tag).

Div+Css Foundation of Web Front-end Development Technology

CSS inheritance and cascading

The inheritance rule of the style sheet is that the child tag inherits the style of the parent tag

CSS specifies the priority of styles (from highest to lowest) as follows:

Inline style > id style > Class style > tag style

DIV creation

DIV is the positioning technology in cascading stylesheets, the full name is DIVision, that is, partition. It can sometimes be called a layer.

Definition:

You can define partitions or sections in a document

Tags can divide a document into separate, different parts. It can be used as a strict organizational tool and is not associated with it in any format.

Usage:

Div is a block-level element. This means that its content automatically starts a new line. In fact, line wrapping is the only format inherent in div. Additional styles can be applied through div's class or id.

You can apply class or id attributes to the same div element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a class of elements), while id is used to identify individual and unique elements.

Div+Css Foundation of Web Front-end Development Technology

DIV nesting

Layers contain other layers, called nesting of layers. Layer nesting often needs to be used with CSS styles to more accurately control the display of the page. Let's take a look at some uses of layer nesting:

Div+Css Foundation of Web Front-end Development Technology

Div+Css Foundation of Web Front-end Development Technology

Div+Css Foundation of Web Front-end Development Technology

DIV and Span markers

Span tags (inline elements)

Basic syntax:

Differences in the use of Div and span tags

The common feature of div and span is that there is no formatting rendering of the objects in the tag by default, which is mainly used for the application of CSS style to split and layout the page.

Differences:

Div is a block-level element with newline characters before and after, while span is an inline element with no fixed format

Div tags can contain span tags, and vice versa

But block elements and row elements are not absolute, and can be converted to each other by defining the display attribute of CSS.

This is the end of the introduction of "what are the basics of Div and Css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.