div tags in html

Brief introduction

Defined

<div> defines a partition or section (division/section) in a document.

<div> tags can divide documents into separate, different parts. It can be used as a strict organizational tool and is not associated with any format. If you mark <div> with an ID or class, the label will become more effective.

Usage

div tags are more powerful when applied to style Sheet (style sheets), and the ultimate goal is to give the designer another organizational capability, with attributes such as Class, style, title, ID, and so on.

<div> is a block-level element. This means that its contents automatically start a new line. In fact, line breaks are the only form of <div> inherent in the presentation. Additional styles can be applied by <div> 's class or ID.

You do not have to add a class or ID for each <div>, although there are some benefits to doing so.

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 element groups (similar elements, or can be understood as a class of elements), whereas IDs are used to identify individual unique elements.

Example

The following is an example:

align= "Center"

Optional value: Center,left,right. Determines the center of the word, picture, table and so on, left or right of the function and center Mark <CENTER>, the former is the standard starting from the HTML3.0, the latter is the universal long-time labeling method.
Position and hierarchy of CSS cells-div tags

We all know that using HTML to locate text and images on a Web page is a "heartbreaking" thing. We must use table tags and implicit GIF images, even if this does not guarantee the accuracy of positioning, because the browser and operating platform different will make the results of the display changes.

And CSS allows you to see the dawn of Hope. With the CSS properties we're going to learn today, you can precisely set the position of elements and stack positioned elements on top of each other.

Cascading Style Sheets (CSS) is the basis for DHTML. CSS is used to set how the elements on your page 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 nouns: CSS and css-p. The following four English URLs provide detailed documentation and explanations of CSS and css-p.
1. Using div tags (div)
When we use CSS-P, we mainly use it on the DIV (division) tag. When you place a word, image, or other in a div, it can be called a div block, or a DIV element or a css-layer, or simply a layer. And in Chinese we call it the "hierarchy". So when you see these nouns later, you know that they refer to a section of HTML in a DIV.

The way to use DIV is the same way you use other tags:

This is a DIV tag.

If you use a DIV alone without any css-p, the effect is the same as using it in a Web page.

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

This is a truck

The name of the hierarchy is arbitrary, the name can be any English letter and number, but the first 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 of using the External method is the same. We will explain this method in detail later in the course. Now we are mainly talking about the inline method. Notice the relationship between the ID in the STYLE and the DIV in the External method.

<style type= "Text/css" >

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

</STYLE>

This is a truck.

Cross-browser CSS Properties:

The main purpose of our course is to make the pages you write work on both NS4 and IE4, so we mainly discuss the properties that are common to both. The following properties conform to the standards given by the consortium.

Position determines how the DIV tag is placed. "Relative" means that the position of the div is relative to the other tag, and "Absolute" is that the position of the DIV tag is relative to the window where it is located.

Left relative to the position of window

The position of top relative to the top of the window

Width of the DIV tag. All the text or HTML in the DIV is inside.

Height of the DIV tag. This property is rarely used unless you want to Clip layers.

Clip gives the clipping (visible) portion of the layer. Clip allows the DIV to be displayed as a well-defined, precise block. You can use the following four values to give the block's DIV position and size.

Clip:rect (Top,right,bottom,left);

Visibility hide or show div according to its value "visible", "hidden", "Inherit".

Z-index DIV tag's stereo position. The larger the value of the DIV, the higher the position.

Background-color the color of the DIV background.

Layer-background-color Netscape's DIV background color.

The background image of the Background-image DIV.

Layer-background-image the background image of the Netscape DIV.

2. Absolute positioning and relative positioning (position)

Absolute positioning:

Positioning attributes will be the key to the Web-worm's opening of the Gates of Happiness:

H4 {; left:100px; top:43px}

This CSS rule allows the browser to accurately set the starting position of <H4> to 100 pixels from the left side of the browser and 43 pixels from its top. Note that the only setting here is the left and the top, and it says that the text will be left-to-right, from top to bottom and downloaded into the Browse window.

The left and top properties are intuitive, the left side sets the distance from the left side of the browser window, and the top sets the distance from the top of the browser window. When you set these distances, you can use the various degrees or scale values you've learned. When you use a scale value, the scale value is relative to the size of the parent feature.

