CSS dimensions, borders, padding, backgrounds, and CSS sprites

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
 subscript
 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

• Width max-width min-width

• Height Max-height min-height

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-left

• Padding-top

• Padding-right

• Padding-bottom

• Padding use the following points of attention:

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

• Relative path./. /

• Absolute path URLhttp://www.biadu.com/index.html

• A special relative path/lesson/path/index.html

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

• Src

• Title

• Alt

• Usemap

image MapMap Element

• Name

• Id

Area Element

• Shape Rect Circle Poly

• Coords

• Target

• Href

• Title

　　　　

CSS dimensions, borders, padding, backgrounds, and CSS sprites