2015-09-21 Third Lesson CSS properties Border (border), background (background)

Last Update:2015-09-22 Source: Internet

Author: User

Tags border color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the use of border

The properties of the border are: Border-color: Border color

Border-width: Indicates the thickness of the border

Border-style: Border Style (solid solid line, dashed dash, dotted: dotted line)

the usual notation:border:solid 3px red;

The HTML is as follows:

<id= "D1"> Border height Border width border color </Div  >

The CSS is as follows:

#d1 {    width:200px;     height:200px;     Border: solid 2px red;    }

Second, set the page background (background)

Page background properties are: Background-color: Background color

Background-image: Background image

Background-repeat: Background Repetition has three attributes: (repeat-x; (horizontally paved) repeat-y, (longitudinally paved) no-repeat; (not covered)

BACKGROUND-POSITION:22PX the location of the 25px background image

Background-attachment:fixed The background image is fixed

/*background-size:cover (Stretch paved) */

usual notation:background:#FC6 url (.. /images/9.png) no-repeat fixed 5px 10px;

The HTML is as follows:

<Body><DivID= "D2"><P>Golden handle Bao umbrella, surrounded by the United States ornaments, the shape is very solemn, but also show the Buddha. Golden handle prop up a variety of jumbo umbrella, surrounded by beautiful decorations, the appearance of special solemn, will such a treasure umbrella also support the Buddha Bodhisattva.</P><P>Geolin Bodhisattva Gatha Hua Yan, the Night Ferris Palace, the Infinite Bodhisattva to set, said Gatha praise Buddha. When the Buddha, the Buddha, the power of Buddhism, all over the view of the Fong, and said the words. For example, the painter, the distribution of color, false take the different phase,</P><P>The people who are not enlightened, and the people after dawu, have different future. It is not easy for you to tell the difference. The eye is not open, as the blind Man is.</P><P>People's hobbies, temperament, work, family, etc. vary widely, the homework should not be forced to agree. The practice of dharma is nothing more than a set of wisdom, and the precepts of the Hui-Dharma are nothing more than: smell and then can think, think and then can repair.</P></Body></HTML>

The CSS is as follows:

#d2{width:300px;Height:300px;Border:Solid 2px Red;Background-color:#FC6;/*Background Color*/Background-image:URL (.. /images/9.png);/*Background Image*/background-repeat:no-repeat;/*Repeat background*/background-position:22px 25px;/*Background Orientation*/background-attachment:fixed;/*Fixed Background*/}

Threethe overflow of CSSProperties

The Overflow property specifies what happens when the content overflows the element box , There are four parameters, namely:

Visible: The default value. (The content will not be trimmed and will be rendered outside the element box).

Hidden: The excess content will be hidden away.

Scroll: The content will be trimmed, but the browser will display a scroll bar to see the rest of the content.

Auto: Scroll bars do not appear when the content does not need a scrollbar, and scroll bars appear if the content is out of range.

Let's talk about the usage of each parameter separately:

1.visible

the Visible property of overflow is the default value, and if you do not set the overflow property, the default property value is visible. Such as:

2.hidden

The hidden value is the opposite of the default value, which hides all out-of-scope content. such as:

　　3.scroll

Setting the overflow value to scroll will hide the contents of the box, but it will provide a scroll bar to scroll inside the box to see what remains. Such as:

It is worth noting that the use of scroll will produce both horizontal and vertical two scroll bars, if only one of the content needs to be Overflow-x:hidden;overflow-y:hidden; To control the hiding of scroll bars! Such as:

Overflow-x:hidden;	Overflow-x:hidden;

4.auto

The auto value of Overflow is similar to scroll , and the only difference is that the scroll bar does not appear when the content does not need a scrollbar, and if the content is out of range, the scroll bar is displayed. such as:

2015-09-21 Third Lesson CSS properties Border (border), background (background)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More