DW Study Notes (2) -- first knowledge of div + css layout

Zookeeper

<Th> and <td> labels: <th> defines the header, and the font is bold. <td> common cells
Div + css layout
The HTML page with a good structure has almost no labels showing attributes. The code is very clean and concise. For example,
Original Code <table width = "80%" cellpadding = "3" border = "2" align = "left">,
Now you can only write <table> in HTML, and write all the control items in CSS.
In HTML, table is a table, rather than anything else (for example, used for layout and positioning ).
 
Plan the Page Structure:
Logo and site name
Homepage content
Site Navigation (main menu)
Sub-menu
Search box
Functional area (such as shopping cart and cashier)
Footer (copyright and relevant legal disclaimer)

Four Methods for adding css to a webpage:
1. Add a style directly to the row
<Label Name style = "style property: attribute value ;...... ">
2. embed the style sheet into the file header (add the style label to the head label and execute this rule throughout the page)
<Style>
<! -- Format: Selector 1 {style attribute: property value; style attribute; property value ......} -->
H1 {color: green}
</Style>
3. Connect to the sample list (connect multiple html files to a sample list file to change the details of a sample list file. All webpages will change)
<! -- Use the link label and add it to the head. *. css is a style table file compiled with only rules or declarations,
Without tags, The href attribute can use absolute or relative URLs.
-->
<Link Rel = stylesheet href = "*. css" type = "text/css">
4. Input style sheet
<Style type = "text/css">
@ Import url (File Name of the external style sheet );
</Style>

Class and id class selector (the difference between the two is. And #)
Two definition methods and usage of class:
<Style type = "text/css">
. Pp {color: lime; font-family:}
P.pt {color: blue; font-family:} (the P value must be the tag name)
</Style>
These classes can be referenced in HTML using the class attribute:
<H1 class = pp> pp class style <P class = pt> pt class style </p>
In this example, the pp class can be used for any label, and the pt class can only be used for <p> labels,
Id class selector:
<Style type = "text/css">
# A1 {style attributes: attribute values ;......}
Tag # a1 {style attribute: attribute value ;......}
</Style>

<Div> and <span> labels
<Div> A tag is used to specify the style of a region (including text, images, tables, and forms ).
<Div id = style name> ...... </Div>
Or: <div class = style name> ...... </Div>
<Span> the usage is the same as that of <div>, but it is used in relatively small areas. div can contain span labels,
In addition, the <div> area object and the context outside the area will automatically wrap, but <span> will not.
Css features
You can use one style for Multiple labels: h1, p {font-family:}
Style rules can be extended from parent to child

Css attributes
Font attribute: font-family:;
Font style: font-style:
Font Deformation: font-variant:
Bold font-weight: 200
Font size Control: font-size: 25px
Font change: text-transform controls all case changes
Text modifier: text-decoration
Line spacing: line-height
First line indent: text-indent
Background color: background-color
Background image: background-image: url(a.jpg)
Background Image repeatability: background-repeat: repeat-x horizontal,-y vertical, no-repeat no repetition
Fixed background image attributes: determines whether the background image follows the scrolling content or does not move.
Background-attachment: scroll/fixed (rolling/fixed)
(Unfinished ......)