Previous Lesson review:
HTML Tags: format layout
P-paragraph Double
BR Line-Change Order
HR Separate Line List
H1~h6 title Double
Pre-formatted output dual
div tag, without any special meaning
HTML Tags: text
<em> emphasize tilt double
<ruby></ruby> add Pinyin
<rt></rt>
<strong> Bold Accent Double
<mark></mark> tag Check Double
<sub></sub> subscript
<sup></sup> superscript
<ins></ins> What to insert
<del></del> What to delete
CSS: Using in HTML
Link external CSS single href type rel
<style> </style>
Style Property
CSS selectors and precedence
#id
. className
TagName
Combination Selector1 Selector2
Combination Selector1>selector2
Group SELECTOR1,SELECOTR2
and P.item. Item.first-item p#nav <div class= "Item First-item" >
*
Selector priority
ID > Class > TagName
CSS Properties: Font text color
Font:[bold|style] Size Family
Font-family:
Font-size:
Font-weight Bold
Font-style Italic
Font-variant:small-caps
Color
Word-spacing
Letter-spacing
Text-align Left/right/center
Vertical-align:middle/top/bottom
Line-height
Word-wrap:break-word/overflow-wrap
White-space:pre/pre-wrap
Text-decoration:underline/overline/line-through/none
Text-indent
CSS Color and length
# color
ColorName
RGB () RGB ()
#十六进制
# length
Px
Em
Percentage
CSS dimensions, padding, borders, backgrounds
Dimensions
Border
Border-style Border Style Solid/dotted/dashed/double/none
Border-width Border Width
Border-color Border Color
Border Composite Propertiesborder: 1px solid #ccc
Inner margin
padding: value; Up or down
padding: value 1 value 2; up or down
padding: value 1 value 2 value 3; Up or down
padding: Value 2 value 2 value 3 value 4, upper right lower left rear to add unit px.
Background Properties
Background-color background Colortransparent
Background-image background image URL ()
Background-repeat background picture Tile Repeat no-repeat (not repeated tiling) Repeat-x (repeat horizontally) repeat-y (repeat tile Vertically)
Background-position background picture position 10px,10px according to coordinates picture position
- Background-position:right Center (center right) center Center
background-attachment background picture Fixed scroll/fixed
Background composite Properties
Background: #ccc URL ('.. /.. /dist/images_two/bg02.jpg ') no-repeat 10px 10px
CSS Sprite Wizard diagram
Use Background-position to set the position of the background picture
Integrate a lot of small pictures into a large picture
Benefit: Reduce the number of network requests
2 Super Links2.1 a elementProperties
Href
Target _blank/_self
Title
Download H5 New
Special Usage
Jump page
Texting
Call
Send e-mail
2.2 Path
2.3 Cursor CSS Properties
Pointer/move/no-drop
2.4 Anchor points
Set anchor points
The first way
<a name= "anchor point Name" ></a>
The second way
a random element.
<tagname id= "The name of the anchor point" ></tagname>
Jump to a specified anchor point
<a href= "#锚点名" ></a>
2.5 full URL
Http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
Protocol Protocol HTTP
Host name hostname Www.baidu.com/IP
Path path/path/demo/contents/
File name filename index.php
Query the contents of queries? a=100&b=300
Anchor Point #mao1
3 picimg Element
Property
image MapMap Element
Area Element
Shape Rect Circle Poly
Coords
Target
Href
Title
CSS dimensions, borders, padding, backgrounds, and CSS sprites