What can you position? Any thing! Paragraphs, words, GIF and JPEG images, QuickTime movies, and more.

Relative positioning:

Absolute positioning allows you to pinpoint elements in a separate location on the page, regardless of the location settings of other features on the page. Relative positioning refers to the position of the element you are targeting relative to the location assigned in the file. Cases:
{; left:40px; top:10px}

The key to relative positioning is that the position of the positioned element is positioned relative to where it normally should be. The relative positioning unit appears in the lines of the normal static positioning unit, and does not completely separate itself from the static positioning unit when positioned. If you stop using relative positioning, the position of the text will return to normal. Be careful when using relative positioning, otherwise it is easy to make the page very messy.

In addition to relative positioning and absolute positioning, you can also use the static (static) parameter values. Static is the default value for the position attribute. It is used in the same way as normal HTML, and cannot attach special positioning settings. In other words, except for the margin characteristics, or by using the Float property to affect the positioning of the unit, the other can not.

3. Control of the positioning unit (width, height, visiblility)

In addition to controlling the position of the upper-left corner of the positioning unit, you can also control the width and height of the unit and the visibility of the unit on the page.

Width: Positioned elements are still displayed from left to right when they are displayed on the page. The Width property allows you to set the limit for the character to flow to the right, that is, the width of the set element.

DIV {; left:200px; top:40px; width:150px}

When the browser receives this rule, it displays the text according to the effect specified by the rules, and limits the maximum paragraph size to 150 pixels.

The Width property is only available for absolutely positioned elements. You can use any of the length units we've learned, or use proportional values to set the width, which refers to the proportions relative to the parent element. In IE 4, this property can also be used for images. You can artificially pull or compress images by width setting.

Height: Theoretically, the height should be similar to the width setting, except in the vertical direction:

DIV {; left:200px; top:40px; height:150px}

Here I use "theoretically", because some browsers do not support the height attribute.

Visibility: With CSS, you can hide elements so that they can't be seen on the page. This property applies to both positioned and not positioned elements.

H4 {Visibility:hidden}

Options:

Visible so that elements can be seen

Hidden the element to be hidden

Inherit refers to the visibility settings that it inherits from the parent element.

The value inherit is the default value. This enables the unit to inherit the visibility of the parent cell. So, if a paragraph is hidden, any inline cells it contains are also hidden. This inheritance can be superseded by explicitly specified visibility. For example, the EM cell in the paragraph is specified as visible, and if the segment is hidden, all other content within the paragraph disappears, and only the text in the EM cell is visible.

3div Properties

Color: #999999 Text colors

font-family: Arial Text font

font-size:10pt Text Size

Font-style:italic text Italic

Font-variant:small-caps Small Font

letter-spacing:1pt text Spacing

line-height:200% Set Line Height

Font-weight:bold text Bold

Vertical-align:sub subscript Word

Vertical-align:super superscript Word

Text-decoration:line-through and Strikethrough

Text-decoration:overline Plus top Line

Text-decoration:underline Plus Bottom Line

Text-decoration:none Delete Connection Bottom line

Text-transform:capitalize First letter Capitalization

Text-transform:uppercase English Capital

Text-transform:lowercase written in English

Text-align:right Text * Right-aligned

Text-align:left text * Align Left

Text-align:center Text Center Alignment

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 Fixed Background

Background-repeat:repeat repeating arrangement-page presets

Background-repeat:no-repeat non-repeating arrangement

Background-repeat:repeat-x in x-axis repeating arrangement

Background-repeat:repeat-y repeats in y-axis

background-position:90% 90% background image x and Y axis position

Link

A all Hyper-connections

A:link Hyperlink Text Format

a:visited the connected text format you've browsed

A:active press the format of the connection

A:hover Mouse Move to Connection

Border

BORDER-TOP:1PX solid black Upper Box

border-bottom:1px Solid #6699cc Bottom Box

border-left:1px Solid #6699cc left box

border-right:1px Solid #6699cc Right box

BORDER:1PX Solid #6699cc Four borders

Dashed

<textarea style= "border:1px dashed Pink" >

Solid line

<textarea style= "border:1px solid Pink" >

Set the height of the div and the line of text is the same, that is, the line-height and height of the value is the same, and finally give the div a over-flow:hidden, let the outside part of the hidden.

div tags in html