CSS Basic Styles

Source: Internet
Author: User

1.CSS background:

CSS allows you to apply a solid color as a background, and also allows you to create fairly complex effects using a background image

Properties Description
Background-attachment Whether the background image is fixed or scrolls along with the rest of the page
Background-color Set the background color of an element
Background-image Set the picture to the background
Background-position Set the starting position of the background picture
Background-repeat Set whether and how the background picture repeats
body{   background-image:url ("Python.png");   Background-repeat:no-repeat;}

body{   background-image:url ("Python.png");   Background-repeat:no-repeat;   Background-position:center top;}
2.CSS3 background
Background-size Specify the size of the background image
Background-origin Specify the location area of the background image
Background-clip Drawing area with specified background
body{   background-image:url ("Python.png");   Background-repeat:no-repeat;   background-size:100px 100px; }
CSS styles-Text

CSS Text properties Define the appearance of text. With text properties, you can change the color of the text, the spacing of characters, the alignment text, the decoration, the indentation of the text, and so on.

Properties Description
Color Text color
Direction Text direction
Line-height Row height
Letter-spacing Character Spacing
Text-align Aligning the text in an element
Text-decoration Add adornments to Text
Text-indent Indent the first line of text in an element
Text-transform The letters in the element
Unicode-bidi Set text orientation
White-space How whitespace is handled in an element

Word spacing


<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <title></title>        <Linkrel= "stylesheet"href= "Style.css"type= "Text/css">    </Head>    <Body>        <P>View Color</P>        <H1>Title View Color</H1>    </Body></HTML>


body{   Color:aqua;}

CSS Links


CSS links in four states:

A:link--Normal, inaccessible link a:visited--the user has visited the link a:hover--the mouse pointer is above the link a:active--the moment the link is clicked

Take a look at the reaction when the mouse moves around the link.

<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title>CSS Test</title>    <Scriptsrc= "App.js"></Script>    <Linkrel= "stylesheet"type= "Text/css"href= "Test.css"></Head><Body><ahref= "Http://www.shiyanlou.com">Shiyanlou</a></Body></HTML>


a:link {color: #FF0000;}    /* The link */a:visited {color: #00FF00;}/* The link that has been visited */a:hover {color: #FF00FF;}   /* mouse pointer moves to the link */a:active {color: #0000FF;}  /* The link that is being clicked */

2CSS Setting link background color

Modify the corresponding property Background-color

Depending on the link above, this can be the case

a:link {background-color: #B2FF99;} a:visited {background-color: #FFFF85;} a:hover {background-color: #FF704D;} a:active {background-color: #FF704D;}

3 Edit Link Underline

Add the Text-decoration property to the link attribute

CSS List

CSS lists allow you to prevent, change, or label a list item.

1 List types

and List-style-type This property, we can use it to control the tag type.

2 list item picture

With the List-style-image property

Ul.img1{list-style-image:url ("4.ico")}ul.img2{list-style-image:url ("11.ico")}
<ulclass= "IMG1">    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li></ul><ulclass= "Img2">    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li>    <Li>Shiyanlou</Li></ul>

3 Shorthand list Style
Li {list-style:url (example.gif) Square}
CSS tables

In the form of learning we mainly understand the following properties:

Border-collapse---Sets whether to merge the table borders into a single border.

Border-spacing---Sets the distance separating the border of the cell.

Caption-side---Set the position of the table header.

Empty-cells---Sets whether empty cells in the table are displayed.

Table-layout---Sets the algorithm for displaying cells, rows, and columns.

CSS Outlines

A contour (outline) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence.

The CSS outline property specifies the style, color, and width of the element outline. The attributes involved are:

Outline sets all the profile properties in a declaration.

Outline-color sets the color of the outline.

Outline-style sets the style of the outline.

Outline-width sets the width of the contour.

<id= "P1">Shiyanlou is my home</p> <  ID= "P2">Shiyanlou is my home</p> 
#p1 {    outline-color: #FF704D;    Outline-style:groove;    outline-width:10px;} #p2 {    outline-style:dotted;    Outline-color:green;    outline-width:5px;}

CSS Basic Styles

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.