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

Source: Internet
Author: User
Tags border color tagname

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.