Home > Developer > Web Develop
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;}| 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 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 | Word spacing |
Example
<!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>
STYLE.CSS file
body{ Color:aqua;}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>
Test.css
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 */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;}Add the Text-decoration property to the link attribute
CSS ListCSS lists allow you to prevent, change, or label a list item.
1 List typesand List-style-type This property, we can use it to control the tag type.
2 list item pictureWith 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}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 OutlinesA 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
