What Are DIV Tags?

DIV tags are called segmentation marks. The role is to set the placement of words, pictures, tables, and so on. When you put text, images, or other in a DIV, it can be called a "DIV block", or "DIV element" or "CSS-layer", or simply "layer". We call it "level" in Chinese.

DIV tags

DIV elements are elements used to provide structure and background for block-level content in HTML documents. Everything between the DIV's start and end tags is used to form this block, and the properties of the contained elements are controlled by the attributes of the DIV tag, or by using a style sheet to format the block.

Chinese name: DIV tags
Use to: For large chunks within an HTML document

Called: "DIV block"
Include: Define sections or sections in a document

For example:

align = "center"

Possible values: center, left, right. Determining the center, left, or right of characters, pictures, and tables is the same as the center tag <CENTER>. The former is a standard starting from HTML 3.0, and the latter is a common and long-standing notation.

Position and hierarchy of CSS units-dl tags

We all know that using HTML to position text and images on a web page is "heartbreaking". We must use table tags and implicit GIF images. Even this does not guarantee accurate positioning, because different browsers and operating platforms will change the displayed results.

And CSS can make you see the dawn of hope. With the CSS properties we're about to learn, you can precisely position elements and overlay positioned elements on top of each other.

Cascading Style Sheets (CSS) is the foundation of DHTML. CSS is used to set how elements on your web pages are displayed. Cascading Style Sheets Positioning (CSS-P) is an extension of CSS that can be used to control the position of anything on a web page or in a window. Please remember these two terms: CSS and CSS-P. The following four English URLs provide detailed documentation and explanations about CSS and CSS-P.

1. Using DIV tags (dl)

When we use CSS-P, we mainly use it for DIV (dlision) tags. When you put text, images, or anything else in a DIV, it can be called a "DIV block", or "DIV element" or "CSS-layer", or simply "layer". We call it "level" in Chinese. So when you see these nouns later, you know that they refer to a section of HTML in DIV.

Using DIV is the same as using other tags:

This is a DIV tag.

If you use DIV alone without any CSS-P, then it will have the same effect on the webpage as it is used.

But when we use CSS-P in a DIV, we can strictly set its position. First we need to give this DIV that can be controlled by CSS-P an ID or its name. For example, we give the following DIV the name truck. The purpose of giving the name is that we can use JavaScript to control it later, such as moving it or changing some of its properties and so on.

This is a truck

It is arbitrary to choose a name for the hierarchy. The name can be any English letter and number, but the first one must be a letter. There are two ways to apply CSS-P to a DIV.

Inline CSS: Inline is the most commonly used method.

This is a truck.

External STYLE tag: The result using the External method is the same. We will explain this method in more detail in a future course. We mainly discuss the Inline method. Note the relationship between the ID in STYLE and the DIV in the External method.

<!-#truck {styles go here}->

</ STYLE>

This is a truck.

Cross-Browser CSS properties:

The main purpose of our course is to make the web pages you write work on both NS4 and IE4, so we mainly discuss the properties that are common to both. These properties meet the criteria given by the W3C.

position determines how the DIV tag is placed. "Relative" means that the position of the DIV is relative to other tags, and "absolute" means that the position of the DIV tag is relative to the window in which it is located.

left relative to the left side of the window

top relative to the top of the window

width DIV tag width. All text or html in DIV is in it.

height The height of the DIV tag. This property is rarely used unless you want the Clip level.

clip gives the clipping (visible) part of the layer. Clip makes the DIV appear as a very precise square that can be defined. You can use the following four values to give the block's DIV position and size.

clip: rect (top, right, bottom, left);

visibility hides or reveals the DIV according to its values "visible", "hidden", "inherit".

color: # 999999 text color

font-family: Times New Roman font

font-size: 10pt text size

font-style: italic

font-variant: small-caps

letter-spacing: 1pt

line-height: 200% set line height

font-weight: bold

vertical-align: sub subscript

vertical-align: super superscript

text-decoration: line-through

text-decoration: overline

text-decoration: underline

text-decoration: none

text-transform: capitalize capitalize

text-transform: uppercase

text-transform: lowercase written in English

text-align: right

text-align: left

text-align: center

These are some simple text effects that can be applied to css pages.

background

background-color: black background color

background-image: url (image / bg.gif) background image

background-attachment: fixed

background-repeat: repeat

background-repeat: no-repeat

background-repeat: repeat-x

background-repeat: repeat-y

background-position: 90% 90% position of the background image x and y axis

link

A All Hyperlinks

A: link Hyperlink Text Format

A: visited viewed link text format

A: active press connect format

A: hover mouse to connect

frame

border-top: 1px solid black

border-bottom: 1px solid # 6699cc

border-left: 1px solid # 6699cc

border-right: 1px solid # 6699cc

border: 1px solid # 6699cc four borders

dotted line

solid line

It is sufficient to set the height of dl to the line height of the text, that is, the value of line-height and height is the same. Finally, give dl an over-flow: hidden to hide the excess.