CSS basic Syntax (2)

Source: Internet
Author: User

CSS basic Syntax (2)

First, text font properties

1. Text Properties: Line-height,text-align,letter-spacing,text-decoration,white-space

2. Font properties: Font,font-family,font-size,font-weight

123<meta http-equiv="Content-type"Content="text/html; charset=gb2312"/>4<style type ="Text/css">5 li{6 font:15px song body;7text-Align:left;8line-height:28px;9               }Ten . title{ Oneletter-spacing:5px; Awhite-Space:nowrap; -text-Decoration:underline; -               } the . bigfont{ -font-size:16px; - color:red; -               } +</style> - +<body> A<div> at<ul> -<liclass="title"&GT;CSS Basic Syntax (2) </li> -<liclass="Bigfont"> Perseverance, hard to learn CSS basic grammar, to become a master of CSS and strive! </li> -Text attributes for <li>css </li> -<liclass="Bigfont"> The next step in learning CSS is to work harder to learn javascript! </li> -Font properties for <li>css </li> in</ul> -</div> to</body> +View Code

Second, background properties

Background attribute parameters: Background, Background-color, background-img, Background-repeat, background-position

1, the value of the Background-repeat property:

Repeat horizontal and vertical tiling, default values

Repeat-x Horizontal Tiling

Repeat-y Tile Vertically

No-repeat background map does not overlap tiles

2, the value of the Background-position property

Xpos Ypos x indicates that the horizontal direction y represents the vertical direction (positive value is the positive offset, while the negative value indicates reverse offset, and up to right)

Percent Y% use percentage to indicate the position of the background (30% 50% vertically centered, offset horizontally 30%)

x Direction keyword y direction keyword horizontal direction keyword left, Center ,rightvertical keyword Top,center,bottom

123<meta http-equiv="Content-type"Content="text/html; charset=gb2312"/>4<style type ="Text/css">5 div{6Background:url (img/test.jpg) no-repeat;7background-position:-100px 0px;8               }9</style>Ten One<body> A<div> - This  isA test of background! - This  isA test of background! the This  isA test of background! - This  isA test of background! - This  isA test of background! - This  isA test of background! +</div> -</body> +View Code

Third, list of common properties

1. The List-style attribute is used to define the various styles of the list item, and the List-style attribute value is described as follows:

None No modifier

Disc Solid Circle

Circle Hollow Circle

Square Solid Square

Decimal number

2. The Float property is used to define the floating direction of the element.

123<meta http-equiv="Content-type"Content="text/html; charset=gb2312"/>4<style type ="Text/css">5 li{6 width:150px;7 color:red;8 font:28px;9list-Style:none;Ten                  float: Right; One               } A</style> - -<body> the<div> -<ul> -<li> Pencils </li> -<li> pens </li> +<li> Fountain pen </li> -<li> Brushes </li> +<li> Brushes </li> A</ul> at</div> -</body> -View Code

Insist on a little further every day, refueling!

CSS basic Syntax (2)

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.