1. Block-level elements
<Div> Will wrap. to display the same line, float or display: inline
2. Line Element
<Span> <var> <A> <em> <B> <I> <sub> <textarea> <SELECT> <strong> <br/>
Multiple widgets can be displayed side by side. The default width setting does not work. You need to set display: inline-block or block, or add padding-left and padding-right.
3. common symbols
Double quotation marks (& quot;) & (& amp;)> (& gt;) <(& lt;) Space (& nbsp;) Copyright (& copy ;) registered Trademark (& reg;) multiplication number (& times;) Division (& divide ;)
4. Selector
Class selector: <Div class = "A"> </div> in CSS:. {...;}
Id selector: # A {…;} in <Div id = "A"> </div> CSS {...;}
Descendant selector: <Div class = "A">
<Div class = "B"> </div>
</Div> CSS:. A space. B {...;}
Group selector: <Div class = "A"> </div>
<Div class = "B"> </div> CSS:. A,. B {...;}
Tag selector: <A> SDS </a> in CSS: {...;}
5. CSS style Writing and priority
External style sheet:
<Head> <LINK rel = "stylesheet" type = "text/CSS" href = "mystyle.css"/> Internal style sheet:
<Head> <style type = "text/CSS"> HR {color: Sienna ;}</style> Inline Style:
<P style = "color: Sienna; margin-left: 20px"> This is a paragraph </P>
Style inheritance:
The child tag inherits the style of the parent tag.
Style priority:
Inline style> internal style> external style
The browser also has a default style.
6. Font font
Font-style: {normal | italic} default value, italic
Font-variant {normal | small-caps} default value, small uppercase letters
Font-weight {normal | bold | bolder | lighter | 100-900} default value, bold, thicker, finer, and 400 equal to normal
Font-size/line-height {x % | xpx}
Font-family
Abbreviated format: Font: font-style font-variant font-weight font-size line-height font-family
Code example: P {Font: italic normal bold 12px/18px ;}
Note: The abbreviation font definition must at least define the font-size and font-family values.
7. Text attributes
Text-align: {left (default) | right | center | justify (aligned on both ends )}
Text-Decoration: {none (none, default) Underline (underline) overline (upper line)
Line-through (hyphen )}
Text-indent: {text indent attribute}
Line-Height: {Row Height attribute normal (default )}
Letter-Spacing: {spacing attribute normal (default )}
Color foreground color, generally used as a sub-text
8. Background
Background: Format: Background: {property value}
Background-color: {color value | transparent (default)} Property sets the background color of the element.
Background-image: {URL} sets the image as the background.
Background-repeat: {repeat | no-repeat | repeat-x | repeat-y}
Background-Attachment: {fixed | scroll} whether the background image is fixed or scrolling with the rest of the page
Background-position: {top left | top center | top right ...} Attribute to set the start position of the background image.
Code example: body {Background: # ff0000 URL ('I/eg_bg_03.gif') No-repeat fixed center ;}
9. Margin and padding margins
Margin: margin-top margin-right margin-bottom margin-left
Padding: padding-top padding-Right padding-bottom padding-left
Padding: 10px 20px 30px 40px;
Upper right lower left
P {margin: 20px 10px ;}
Up/down
P {margin: 20px 10px 100px ;}
100px under 10 PX at around 20 PX
10. Border border
Border-Width
Border-style: {none | dotted | dashed | Solid} No border, dotted border, dotted line, solid line
Border-color
Syntax format:
Border: border-width border-style border-color
Sample Code:
P {border: 1px solid blue ;}
Border-width: 1px 2px 3px 4px;
Upper right lower left
11. List list
List-style-type: {none | disc | circle | square | ...} Unlabeled, default solid circle, hollow circle, solid square
List-style-position: {inside | outside} list item tags are placed within the text, and the default value is kept on the left side of the text
List-style-image: {URL | none}
Syntax format:
List-style: List-style-type list-style-position list-style-Image
Sample Code:
Ul {list-style: none outside URL ("/I/arrow.gif ");}
12. A label
Use text as a link:
<A href = "www.baidu.com" target = "_ blank"> Baidu </a>
Target: Where to open the link content
_ Blank: open in a new window
_ Self: opens in the current window (default)
A: link {color: Red} is not accessed
A: visited {color: Blue}
A: active {color: lime}
A: hover {color: Aqua}
Use images as links:
<A href = "www.baidu.com"> </a>
Email link:
<A href = "mailto: chengzh@tarena.com.cn"> mail to mE </a>
Anchor:
(Jump to a page)
Name an anchor
<A name = "TOP"> top </a>
Jump to anchor
<A href = "# Top"> to top </a>
(Go to other "www.sine.com.cn" pages)
Jump to the target page and name an anchor.
<A name = "TOP"> top </a>
Jump from the start page to the anchor
<A href = "http://www.sina.com.cn/#top"> to top </a>
13. Usage hotspot
Divide an image into multiple regions, each representing
Link.
<Map Name = "M1" id = "M1">
<Area shape = "rect" coords = "... "Href =" # "/>
<Area shape = "circle" coords = "... "Href =" # "/>
<Area shape = "poly" coords = "... "Href =" # "/>
</Map>
When shape = "rect" (rectangle), The coords value is the coordinate value in the upper left corner and lower right corner. When shape = "poly" (polygon,
Is the vertex value. When shape = "circle" (circle), it is the base value and radius value of the center. The coords value varies according to the image size.
Different from the desired connected area
14. Display attributes
None: Not Displayed
Block: displays block elements.
Inline: Display in Line Element
15. Position attribute
Static: // default placement, from left to right, from top to bottom.
Absolute: // generates the absolute positioning element, which is located relative to the first parent element other than static positioning.
Relative: // generates relative positioning elements and locates them relative to their normal locations.
16. <input/>: Type attribute
Text
Email: <input type = "text" name = "email"/>
Button
<Input type = "button" value = "Click me" onclick = "MSG ()"/>
Checkbox check box
<Input type = "checkbox" name = "vehicle" value = "Bike"/> I have a bike
<Input type = "checkbox" name = "vehicle" value = "car"/> I have a car
Hidden hide
<Input type = "hidden" name = "country" value = "Norway"/>
Image button
<Form method = "Post" Action = "index.html">
<Input name = "Submit" type = "image" value = "" src = "12.jpg"/>
</Form>
In this way, you can directly see that the button is an image on the HTML page!
Password Field
<Input type = "password" name = "PWD"/>
Radio radio button
<Input type = "radio" name = "sex" value = "male"/> male
<Input type = "radio" name = "sex" value = "female"/> female
Reset reset button
<Input type = "reset"/>
Submit button
<Form method = "Post" Action = "index.html">
<Input type = "Submit" name = "button" id = "button" value = "Submit"/>
</Form>
In this way, the submit button is the label <input type = "Submit">. If you want to change it to an image with a style, change value = "Submit" to value = "" (the word "Submit" will not be displayed on the background image ):
CSS code:
# Button {
Background: url(12.jpg) No-Repeat;
Width: 100px;
Height: 50px;
Border: 0px;
Cursor: pointer;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
