Common style attributes and style attributes

Common style attributes and style attributes
NOTE Information

Review:

Form function:

From the perspective of use: html provides a way to input content.

From the server perspective: provides a way to collect information.

This allows the client to interact with the server.

For example, upload a file on the registration page.

Three common elements: input select textarea

10 common Input types:

Text, password, radio, checkbox, submit, reset, button, image, hidden, file

The names in Radio should be the same to ensure that the elements in the Radio button are mutually exclusive.

The names in the Checkbox must be the same.

The label is used for binding. The dot text is equivalent to clicking a small selected button.

Both Submit and image have the Submit function, which is responded by the url of the form action.

Get shows fast submission and response, with less content to be transmitted

The Post implicit submission response speed is slow, and the transfer content is large and widely used.

Checked is selected by default.

Select: name option value selected

Textarea: The text contains a line break and a line break.

Attributes: rows cols and readonly

Css Cascading Style Sheets:

Purpose: beautify pages and modify html tags.

Css code uninstalls html vendors. The embedding method is as follows:

1. Row embedding: any tag of the style in html has the style attribute, and the css code is used as the value of the style. The modification range is small.

2. embedded in the page: style and stle are used as a label to unload the head. There are three ways to set the type = "text/css" for this label:

(1) Tag selector: p {} font {} table {} div {}

(2) class selector:. className {} can write multiple

(3) Id selector: # identity {} cannot write multiple IDs, and duplicate IDs are not allowed.

Priority: Line> id> class> label

3. common attributes in css:

Text modifier:

Border modifier:

Writing Method: Multiple Elements share one style:

P, font, span {}

P, # spanStyle,. fontStyle {}

P span {} indicates that the span in p follows the style in.

Padding and margin are used to determine the edge distance.

Modify the image style in the list: {list-style-image :( url )}

Div can be used for layout, and more complex layout methods can be used. Div is a block-level label. The default value is one row.

By default, the span does not contain line breaks, and there is no width or height. The content prevails.

Float attribute.

1. If there is a stack, there is a positioned above.

2. If there is a positioning method, who appears at the end of the body and who appears at the top.

3. z-index: Who has the largest number and who is on it.

4. If there is nesting, it is displayed on the top.

Exercise the layout of e-notebook with css + div.

Sample Code:

And corresponding effect:

Different browsers have different effects.

Common attributes in a section:

Color: #660; background-color: # 9CF; width: 500px; height: 800px; text-align: center; text-decoration: underline; font-size: 16px; font-family: "Lucida Console", Monaco, monospace; white-space: pre-line; line-height: normal; letter-spacing: normal; word-spacing: 10px;

If necessary, query in detail.

Border: 0; border-bottom: # 00F 5px dotted;

The front and back of these two sentences are still quite exquisite:

There is no display here, if the front and back positions are reversed:

Border-bottom: # 00F 5px dotted; border: 0;

Table {border: #9F6 20px inset ;}

You must add inset to have a border.

Different browsers have different effects. No.

Absolute and relative indicate whether or not the current element has left its position.

In contrast, the previous position is retained,

Never give up the previous position.

Section common attributes:

Font-color

Background color background-color

Section width: width

Paragraph height: height

Text align

Text modifier: text-decoration: underline

Font size: font-size

Font Style: font-family

White: (physical length of the previous Unit) white-space

Row height: line-height

Padding: letter-spacing

Word spacing: word-spacing

Code and effects:

1,

<Input type = "text" style = "border: 0; border-bottom: # 00F 5px dotted;"/>

<Hr/>

<Br/>

<Input type = "button" value = "test" width = "200px" height = "150px" style = "border: #060 5px solid; background: #360; border: # 00F 5px outset "/>

Effect:

2,

<Style type = "text/css">

# One {width: 300px; height: 200px; background-color: #090; position: absolute; top: 180px; left: 280px ;}

# Two {width: 300px; height: 200px; background-color: # F00; float: left}

</Style>

</Head>

<Body>

<Div id = "one">

</Div>

<Div id = "two">

</Div>

<Span>

Hi!

</Span>

<Span>

Hello

</Span>

</Body>

3,

<Style type = "text/css">

# One {width: 300px; height: 200px; background-color: #090; position: absolute; top: 180px; left: 280px ;}

# Two {width: 300px; height: 200px; background-color: # F00; position: relative; top:-20px; left:-20px ;}

</Style>

</Head>

<Body>

<Div id = "one">

<Div id = "two">

</Div>

</Div>

<Span>

Hi!

</Span>

<Span>

Hello

</Span>

</Body>

4,

<Style type = "text/css">

# One {width: 300px; height: 200px; background-color: #090 ;}

# Two {width: 300px; height: 200px; background-color: # F00 ;}

</Style>

</Head>

<Body>

<Div id = "one">

</Div>

<Div id = "two">

</Div>

<Span>

Hi!

</Span>

<Span>

Hello

</Span>

</Body>

5,

<Style type = "text/css">

Table {border: #090 2px solid; witdh: 500px; height: 300px}

 

Td {border-color: # 33c; border-width: 2px; border-style: solid}

 

. TdStyle {border-left: # f03 5px double}

</Style>

</Head>

<Body>

<Table>

<Tr>

<Td> nihao </td> <td class = "tdStyle"> hello </td>

</Tr>

<Tr>

<Td> dajiahao </td> <td> tahao </td>

</Tr>

</Table>

</Body>

6,

<Style type = "text/css">

Table {border: #9F6 20px inset; margin-top: 0px}

Img {margin-top: 0px ;}

</Style>

</Head>

<Body>

<Table align = "center">

<Tr>

<Td>

</Td>

</Tr>

</Table>

</Body>

7,

<Style type = "text/css">

/* Hyperlink pseudo class */

A: link {color: # F00; text-decoration: none ;}

A: hover {color: # F60; text-decoration: underline; font-size: 18px}

A: active {color: # FF0 ;}

A: visited {color: #0F0}

</Style>

</Head>

<Body>

<A href = "#"> Wang </a>

</Body>

8,

<Style type = "text/css">

Font, p, span {font-size: 24px; font-family: Verdana, Geneva, sans-serif; color: #0C3}

Font, # classstyle,. idstyle {font-size: 36px}

P span {font-size: 48px}

</Style>

</Head>

<Body>

<Font>

This is the font part.

</Font>

<P class = "idstyle">

This is section

</P>

<P>

This is section

</P>

<Span>

This is the interval part.

</Span>

<Span id = "classstyle">

Id and range!

</Span>

<P>

<Span>

This is the interval part.

</Span>

</P>

</Body>

9,

<Style type = "text/css">

Li {list-style: none; float: left; padding-left: 5px}

</Style>

</Head>

<Body>

<Ul>

<Li>

Album

</Li>

<Li>

|

</Li>

<Li>

Message Board

</Li>

<Li>

|

</Li>

<Li>

Introduction

</Li>

<Li>

|

</Li>

<Li>

Logs

</Li>

<Li>

|

</Li>

<Li>

Personal Center

</Li>

</Ul>

</Body>

10,

<Style type = "text/css">

Li {list-style-image: url (.../../picture/arrow3.png )}

</Style>

</Head>

<Body>

<Ul>

<Li>

Lifei

</Li>

<Li>

Jiyongc

</Li>

</Ul>

</Body>