Sixth CSS style background, background map, text, links

Element background, text (font) style, linksHere we only learn some of the commonly used, more extensions will be the students themselves to understand, or comments below. Here we are for simplicity, using the CSS embedded form.  element Background:when we write the module, sometimes in order to distinguish multiple modules, we will use some obvious way, such as the background (background). Background color:

<style= "background: #dedede;" > I am a light gray background </div>

since the DIV is a block-level element, the background overwrites the entire line, so we'll try to change the div to span.

<style= "background: #dedede;" > I am span light gray background </span>

Instead of a row-level element, its width is only as large as its content. Background Image:

<style= "Background-image:url (' 949282.jpg ');" ></ Div >

students to look good format oh, image is a picture, the URL is the address, the file name in a single quotation mark or double quotation marks wrapped up, or will be error, because we are embedded form, so we can not use double quotation marks. But there is a problem, the picture does not come out, is not found the picture, or there is no picture, or this sentence is wrong? The answer is, the picture found, also came out, but it is a background image, is a background exists, if you have no content in the Div, it does not show up. Then we'll add the content to div:

<style= "Background-image:url (' 949282.jpg ');" > I have a background map here </div>

in this case, the background map will appear, but only one row, not the picture itself so big (high), then how to do? We can go check the height of the image and give the div a height:

<style= "Background-image:url (' 949282.jpg '); height:1200px;" ></ Div >

I here 1200px, is the teacher to show the height of the picture, students can take a picture of themselves, see its size to do a test, so that the picture will be covered with its height, it will automatically match its width, if it is 1920px (wide) *1200px (high), You set it to a height of 1200, then he will automatically set the width to 1920px. We pull the browser, the image will not be smaller, but less to the part, then we add a property:

<style= "Background-image:url (' 949282.jpg '); height:1200px;background-size:100% 100 %;" ></ Div >

background-size refers to its size, then we give two 100% that is, the first its width is 100% of the page, the second is the height of 100%, if less to a 100%, its height will change with the page, it will be the form of "repetition", the picture will become more, Stained with the height of this div. so extrapolate, the row-level elements with a background map, what will happen? Students try them by themselves.  Text style:

<Divstyle= "color:red;">I'm a red word.</Div><!--Font-weight is to set the weight of the font, the value range is 100-900 the higher the font the thicker -<Divstyle= "font-weight:700;">I'm a bold word.</Div><!--font-size is set the font size, the unit has PX em etc. -<Divstyle= "font-size:21px;">I am a word that has been set to a size</Div><Divstyle= "Text-decoration:overline;">I have an underscore.</Div><!--Common Mall, the original price of how much, was deleted, you can use this -<Divstyle= "Text-decoration:line-through;">I was the word that was deleted</Div><Divstyle= "Text-decoration:underline;">I have an underscore.</Div>

Links:hyperlink A tag, it also has several properties, other tags can also be used, but because the other tags do not jump, so the property can not be fully tested, need to use the following JS dynamic, so here we still use a tag to demonstrate:the use of inline or external is here. CSS:

a:hover{    /* Here we use the element controller, followed by: hover  means: The mouse pointer is located above the link */    color:red;} a:link{    /* Here we use the element controller, behind it: Link  means: plain, inaccessible links */    Color:fuchsia;} a:visited{/    * Here we use the element controller, followed by: visited  means: The user has visited the link */    color: #ffff00;} a:active{    /* Here we use the element controller, behind it: active  means: The moment the link is clicked */    Color:darkcyan;}

Html:

<href= "aa.html"> I am a hyperlink </a  >

Sixth CSS style background, background map, text, links